When they were originally introduced, the favicon designated an image to be displayed when users saved a URL shortcut on their desktop. Today, your website favicon may be displayed in browser tabs, email clients, social media shares, and search results.

A favicon is now a necessary branding element of every website but are often overlooked… they shouldn’t be. Favicons are typically displayed in various places within web browsers to help users identify and bookmark websites. Here are some key points about favicons:

• Browser Tabs: When users open a website in a web browser, the favicon is displayed in the browser tab next to the page title. This provides a visual identifier for the open tab, making it easier for users to find and switch between multiple tabs.
• Bookmarks and Favorites: When users bookmark or save a website as a favorite, the favicon is often displayed alongside the website’s name in the bookmarks or favorites menu. It helps users quickly identify and access their saved websites.
• Browser Address Bar: In some browsers, when users visit a website, the favicon is displayed in the browser’s address bar or omnibox. This adds a visual element to the website’s URL.
• Search Results: Some search engines may display favicons next to search results, helping users easily identify websites in search listings.

A favicon is a small, iconic representation of a website that enhances user experience by providing visual cues for website identification, bookmarking, and tab management within web browsers. It’s an important element of web design and branding.

Icon File Types

Originally, they required an ICO file, but have evolved with many platforms able to display PNG and SVG files. ICO files can be considered a compilation of multiple icon images into a single file. When you create an ICO file, you compile different icon images of various sizes and color depths into a single file with a specific structure. Here’s how an ICO file works:

1. Multiple Icon Images: An ICO file typically contains multiple icon images with different dimensions and color depths. These images represent the same icon but are designed to be displayed in different sizes without losing quality.
2. Icon Directory: Within the ICO file, there is an icon directory that specifies the attributes of each icon image, including its size, color depth, and location within the file.
3. Header Information: The ICO file also includes header information that provides essential details about the file, such as the number of icon images stored in the file.
4. Image Data: Each icon image in the ICO file is stored as raw image data without compression. This allows the individual icon images to be quickly accessed and displayed by software.
5. Icon Retrieval: When an application or the operating system needs to display an icon associated with a file, folder, shortcut, or application, it can retrieve the appropriate icon image from the ICO file based on the desired size and color depth.

The choice of favicon format depends on your design requirements and the level of compatibility you want to achieve. ICO is a safe choice for broader compatibility, PNG offers lossless quality and transparency, and SVG is ideal for scalability and intricate designs but requires careful consideration of browser support and fallbacks. Using a combination of formats, as shown in the following examples, can ensure maximum compatibility and quality for your website’s favicon.

How To Create An ICO File

It’s pretty weird, in my opinion, that Adobe Illustrator and Photoshop don’t build .ICO files by default (plugins are available). You can output each of the different image sizes using them, though… and then build them using any one of the following methods:

• GIMP natively supports ICO files. It’s a free, open-source platform available for all operating systems.
• ImageMagick is a free, open-source service you can load onto your PC or Mac, allowing you to combine your multiple files into an ICO file. Example command:

convert image1.png image2.png image3.png favicon.ico

• There are also online tools that can help you create an .ICO file, but you’ll want to choose carefully. Many resize a single uploaded image file and compress each poorly. Favicon.io is a free online site that allows you to upload and build your ICO file. Always use the largest file size and resolution when utilizing the platform, as it will create the smaller image sizes automatically.

You’ll want to experiment with your ICO file. Simply downsizing your logo to an icon that’s 16px square can make it indistinguishable. You’ll even see that ours isn’t our entire logo, just the M from our logo.

Check Your Website’s Favicon

Favicon HTML Best Practices

Browsers prioritize the selection of favicons based on several factors, including the format, size, and presence of specific declarations. Here’s how browsers typically prioritize and select favicons:

1. File Format Priority: Browsers usually prioritize .ico files when present, as this is the traditional favicon format. If you provide a .ico favicon using , it will often take precedence over other formats.
2. Size Priority: Browsers also consider the size attribute to select the most appropriate favicon for the context. If you specify different sizes for .png or .svg favicons, the browser will choose the one that best matches the device’s display requirements.
3. SVG “any” Size: When you use the “any” value for the sizes attribute in an SVG favicon declaration (sizes="any"), it indicates that the SVG can adapt to any size. Browsers may prioritize an SVG with “any” size to ensure it scales well to fit various screen resolutions.
4. Last Declaration Takes Precedence: If you provide multiple favicon declarations with the same format and size, the browser typically chooses the last declaration it encounters in the HTML. Therefore, the order of your elements matters. The last one found will be prioritized.
5. Fallback to Default Icon: If none of the specified favicons match the browser’s criteria or there are no favicon declarations, the browser may use a default icon (e.g., the browser’s icon) or no icon.
6. User Preferences: Some browsers allow users to set their preferences for favicons. The user’s choice may override the website’s specified favicon in such cases.

If you list an ICO favicon declaration first but want the SVG to be used as the preferred favicon, it might not always work as intended because some browsers prioritize the first valid favicon declaration they encounter. However, you can still ensure that the SVG is the preferred favicon by specifying it last and using the any size attribute.

Here’s how you can do it:

In this example, the .ico format is still included for maximum compatibility, but the SVG format is specified last with the any size attribute. This setup gives a higher preference to the SVG format while still providing the .ico format as a fallback for browsers prioritizing it. By specifying the SVG last with the any size attribute, you increase the likelihood that modern browsers will choose the SVG as the preferred favicon format, as it can adapt to various sizes.