Favicons SEO Benefits: What Is, Why Is It Important, & How To Create & Add One?

Learn the SEO benefits of favicons in addition to an explanation of what is, why it is essential, how to create & add a favicon to your site

Updated on September 14, 2022
Favicons SEO Benefits: What Is, Why Is It Important, & How To Create & Add One?

 With favicons, you seem to have a higher advantage over websites that do not when saving and keeping a website bookmark on the browser. Search engines such as Google has the Chrome browser for users through which they also deduct specific search ranking signals for sites. Keep reading to learn the SEO benefits of favicons in addition to an explanation of what is, why it is essential, and how to create + add a favicon to your site.

Those used to tabbed browsing know why favicons are essential. Your site will stand out from the rest if your favicon is recognizable. After all, a picture says more than a thousand words. I often find myself pinning websites in Google Chrome, my browser. As a to-do list, or simply because I want Gmail at hand anytime. Or that specific spreadsheet in Sheets. Or Facebook. That little favicon is the only reference to what site is hidden in that tab. You simply need a good favicon for your website.

What Is a Favicon?

For those who don’t know what a favicon is, a favicon is a 16×16 pixel icon that usually contains a logo, a brand’s initials, or a generic image representing the type of business. These files are placed in a file called favicon.ico and in the website’s root directory.

This file was first supported in Microsoft Internet Explorer 5, released in March 1999. It is represented as a “link symbol” in the actual element of the code placed in the “a” section. In December 1999, the World Wide Web Consortium (W3C) standardized favicons using Hypertext Markup Language (HTML) recommendations. Read on to learn more about the history of favicons.

It should only appear on bookmarked URLs. However, there are now many situations where favicons appear. They are accommodating for branding and usability in a number of ways.

They also appear in the browser’s list of bookmarked URLs. When browsing Google Chrome’s history section, only the little colorful icons make it easier to find links. See the screenshot below: Some search engines (besides Google) also integrate favicons into desktop search results. See the example below, taken from the search results of the DuckDuckgo search engine. Bing is testing the use of favicons in its search results as extra SEO benefits.

Google used to show the favicon in Google ads, but it doesn’t anymore. But Google Adsense is reportedly working on bringing favicons back to new ad formats in the future. If your business website has an icon that is not easy to forget, you have already branded your website with this tiny graphic. Even in the WooRank Site Review Report, we can’t stress enough how important a favicon is to your website.

Why it’s important, why use one?

Branding: Make users remember your site

A favicon is like a small ID for your website. As mentioned in the opening paragraph, they help users remember your website when browsing multiple URLs. Whether browsing history, search results in Duckduckgo, or a list of bookmarks in your browser, favicons help users quickly identify and access your website. This is simply because graphics are more eye-catching than text, so you should create and use a favicon.

Building brand awareness is essential for SEO, not just general digital marketing. For example, if you’re doing SEO for a pharmaceutical company, the website’s icon will help searchers identify the website in the search results.

Branding Make users remember your site favicon why use visualmodo

Make people trust your site

If your website does not have a favicon, your web browser will display a default blank document in the browser tab. Even worse, you’ll lose credibility and trust if it appears next to a competitor’s website.

Users tend to judge online retailers and services based on the professionalism of their website. Something as careless as not having a favicon can easily lead to loss of credibility, especially when users compare you to your competitors. See the example below. Do you prefer to buy Southwest Airlines tickets from the first two tabs or the website in the last tab?

Come back to your page

Let’s say your website visitor is in a hurry the first time they visit your website and decides to mark them for revisiting. It is now known that people respond better to images than to text. Suppose they eventually decide to review your site and do so via bookmarks. If you have a recognizable favicon like Google, you’re in luck. You might even be removed from your bookmarked sites list if you don’t have a favicon.

Buy your site visitor some time

A favicon saves the user time in identifying a website by bookmarking it.

Make your favicons stand out and gain the SEO benefits

Favicons: SEO Benefits
Favicons: SEO Benefits

You should ensure your favicon stands out from that long list of tabs. Check if it matches your logo and website well. Especially when you are not one of the big brands, you want people to recognize your favicon. Two tips directly related to that are:

  • avoid too many details in your favicon before create and use it,
  • and please use the right colors so the favicon doesn’t blend in with the grey of your browser tab.

Both are closely related to branding. Your brand should be recognizable in your favicon. Although we’re able to use more colors and more depth in our favicons nowadays, the fact is that the space available on that browser still hasn’t improved from the small 16×16 pixels it used to be in the early days.

It doesn’t look like 16×16 pixels anymore, but that’s because we have better screens, not because that space increased. The main improvement is that the lines are sharper, and you can use all the colors you want.

