Best Practices for Favicons: Sizes, Formats, and Updates.

Today favicons play an important role in branding by helping users quickly identify a website in their browser's address bar. They also help users locate a website when they are looking through their bookmark list. For mobile users, favicons can be helpful in identifying a website on their home screen.

In short, favicons are an important part of brand consistency and help users navigate the web.

Where are favicons displayed

Favicons are displayed in multiple places in your browser, some of the common ones: 

Browser tabs - Favicons identify your site in a tabbed browser and can help users locate your site more easily. In addition to the visual benefit, favicons also improve a site's usability. For example, if a user has several tabs open and your favicon is distinctive, they will be able to find your site more easily.

Bookmarks - When a user bookmarks your website, at a later point when they decide to return to the site, the favicon will make it easier for them to recognize it. This increases the chances of a visitor clicking on your website.

Bookmarks bar - In Chrome, the easiest way to open a bookmark is to click on it in the Bookmarks bar. Users who have lots of bookmarks will delete the names of the bookmarks leaving only the icon. 

Search Engine Results - Favicons can also be added to search engine results to help identify branding to your website. Favicons have been available on mobile devices for quite a while.

Search History - Favicons are also found in Search History for easy searching.

How to create a favicon

Creating a favicon is relatively simple. You can create one from scratch using an image editor like Photoshop or Tools like Free favicon generator and Favicon.ico and & app icon generator. To make this process easy, resize a square image of a company logo. Favicons can be in png, SVG, jpg, or ico format. The most common sizes are

• 16x16px
• 32x32px
• 48x48px 
• 96x96px (Google Recommends 96x96px or higher). 
• 144x144px and so on
• SVG files do not require a specific size

Where to add a favicon to your site

Once you have your favicon, you need to upload it to your web server and then add a few lines of code to your site's HTML.

If you are using concrete cms, adding favorite icons requires no coding; simply go to your Dashboard --> System & Settings Basics --> Bookmark Icons. 

What happens if a Favicon is missing?

If a favicon is missing, the browser will default to a generic icon. This usually isn't a big deal, but it can be confusing for users if they see a bunch of different icons on their bookmark bar. A missing favicon can also make it harder to identify a site in your history or tabs. 

If your icon is missing from google search results, it might be due to Google recently updating its guidelines. Here are a few troubleshooting steps:

1. Make sure that the home page and favicon file are crawlable by google. If one of these is blocked, favicons will not show in the search. 
2. According to Google’s guidelines Favicons must be a multiple of 48px squares for example: 48x48px, 96x96px, 144x144px and so on. SVG files don't have a specific size. Any valid favicon format is supported. 
3. Make sure it isn't inappropriate; Google will replace anything they deem inappropriate.

Once you've gone ahead and checked the boxes to make your favicon searchable, request indexing of your site's homepage, Google looks for and updates favicons whenever it crawls a home page. 

There you have it: spend an afternoon tidying up your favicons once a year for consistent branding. Don't forget to add favicons to a yearly maintenance list as Google and other browsers update favicon guidelines every so often - it's worth taking a look at once a year.