How to Create and Use Favicons for Modern Websites
A complete reference to modern browser favicon specifications. Avoid dozens of redundant image files and implement the lean, high-resolution favicon setup recommended for modern web standards.
The Evolution of Favicons
Historically, browsers required a single favicon.ico file at the root of a domain. With the explosion of high-DPI smartphone screens, iPad home screen bookmarks, Windows live tiles, and Android WebAPK installations, developers were instructed to generate up to 20 different icon sizes.
Today, modern browsers and operating systems have standardized on a much cleaner, streamlined set of high-resolution PNGs and vector SVGs.
The Modern Standard Icon Suite
- 32x32 PNG: Standard desktop browser tab icon (and 16x16 fallback).
- 48x48 PNG: High-resolution desktop tab and bookmark displays.
- 180x180 PNG: Apple Touch Icon for iOS home screen bookmarks.
- 192x192 PNG: Android Chrome home screen launcher icon.
- 512x512 PNG: Progressive Web App (PWA) splash screen display icon.
Essential HTML <head> Markup
Paste the following minimal, modern tag set into your site's <head>:
<!-- Standard Favicon -->
<link rel="icon" type="image/png" sizes="32x32" href="../favicon-32x32.png" />
<!-- Apple Touch Icon -->
<link rel="apple-touch-icon" sizes="180x180" href="../apple-touch-icon.png" />
<!-- Web App Manifest (for Android & PWAs) -->
<link rel="manifest" href="../site.webmanifest" />Frequently Asked Questions
Placing a generic favicon.ico file in your root folder is still good practice to prevent 404 errors in legacy search crawlers and very old browser versions, but modern browsers prioritize the PNG link tags declared in your HTML.
Desktop tab favicons work best with transparent backgrounds so they blend with light and dark browser chrome. However, Apple Touch icons should generally feature a solid background since iOS automatically renders transparent areas as black.