What Is a Favicon?

Do you have a habit of having dozens of tabs open in web browsers at the same time?

Are you able to quickly visually match every browser tab with a certain website; eventually being unable to read their names? Favicons are your best friends, making it much easier to find the website you require.

While favicons may appear small and insignificant, they can make a significant difference in terms of user experience and online branding.

This article acts as a guide in helping you understand what a favicon is, the importance of having one, how to create one, and how to add a favicon in HTML.

Ready? Let’s dive in

What Is a Favicon?

A favicon is a small square image or pixel icon that serves as your website’s branding. Its main purpose is to make it easier for visitors to find your page when they have multiple tabs open. A favicon works best as a simple image or one to three characters of text due to its small size.

Favicons are not to be confused with logos, but they are sometimes used interchangeably.

Because of its small size and resolution, the favicon may need to be an even smaller size or part of a company’s original logo.

Favicon, which stands for “favorite icon,” was introduced as a new feature in the Internet Explorer browser in 1999. When users bookmarked a website in Internet Explorer, the icon appeared next to the website’s name in the favorites list. Originally, all favicons were created as ICO files, a Microsoft-developed format for storing Windows program icons.

Favicons can be found next to an identifier for your website. Address bar, bookmarks, browser tabs, toolbar apps, history results, and search bars all fall under this category.

Why Are Favicons Important?

Favicons are not directly responsible for your Search Engine Optimization, but they are an important tool for improving your ranking on search engines. The following are some examples of how a favicon can help your SEO:

Credibility and trustworthiness

Users have a tendency to judge online retailers and services based on how well-designed their website is. Something as careless as not having a favicon can easily lead to a loss of credibility, especially when users compare you to your competitors.

If your site lacks a favicon, a web browser will open a browser tab with the default, blank document. Worse, if this is displayed next to a competitor’s site, you will lose credibility and trust.

Take a look at W3Counter’s web browser market share: More than 65 percent prefer Chrome, 17.5 % prefer Safari, 5.6 % prefer Internet Explorer and Edge, 4.4 % prefer Firefox, and less than 2 % prefer Opera. You can use a favicon.png file type and 512 x 512 pixels if the majority of users are using Google Chrome and Safari.

It saves the user time

Favicons save users time by allowing them to quickly identify a website from bookmarks, history, and other places where a browser stores that favicon for quick identification. It simply makes life easier for the average user.

Recognized brand

Favicons act as a small ID for your website, assisting users in remembering it while browsing through multiple URLs. So, whether it is browser history or a list of bookmarked sites in your browser, favicons assist the user in easily recognizing and accessing your web pages. This is simply because graphics are far more easily perceived than text.

Favicon FAQ

How do I create a favicon?

Step 1: Make Your Image

A favicon image can be created with an image editor such as Fireworks, Photoshop, Corel Paint, or a free, open-source alternative such as GIMP.

Many businesses simply use their company logo to support consistent brand identity.

Start with a 64 x 64-pixel square and scale it down to 16 x 16 pixels later to make editing easier. The favicon file format should then be saved as a.jpg,.png,.gif,.bmp,.svg, or.tif.

Step 2: Convert the Image

Once you’re satisfied with the image, save it as favicon.ico. This is the recommended format, which is supported by the majority of web browsers.

You may need to use an online tool — a favicon generator to convert your file to .ico format, such as iconifier.net, prodraw.net, or Faviconer. You can also find tons of other web design tools to assist you in creating a favicon.

There are numerous options available. Simply upload your image, choose the icon size, and then download your new favicon.ico file.

Step 3: Upload the Image to Your Website

The .ico file must be placed in your website’s root directory. When you go to www.yoursite.co.uk/favicon.ico, the image should be visible.

What does a favicon look like? (Favicon examples)

Consider favicons, small icons, or website icons, to be similar to the icons on your phone’s home screen—visually identifiable squares that help you quickly choose what you want.

However, favicons appear in locations other than the tops of browser tabs. In addition to browser tabs, favicons can be found in the following places:

Bookmarks Manager: When you open your list of bookmarks, you will notice that favicons appear to the left of the web address.

Suggestions for Auto-Completed Searches: When you search for something in a search bar, you may receive suggestions that include a website’s favicon. This assists you in selecting the brand or company you want because you are more likely to recognize a logo or color scheme than the company name.

Among the Search Results: There are times when you will see favicons in search results. When you go to Google News, for example, favicons are displayed within the search results so that readers can quickly and easily identify which news source the results are from.

Browser History: Another place you’ll see favicons is in your browser history, which is useful because it often contains a long list of sites you’ve visited. You should be able to quickly identify a website or article that you’d like to return to.

How to add favicon in HTML

You can edit your website’s HTML page to make it easier for older browsers to find your favicon image.

Most modern browsers will find your favicon file without any additional code, but to ensure that all browsers display it correctly, add the following to your header, within your page’s tags.

<link rel=”icon” type=”image/x-icon” href=”http://example.com/favicon.ico” />

If you’re using WordPress, you can do this through the Customizer or a plugin called All In One Favicon. The alternative way is to add it manually by taking the following steps:

1. Log into your FTP manager (ftp://username@yoursite.com)
2. Upload the.ico file to your website’s root directory.(/wp-content/themes/your-theme-folder)
3. Open the function.php or header.php file and place the following code below the header tag: <link rel=”shortcut icon” type=”image/x-icon” href=”http://yourwebsitename.com/favicon.ico”>>

The URL after href= should be replaced with the path to your icon.

Favicon sizes + dimensions explained

At one point, all favicons were 16-pixel squares. With more high-definition retina screens and shortcut icons to consider, that is no longer the case.

HTML 5 includes favicon standards in different sizes for a wide range of applications, from tiny browser icons to computer docking station icons to home screen icons. You don’t even need that 16-pixel square any longer.

Dimensions/Sizes and applications of modern favicons:

• 32×32: Standard for most desktop browsers (replaces 16×16)
• 128×128: Chrome store and small Windows 8 start screen icon
• 152×152: iPad touch icon
• 167×167: iPad Retina touch icon
• 180×180: iPhone Retina icon
• 192×192: Google Developer web app recommendation
• 196×196: Android home screen icon

Create Your Own Favicon

Hopefully, this article has given you a better understanding of favicons.

Favicons may not be the most important branding element of your website, but they are simple to create and provide a variety of benefits. This small graphic represents your company when there isn’t enough room for your logo or headline. Furthermore, it provides your site with the extra edge it requires to stand out in a crowded browser window.

At Loganix, we understand, your favicon is a minor detail that can have a significant impact on the public perception of your site and brand, their recognition, and even the volume of search traffic it receives, so don’t overlook it.

Need any help with your SEO or with creating a favicon?

We’ll handle the time-consuming and labor-intensive on-site optimization, link building, copywriting, and technical SEO work so you can focus on expanding your business.