Favicons: Sizes, Formats, and Updates.

Favicons: Sizes, Formats, and Updates.

Jan 1, 2024
by jessicadunbar

What Is a Favicon?

Favicon stands for "Favorite Icon," and it's a small image that displays next to the URL of your site in a browser's address bar, among other places like bookmarks and shortcuts on a mobile phone. But it's not just any image; it's a branding powerhouse in pixel form. Favicons play a crucial role in helping users quickly identify your website amidst a sea of tabs or a long list of bookmarks. For mobile users, a favicon can be a beacon of familiarity on their home screen. In essence, favicons are all about brand consistency and smooth navigation on the web.

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 make their appearance in various places across your browser:

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.

Browser Tabs Displaying Favicons In Google ChromeBookmarks 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. 

Icon only bookmarks Google ChromeSearch History - Favicons are also found in Search History for easy searching.

Search History - Favicons.png

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.

Bookmark list

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.

Favorite Icons Displaying in Search Results

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  and Favicon.ico and & app icon generator.

How to Create a Favicon

Feeling creative? Crafting a favicon can be straightforward:

  • Use an image editor like Photoshop or handy online tools like Free favicon generator.
  • Resize a square image, preferably your company logo, to common favicon sizes like 16x16px, 32x32px, 48x48px, or Google's recommended 96x96px and beyond.
  • Favicons can be in PNG, SVG, JPG, or ICO format, with SVGs being size-flexible.

Creating a favicon involves selecting the right size and format to ensure it looks sharp across all platforms where it might appear. Here's a table that outlines the most common sizes and formats for favicons, which can help you decide which ones to create for your website.

Size (px) Format Common Use Case
16x16 PNG, ICO, SVG Classic size for browser tabs, bookmarks. Ideal for simple icons due to the small canvas.
32x32 PNG, ICO, SVG High-resolution displays; can be used for browser tabs and bookmarks for added clarity.
48x48 PNG, ICO, SVG Optional size, used for additional clarity on various platforms.
96x96 PNG, ICO, SVG Recommended by Google for higher resolution displays. Can be used in browser tabs, bookmarks.
144x144 PNG, ICO, SVG High DPI screens like Retina displays; often used for Apple touch icons.
SVG SVG Scalable Vector Graphics format; size-flexible, ensuring crisp and clear display on all screens.

Key Points:

  • PNG is widely supported and allows for transparent backgrounds, making it a versatile choice for favicons.
  • ICO format can contain multiple sizes within one file, ensuring compatibility across different platforms.
  • SVG favicons are scalable and look sharp on any display, but ensure your website and user browsers support SVG images properly.

When creating favicons, consider making multiple sizes to accommodate various devices and resolutions. Additionally, utilizing SVG for its scalability can save you a lot of hassle by having a single file that looks great everywhere, assuming it's supported where you need it.

Where to Add a Favicon to Your Site

Once your favicon is ready, upload it to your web server. Then, it's a matter of adding a few lines of HTML code to your site. Some platforms, like Concrete CMS, simplify this process, letting you add a favicon without touching a line of code.

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

Bookmark IconsWhat 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.