A comprehensive guide to creating, sizing, and deploying favicons across all browsers, devices, and platforms — from legacy ICO to modern SVG and PWA icons.
A favicon (short for "favorites icon") is the small image that appears in a browser's tab, bookmark list, history, and sometimes on the home screen of a mobile device. It's one of the smallest but most frequently seen elements of your website's brand identity. Users who have multiple tabs open rely on favicons to quickly identify which tab belongs to which site. A missing or broken favicon looks unprofessional, and a well-designed one reinforces your brand at every glance.
Beyond aesthetics, favicons affect user experience in measurable ways. Studies show that tabs with favicons are identified 30–40% faster than those without. They also appear in browser bookmarks, saved reading lists, and even search engine results on mobile. In short, a favicon is not optional — it's a fundamental part of any website.
The challenge with favicons is that different browsers, operating systems, and contexts require different sizes. There's no single "one size fits all" solution, but you can cover nearly every use case with a manageable set of files.
The ICO format has been the standard since Internet Explorer first introduced favicons in 1999. An ICO file can contain multiple sizes in a single file, which is why it's still widely used. A single favicon.ico with 16×16 and 32×32 embedded inside covers the basic browser tab requirement.
<link rel="icon" href="/favicon.ico" sizes="32x32">
PNG is now supported by all modern browsers as a favicon format. It offers better compression than ICO for complex images and supports transparency. You can specify exact sizes:
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
SVG favicons are the modern standard. Because they're vector-based, a single SVG file looks sharp at any size. Browser support for SVG favicons has been available since Chrome 80, Firefox 41, Safari 16.4, and Edge 80.
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
Some modern browsers support WebP and AVIF favicons, offering even better compression than PNG. However, support is inconsistent, so always provide PNG or ICO as a fallback if you use these formats.
Start with a simple, recognizable design. At 16×16 pixels, you have very limited space — think of your favicon as a logo, not an illustration. Stick to 1–2 colors and avoid fine details, text smaller than 8px, or complex gradients that won't be visible at small sizes.
Design at a large canvas (512×512 or larger) first, then scale down. This ensures your design looks clean when resized. Common approaches include:
From your master design, export the following files:
Place these tags in the <head> section of your HTML:
<!-- SVG favicon (modern browsers) --> <link rel="icon" type="image/svg+xml" href="/favicon.svg"> <!-- PNG fallbacks --> <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"> <!-- ICO fallback (legacy) --> <link rel="icon" href="/favicon.ico" sizes="any"> <!-- Apple Touch Icon --> <link rel="apple-touch-icon" href="/apple-touch-icon.png"> <!-- Web Manifest --> <link rel="manifest" href="/site.webmanifest">
If you want your site to be installable as a Progressive Web App, create a site.webmanifest file:
{
"name": "Your Website Name",
"short_name": "ShortName",
"icons": [
{
"src": "/android-chrome-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/android-chrome-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"theme_color": "#8b5cf6",
"background_color": "#0f1117",
"display": "standalone"
}
JPEG doesn't support transparency. If your favicon has a background that doesn't match the browser's tab color, it'll look like a colored square with your logo floating inside. Always use PNG, SVG, or ICO for favicons.
If you only include a standard favicon, iOS users who bookmark your site to their home screen will see a screenshot of your page instead of a clean icon. The Apple Touch Icon (180×180 PNG) prevents this.
Each browser handles favicons slightly differently. Chrome caches favicons aggressively, so you may need to clear your cache or visit chrome://favicon/https://yoursite.com to verify changes. Safari and Firefox have their own caching behaviors.
At 16×16 pixels, you have 256 pixels total. Thin lines, small text, and subtle gradients disappear entirely. Test your design at actual favicon size before finalizing it.
site.webmanifestWithout a web manifest, your site can't be added to the Android home screen with a proper icon. If you're building any kind of web app, this file is essential.
Modern browsers and operating systems support both light and dark modes, and your favicon should adapt. The media attribute on the <link> tag allows you to specify different favicons for each mode:
<link rel="icon" href="/favicon-dark.svg" media="(prefers-color-scheme: dark)"> <link rel="icon" href="/favicon-light.svg" media="(prefers-color-scheme: light)">
If your favicon uses a simple color scheme, one well-designed SVG that works on both dark and light backgrounds is often sufficient. Test your icon on white, light gray, dark gray, and near-black backgrounds to be sure.
Manually creating every size and format is tedious. A favicon generator automates the process: you upload a single image, and the tool outputs all the sizes, formats, and HTML code you need. When choosing a generator, look for one that:
site.webmanifest fileWhile favicons don't directly affect search rankings, they influence click-through rates in search results. Google displays favicons next to page titles on mobile search results, and a clean, recognizable icon can increase trust and visibility. Sites with missing or generic favicons look less credible next to competitors with polished branding.
Additionally, favicons reduce bounce rate. When users have multiple tabs open, a recognizable favicon helps them return to your site instead of closing the wrong tab. This small detail compounds into meaningful engagement improvements over time.
A favicon might be the smallest graphic on your website, but it carries outsized importance for branding, usability, and trust. By creating your favicon in SVG with PNG fallbacks, including Apple Touch and Android icons, and properly configuring your HTML and web manifest, you ensure your brand looks professional everywhere your site appears — from browser tabs to home screens to search results. It's a small investment of time that pays dividends every time someone visits your site.