Complete Guide to Favicon Icons for Browsers, iOS, and Android

A favicon is a small icon that appears on the browser tab when visiting a website. This small logo image is crucial for identifying a web page or site.

By the way, the word ‘Favicon’ itself is short for “favorite icon.”

Here’s a brief summary of the early history of favicons. If it gets too long, feel free to skip and continue scrolling below.

The first favicon was introduced by Microsoft in March 1999, along with Internet Explorer 5. Initially, Microsoft referred to bookmarks in Internet Explorer as “Favorites” and allowed websites to display custom icons if they had a favicon.ico file in their domain’s root directory. Favicons then became common across the web, with other browsers like Firefox and Safari also supporting PNG format for favicons. In 2008, Apple introduced “apple-touch-icon.png” for iOS, which paved the way for favicons of various sizes and strengthened PNG as the primary choice. As technology evolved, HTML5’s favicon standards accommodated the need for different favicon sizes, especially for high-resolution screens and mobile devices. Today, custom favicons are used on various platforms, from Google TV to Microsoft’s Metro Windows tiles.

That’s the interesting evolution of favicons. They now play an increasingly important role in website identification and branding. However, this often leaves web developers uncertain about the right size and ideal favicon format for their web projects.

Here’s some in-depth information about Favicons that might be useful for your website development:

Favicon Sizes

The standard size for classic desktop browser favicons is 16x16 pixels or 32x32 pixels. This should be small enough to ensure the icon displays well on older browser tabs.

For modern browsers, including iPhone and Android devices, favicon sizes vary according to the format and display on different devices and platforms.

Here are the recommended favicon sizes for broader support on modern browsers:

16x16 Pixels => A common favicon size used by most desktop browsers. This covers most desktop browser tabs.
32x32 Pixels => This size is the same as 16x16 pixels but with higher resolution. It can provide sharper visuals on Retina or high-resolution devices.
64x64 Pixels => Some browsers and platforms might use larger favicon sizes, such as 64x64 pixels, for clearer icons on high-resolution devices.
128x128 Pixels => This size is used by some platforms and larger displays, like search results for websites or on Android home screens.
192x192 Pixels (for Android) => This is the recommended favicon size for Android devices. Favicons of this size are used in home screen app icons and multitasking screens on Android devices.

Favicon Sizes Based on Platform Intent

For Desktop Browsers:

16x16px and 32x32px => Standard favicon sizes that appear on browser tabs.

For Android:

192x192px => Icon on the home screen.
512x512 pixels => High-resolution icon on the home screen.

For iOS:

57x57px => App icon on the home screen for iPhone 5 and below.
60x60px => App icon on the home screen for iPhone 6 and 6 Plus.
76x76px => App icon on the home screen for iPad Mini and iPad Air.
114x114px => App icon on the home screen for older Retina iPhones.
120x120px => App icon on the home screen for Retina iPhones.
152x152px => App icon on the home screen for iPad.
180x180px => App icon on the home screen.

Favicon Sizes for PWA (Progressive Web App) Format

Favicon => Icon that appears on the browser tab. The most common sizes are 16x16 pixels or 32x32 pixels.
App Icon => This icon is used when users add your PWA to their home screen. Common sizes are 192x192 pixels for Android and 180x180 pixels for iOS.
Icon for iOS Home Screen => For iOS support, include additional icons with appropriate sizes for iPhone and iPad home screens, such as 57x57 pixels, 60x60 pixels, 72x72 pixels, 76x76 pixels, 114x114 pixels, 120x120 pixels, 144x144 pixels, and 152x152 pixels.
High-Resolution Icon => This size is used when users add the PWA to their Android home screen. A common size is 512x512 pixels.
Icon for Windows => If you want to support PWA format on Windows, include specific Windows icons with sizes like 70x70 pixels, 150x150 pixels, and 310x310 pixels.
Maskable Icon => This is an icon optimized for various shapes and home screen themes. It’s necessary for some platforms, especially Android. Maskable icons should have the same size or larger than 192x192 pixels and should have a transparent background.

Favicon Format

The .ico format is the most commonly used format since classic desktop browsers. While all modern browsers support the .ico format, the .png format may be preferred.

Other graphic formats like .jpg or .gif can also be used. Modern browsers also support the .svg format for favicons.

I personally favor the .svg format for favicons. Some web developers prefer .png or .ico formats because of mature browser support. Ideally, you should include multiple favicon formats, including SVG, to ensure consistent appearance across various browsers.

How to Place Favicon in HTML

Favicons are typically placed in the root directory of a web page. They are included in your HTML document using tags like this:

<link rel="icon" type="image/x-icon" href="favicon.ico">

<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">

<link rel="icon" type="image/png" sizes="64x64" href="favicon-64x64.png">

The three lines of code above are the minimum-maximum standard for calling the recommended favicon image files that work across various platforms, including iOS and Android devices.

Now, for web developers or project managers who are meticulous (obsessive-compulsive disorder or OCD), here’s a complete list of favicons that can be included:

<!-- Favicon for desktop browsers -->
<link rel="icon" type="image/x-icon" href="favicon.ico">

<!-- Favicon for desktop browsers with a size of 16x16 pixels -->
<link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">

<!-- Favicon for desktop browsers with a size of 32x32 pixels -->
<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">

<!-- Favicon for iOS devices -->
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">

<!-- Favicon for iOS devices with Retina display -->
<link rel="apple-touch-icon" sizes="152x152" href="apple-touch-icon-152x152.png">

<!-- Favicon for iOS devices with Retina display and earlier iPhones -->
<link rel="apple-touch-icon" sizes="120x120" href="apple-touch-icon-120x120.png">

<!-- Favicon for iOS devices with Retina display and iPad Mini -->
<link rel="apple-touch-icon" sizes="76x76" href="apple-touch-icon-76x76.png">

<!-- Favicon for iOS devices with Retina display and iPhone 6/6 Plus -->
<link rel="apple-touch-icon" sizes="60x60" href="apple-touch-icon-60x60.png">

<!-- Favicon for iOS devices with Retina display and earlier iPhones -->
<link rel="apple-touch-icon" sizes="57x57" href="apple-touch-icon-57x57.png">

<!-- Favicon for iOS devices with Retina display and earlier iPhones -->
<link rel="apple-touch-icon" sizes="114x114" href="apple-touch-icon-114x114.png">

<!-- Favicon for Android devices -->
<link rel="icon" type="image/png" sizes="192x192" href="android-icon.png">

<!-- Favicon for Android devices (high-resolution icon) -->
<link rel="icon" type="image/png" sizes="512x512" href="android-icon-512x512.png">

These favicon sizes are still relevant and in line with recommendations to support various platforms, including iOS and Android devices.

Conclusion

The number of favicons required for a web page varies depending on the targeted platform and desired browser support. Ideally, you should include several variations of favicon sizes, app icons, and high-resolution icons to ensure a good appearance on various devices and platforms.

That’s it. Hope it’s helpful.