The favicon — that tiny icon in a browser tab — is one of the smallest but most frequently seen elements of your website. Despite its size, getting it right requires handling multiple formats, sizes, and platform-specific quirks. This guide walks you through everything you need to implement favicons correctly in 2026.
What is a Favicon?
A favicon (short for "favorites icon") is a small image associated with a website. Browsers display it in the tab title, bookmarks bar, history, and recently closed tabs list. Beyond browsers, favicons also appear in operating system taskbars, mobile home screens, and search engine results pages.
The word may be small, but the ecosystem around it is surprisingly complex. A single website typically needs multiple favicon files to cover all the places where it might appear.
Required Favicon Sizes and Formats
Here's a breakdown of every favicon file you should provide:
Browser Favicons
- favicon.ico — The classic format. Place this in your site root. It should contain multiple resolutions (16x16, 32x32, 48x48) bundled into a single ICO file. This single file covers legacy browsers and serves as a fallback.
- favicon-16x16.png — Used by browsers in tabs and bookmarks.
- favicon-32x32.png — The standard size for Windows taskbar pins and most desktop browsers.
Apple Touch Icon
iOS devices use a separate apple-touch-icon when users add your site to their home screen. The recommended size is 180x180 pixels as a PNG file. Apple's rendering will handle any additional cropping or rounding.
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">PWA Manifest Icons
Progressive Web Apps require icons declared in a manifest.json file. You need at least two sizes:
- 192x192 — Used for Android home screen shortcuts and the splash screen.
- 512x512 — Required for the PWA install prompt and splash screen on some devices.
Windows Tiles
For Windows users who pin your site to Start, provide a browserconfig.xml file that points to a 70x70, 150x150, and 310x310 PNG. You can also define a tile color that fills the background behind a small icon.
SVG Favicons: The Modern Approach
Modern browsers now support SVG favicons, which offer significant advantages:
- Infinite scalability — One file works at any size without quality loss.
- Smaller file size — Simple icons compress better as SVG than as multi-resolution ICO files.
- Style customization — You can use CSS media queries inside the SVG to change colors for dark mode.
<link rel="icon" type="image/svg+xml" href="/favicon.svg">The catch is browser support. SVG favicons work in Chrome, Firefox, Safari, and Edge, but older browsers (and some niche ones) won't render them. The safest approach is to provide an SVG favicon with a PNG fallback:
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="alternate icon" href="/favicon.ico">Dark Mode SVG Favicons
You can make your favicon adapt to the user's color scheme using the prefers-color-scheme media query directly inside the SVG:
<svg xmlns="http://www.w3.org/2000/svg">
<style>
.logo { fill: #1a1d2e; }
@media (prefers-color-scheme: dark) {
.logo { fill: #e2e8f0; }
}
</style>
<rect class="logo" width="32" height="32" rx="6"/>
</svg>Implementation Checklist
Follow this checklist to ensure your favicon setup is complete:
- Create your icon design in a vector editor (Figma, Illustrator, or Inkscape).
- Export to SVG for modern browsers.
- Export PNG versions at 16x16, 32x32, 180x180, 192x192, and 512x512.
- Bundle 16x16, 32x32, and 48x48 into a single favicon.ico file.
- Add all
<link>tags to your HTML<head>. - Create a
manifest.jsonwith the 192 and 512 icons. - Create a
browserconfig.xmlfor Windows tiles. - Test across browsers, operating systems, and both light and dark modes.
Common Favicon Mistakes
- Missing the root favicon.ico — Even if you use PNG and SVG links, many browsers and services still check
/favicon.icoas a fallback. Always include it. - Using a JPEG — JPEGs don't support transparency. Always use PNG or SVG for favicons.
- Too much detail — At 16x16 pixels, fine details become unreadable. Design for the smallest size first, then scale up.
- Forgetting cache busting — After updating a favicon, browsers may cache the old version aggressively. Append a version query string like
href="/favicon.svg?v=2"to force a refresh.
Generate Your Favicon
Need to create all these sizes quickly? Use our free Favicon Generator to upload a single image and get all required sizes — ICO, PNG, SVG, and Apple Touch Icon — ready to download and deploy.