A favicon is the small icon that appears in browser tabs, bookmarks, home screens, and app launchers. Get it right and it's invisible — your brand just works everywhere. Get it wrong and you get a broken image icon on an iPhone home screen, a blurry stretched logo in Windows taskbar, or a missing icon in Android Chrome.
Here's the complete breakdown of every size, every platform, and exactly what HTML to add to your <head>.
Why One Size Isn't Enough
Different platforms request different sizes at different pixel densities:
- A standard browser tab requests
16×16 - A Retina display browser tab requests
32×32 - An iPhone home screen (non-retina) needs
57×57or60×60 - An iPhone 6+ home screen needs
120×120 - An iPad Pro home screen needs
167×167 - The Apple standard (iOS 8+) is
180×180 - Android Chrome PWA requires
192×192and512×512 - Windows pinned site tiles want
144×144
If you only provide favicon.ico, most of these fall back to upscaling your 16px image — which looks terrible at 180px.
The Complete Size Reference
Browser Favicons
| Size | File | Usage |
|---|---|---|
| 16×16 | favicon-16x16.png | Standard browser tab |
| 32×32 | favicon-32x32.png | Retina browser tab, Windows taskbar shortcut |
| 48×48 | favicon-48x48.png | Windows site icons |
| 96×96 | favicon-96x96.png | Google TV, Chrome Web Store |
| 128×128 | favicon-128x128.png | Chrome Web Store |
| 256×256 | favicon-256x256.png | Windows taskbar (high DPI) |
Apple Touch Icons (iOS / iPadOS / macOS)
When a user adds your site to their iPhone or iPad home screen, iOS uses the apple-touch-icon. Without it, iOS takes a screenshot of your page — which looks terrible.
| Size | File | Device |
|---|---|---|
| 57×57 | apple-touch-icon-57x57.png | iPhone (legacy, non-retina) |
| 60×60 | apple-touch-icon-60x60.png | iPhone (iOS 7, legacy) |
| 72×72 | apple-touch-icon-72x72.png | iPad (legacy) |
| 76×76 | apple-touch-icon-76x76.png | iPad (non-retina) |
| 114×114 | apple-touch-icon-114x114.png | iPhone retina (legacy) |
| 120×120 | apple-touch-icon-120x120.png | iPhone retina (iOS 7+) |
| 152×152 | apple-touch-icon-152x152.png | iPad retina |
| 167×167 | apple-touch-icon-167x167.png | iPad Pro |
| 180×180 | apple-touch-icon.png | iPhone 6+, primary Apple touch icon |
The most important is 180×180 as apple-touch-icon.png (no size suffix) — modern iOS will find and use this for all devices.
Android & PWA Icons
| Size | File | Usage |
|---|---|---|
| 192×192 | android-chrome-192x192.png | Android Chrome home screen |
| 512×512 | android-chrome-512x512.png | PWA splash screen, Play Store listing |
These are also referenced in your manifest.json for Progressive Web Apps:
{
"name": "Your App",
"icons": [
{ "src": "/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png" }
]
}
Windows / Microsoft
| Size | File | Usage |
|---|---|---|
| 144×144 | mstile-144x144.png | IE11 pinned site, Windows 8 Start tile |
favicon.ico — Still Required
Despite being a format from 1999, favicon.ico is still the most universally supported favicon format. It should be a multi-size ICO file containing both 16×16 and 32×32 PNG images packed together. Browsers request favicon.ico automatically from your domain root — even without any <link> tag pointing to it.
A single-size ICO works but a multi-size ICO handles both standard and retina displays correctly.
Place it at exactly: https://yourdomain.com/favicon.ico
The HTML You Need
Paste this into your <head>:
<!-- Standard favicons -->
<link rel="icon" type="image/x-icon" href="/favicon.ico" />
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png" />
<!-- Apple Touch Icons -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png" />
<link rel="apple-touch-icon" sizes="167x167" href="/apple-touch-icon-167x167.png" />
<!-- Android / PWA -->
<link rel="icon" type="image/png" sizes="192x192" href="/android-chrome-192x192.png" />
<link rel="icon" type="image/png" sizes="512x512" href="/android-chrome-512x512.png" />
<!-- Windows -->
<meta name="msapplication-TileColor" content="#ffffff" />
<meta name="msapplication-TileImage" content="/mstile-144x144.png" />
<meta name="theme-color" content="#ffffff" />
Next.js (App Router)
// src/app/layout.tsx
export const metadata: Metadata = {
icons: {
icon: [
{ url: "/favicon-16x16.png", sizes: "16x16", type: "image/png" },
{ url: "/favicon-32x32.png", sizes: "32x32", type: "image/png" },
],
apple: [
{ url: "/apple-touch-icon.png", sizes: "180x180" },
],
},
};
What Makes a Good Favicon
Design for 16×16 first. At 16 pixels, complex logos become unreadable. A lettermark (first letter of your brand) or a simplified symbol works far better than a full logo. Test your favicon at actual 16px size before generating — zoom out until your browser tab icon is the right size.
High contrast. The favicon appears on both light and dark browser themes. Test your icon on white backgrounds (light theme) and dark grey backgrounds (dark theme). Pure black or pure white icons often disappear on one or the other.
Start with SVG or a large PNG. The source image should be at least 512×512px for downscaling to look sharp. SVG is ideal — it's infinitely scalable with no quality loss.
Transparent background vs solid. Transparent backgrounds work well for browser tabs (they blend with the tab color). For Apple touch icons, iOS automatically adds rounded corners and a gloss effect — a transparent background can look odd. Consider adding a solid background for the Apple touch icon sizes.
Square aspect ratio. Favicons must be square. If your logo is wide (e.g. 3:1 ratio), crop it to the icon mark only, not the full lockup.
Where to Place the Files
All favicon files go in your public root — /public/ in Next.js, /static/ in Gatsby, or directly in the webroot for plain HTML sites. They should be accessible at yourdomain.com/favicon-16x16.png (not /assets/favicons/favicon-16x16.png).
The exception: the <link> tags in your HTML can point anywhere. But favicon.ico is always fetched from the root automatically by browsers, so it must live at /favicon.ico.
Generate All Sizes in One Click
Our Favicon Generator takes any image — SVG, PNG, JPG, or WebP — and generates all 18 sizes simultaneously. Add a background color (solid, rounded, or circle), control padding, preview at all sizes including a browser tab mock and iOS home screen simulation, then download each file individually or all at once. The HTML <head> snippet is generated automatically — copy and paste it directly into your layout.
Everything runs in your browser. No image data is uploaded to any server.