Proper branding ensures people will immediately relate your favicon to your website. I listed a number of favicons for you to test. Drop me a line in the comments about what favicon belongs to what brand:

Too easy? In that case, these brands did an excellent job of translating their brand to their favicon, try to create and use one like this.

SEO benefits of favicons

NASA browser tab showing the icon in the tab
Brand icon Branding Usage

Are there real SEO benefits to favicons? Tough one. Besides branding, probably not, though opinions may differ on this a bit. One might argue that you can now add an image of 1MB as a favicon and that this will slow down loading times. You could say that a good favicon highlights a bookmark and might increase return visitors. I have even found a story where someone stated that some browsers automatically look for a favicon and return a 404 if it’s not there.

My 2 cents? If there is an SEO benefit, it’s so tiny that all other optimization, like proper site structure or excellent copy, should always have priority. Does that mean you don’t need that favicon? Hey, didn’t you read that part about browser tabs? You do need it, even if it’s just to stand out.

History and other locations where browsers place this icon for quick identification. It just makes life easier for the average user.

Improve website visibility: The usability of a website is associated with higher search engine rankings. So if the icons next to your website title, like browser tabs, bookmarks, historical archives, etc., can help users save time and quickly identify and search your website, they can play a relatively small but significant role in SEO.

Bookmarks: Using favicons, you seem to have an advantage over other sites when it comes to saving and saving site bookmarks in your browser. Search engines like Google provide users with the Chrome browser to obtain specific search ranking signals for bookmarked sites. If you don’t have a favicon on your site, you may lose your chance of appearing in your Chrome browser bookmarks list, indirectly losing a small but essential search ranking signal.

How do I create a favicon to use on my website?

Many more tool options help you create a favicon for your website in minutes. You can try all these tools for free.

RealFaviconGenerator

With Realfavicon Generator, you can create favicons for desktop and Mac browsers, iPhone/iPad, Android devices, Windows 8 tablets, and more. The tool offers a wide range of browser-compatible favicons, as evidenced by the extensive list of tested icon versions created with the agency. Additionally, the tool provides you with a brief report of your existing favicons for free. You can check the compatibility of existing icons on different devices and browsers. Below is a sample screenshot of the information.

Dynamic Drive Favicon Generator

This tool can create icons in .ico, .png, and .gif formats. This tool allows you to add transparency to icons (.gif and .pnf formats only). The site also offers additional free tools like an animated GIF generator, which can come in handy if you want to have an animated GIF icon for your website’s favicon.

DeGraeve

This is another fast online favicon generator that gives you various customization options. The tool also supports alpha transparency. The site also provides many other tools unrelated to favicon generation. Similar devices for creating favicons online are listed below.

  • Favicon.cc
  • Favicon From Pics
  • Favicon Generator
  • ProDraw
  • Iconifier
  • Favicon-Generator
  • ConvertIcon
  • Generator by RedKetchup
  • Websiteplanet maker
  • Zyro icon builder

How do I add to my page?

WordPress just made your day: Brand icons in the Customizer

If you use WordPress, you might already know that there’s been a favicon functionality in WordPress core since version 4.3. So you can utilize this default functionality without hassle. It’s located in the Customizer and is called Site Icon. WordPress recommends using this option to add a favicon.

You don’t even need to create a favicon. Icon file, like you used to, years ago. Use a square image, preferably at least 512 pixels wide and tall. That seems to contradict the recommendation to keep it as small as possible. But if you optimize your image, it won’t slow down your site 🙂

The WordPress Codex provides more information on how to do this in WordPress. Go read and add a nice favicon to your site!

Is favicon not showing up in Google Search? Here are Google’s guidelines:

Even if you follow the correct steps, not all favicons will appear in search results. According to Google, displaying favicons on the SERPs is at its discretion. In most cases, following these guidelines will automatically make your site favicon compliant.

  1. Favicon files and homepages must be indexable by Google crawlers.
  2. It must be unique to your brand and should help users identify your website.
  3. You can use square icons of size 48x48px, 96x96px, 144x144px, etc. Remember that Google does not recommend 16×16 icons, probably due to the low resolution. However, it will resize all high-resolution icons to 16×16 while displaying them on the search results page.
  4. The favicon URL doesn’t need to change frequently.
  5. Google will not display inappropriate favicons, including pornographic or hate symbols. Such icons will be replaced with the default icons.

Last words

Favicons are like those little details that we don’t usually pay too much attention to. However, the reality is far from meaningless, and they are an essential part of the web, both from a user interface and a branding perspective. Some people claim that the big thing is a small size.