Media Pulse

View Original

Favicon 101

Favicon, have you heard that word before?

Usually, the answer I get back is a bit of confusion, a puzzled glance over our Google Meet, or a need to explain further. I promise, you have seen a favicon many times!

The Hair Antidote, Resolve Mediation, Instagram, Vulcan Painters, Google

Look familiar? Certainly, if you use Google Chrome. These tiny graphics, 16x16 pixels, are not only crucial to branding your website, but it also has an important role to play in SEO (search engine optimization). The favicon is a tiny file placed in the root of your website directory; the file is referred to favicon.ico. The use of the favicon has changed over time, with this image being used in many more places that your website users see.

It was Microsoft's Internet Explorer 5 released in March 1999 that first supported this file. It was denoted as 'shortcut icon' in the rel element of the code that was placed in the section a site. In December 1999, the favicon was standardized by the World Wide Web Consortium (W3C) with the recommendation of Hypertext Markup Language (HTML).

Favicons are first and foremost an essential part of your branding. Most browsers show a favicon listed with your favorite items. Next time you open your phone browser, look at your favorite sites to see a list of favicons.

Favicons are important to your overall brand identity, helps to build trust, and aids in users easily accessing your site. Having a favicon will also help with SEO by increasing elements to your website for branding.

Additionally, Google search results will show your favicon next to your website in search results. To be eligible for this feature, Google states:

You must follow these guidelines to be eligible for a favicon next to your search results. Note that a favicon isn't guaranteed in search results even if all guidelines are met.

Both the favicon file and the home page must be crawlable by Google (that is, they cannot be blocked to Google).

  • Your favicon should be a visual representation of your website's brand, in order to help users quickly identify your site when they scan through search results.

  • Your favicon should be a multiple of 48px square, for example: 48x48px, 96x96px, 144x144px and so on. SVG files, of course, do not have a specific size. Any valid favicon format is supported. Google will rescale your image to 16x16px for use in search results, so make sure that it looks good at that resolution. Note: do not provide a 16x16px favicon.

  • The favicon URL should be stable (don't change the URL frequently).

  • Google will not show any favicon that it deems inappropriate, including pornography or hate symbols (for example, swastikas). If this type of imagery is discovered within a favicon, Google will replace it with a default icon.

See this content in the original post

Credit: HeyTuts


The easiest way to upload your favicon is to use the built-in favicon tool. If you are unable to access this feature on your CMS or need some help, you can shoot us a message and we will gladly help out!


See this form in the original post