Everything about favicons — sizes, formats, ICO vs PNG, Apple Touch Icons, web manifest, and how to implement them in any framework.
⭐ Open Favicon GeneratorFree · No signup · 100% client-side · ZIP download · Web manifest included
A favicon (short for "favorite icon") is the small icon displayed in browser tabs, bookmarks bars, browser history, and search engine results. It was first introduced by Internet Explorer 5 in 1999 as a simple 16×16 favicon.ico file at the root of every website. Today, favicons serve a much broader role.
Modern favicons appear in browser tabs (16×16, 32×32), bookmarks bars, browser history, address bar suggestions, iOS home screen shortcuts (180×180), Android home screen and splash screens (192×192, 512×512), Progressive Web App install prompts, Windows Start menu tiles, and even Google Search results (where Google displays a 48×48 favicon next to every search result on mobile and desktop).
Generate favicons for every device with our free Favicon Generator — upload one image and download all sizes as a ZIP, including favicon.ico, Apple Touch Icon, Android icons, and a ready-to-paste web manifest.
The favicon ecosystem has grown significantly since the early days of a single favicon.ico. Here is the complete reference table for 2026:
| Size | Format | Purpose | Required? |
|---|---|---|---|
| 16×16 | PNG | Browser tab (standard) | ✅ Essential |
| 32×32 | PNG | Browser tab (retina), Windows taskbar | ✅ Essential |
| 48×48 | PNG/ICO | Windows taskbar (high-DPI) | ⭐ Recommended |
| 64×64 | PNG | Windows high-DPI | Optional |
| 96×96 | PNG | Google TV, some Android devices | Optional |
| 128×128 | PNG | Chrome Web Store | If applicable |
| 180×180 | PNG | Apple Touch Icon (iOS home screen) | ✅ Essential |
| 192×192 | PNG | Android Chrome, PWA icon | ✅ Essential |
| 512×512 | PNG | Android splash screen, PWA install | ✅ Essential |
| Multi-size | ICO | Legacy browser fallback | ✅ Essential |
The ICO format is a container that holds multiple bitmap images at different sizes (typically 16×16, 32×32, and 48×48) in a single file. Place it at /favicon.ico in your root directory — browsers will automatically look there. Required for legacy Internet Explorer support and as a universal fallback. Even for modern sites, maintaining a favicon.ico is best practice.
PNG is the modern standard for all size-specific favicon declarations in the HTML <link> tags. PNG supports full transparency (32-bit RGBA), uses lossless compression, and is universally supported. Use PNG for the 16×16, 32×32, 180×180, 192×192, and 512×512 sizes. Always include PNG files alongside the ICO fallback.
SVG favicons are the newest option (Chrome 80+, Firefox 41+, no Safari as of 2026). They scale to any size perfectly and can respond to CSS media queries — including prefers-color-scheme — making them ideal for dark mode support. Use SVG as a progressive enhancement on top of ICO and PNG fallbacks.
When a user taps "Add to Home Screen" in Safari on iOS, the system looks for a apple-touch-icon link in your HTML. Without it, iOS takes a low-quality screenshot of the entire page — which looks amateurish on a home screen.
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
Size: 180×180 PNG only
This is the only size required. iOS automatically scales it up or down for different device pixel densities.
Don't round your icon corners
iOS automatically applies rounded corners, a drop shadow, and a gloss effect. If you pre-round your icon, it will have a double-rounded appearance.
Avoid transparency
iOS renders transparent areas as solid black. Always use a solid background color — even if it is white — for the Apple Touch Icon.
Place in /public root
The file must be accessible at /apple-touch-icon.png (or the href path you specify). Some crawlers and apps look for it at the root even without a link tag.
The site.webmanifest file is a JSON document that tells Android Chrome (and other PWA-capable browsers) how to display your site when it is installed as a Progressive Web App — full name, icons, theme color, and display mode.
{
"name": "My Application",
"short_name": "MyApp",
"icons": [
{ "src": "/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png" }
],
"theme_color": "#ffffff",
"background_color": "#ffffff",
"display": "standalone"
}<!-- Link tag in <head> --> <link rel="manifest" href="/site.webmanifest">
Maskable icons: Android uses "adaptive icons" that can be displayed in different shapes (circle, squircle, rounded square). A maskable icon has 20% safe-zone padding around the logo so it looks correct in any shape. Add "purpose": "maskable" to the icon entry in your manifest to signal this. Our Favicon Generator generates standard icons — for maskable icons, ensure your design has sufficient padding around the central logo.
Place all favicon files in the root directory (same folder as index.html) and add these link tags in your <head>:
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"> <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"> <link rel="icon" type="image/x-icon" href="/favicon.ico"> <link rel="manifest" href="/site.webmanifest"> <meta name="theme-color" content="#ffffff">
Next.js 13+ auto-detects convention-named files in the /app directory:
app/ favicon.ico ← auto-detected, no link tag needed icon.png ← used as 32×32 icon apple-icon.png ← used as Apple Touch Icon public/ android-chrome-192x192.png android-chrome-512x512.png site.webmanifest
Add the manifest and extra icon link tags in your app/layout.tsx metadata:
export const metadata: Metadata = {
icons: {
icon: '/favicon-32x32.png',
apple: '/apple-touch-icon.png',
},
manifest: '/site.webmanifest',
}Place all favicon files in the /public directory and update index.html:
<!-- public/index.html <head> section --> <link rel="icon" type="image/png" sizes="32x32" href="%PUBLIC_URL%/favicon-32x32.png"> <link rel="apple-touch-icon" sizes="180x180" href="%PUBLIC_URL%/apple-touch-icon.png"> <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
Navigate to Appearance → Customize → Site Identity → Site Icon. Upload a 512×512 image and WordPress generates and serves all sizes automatically. No manual HTML editing required.
Design at 512×512 but always verify the result at actual 16×16 size. What looks great large often becomes an indistinguishable blob at tab size.
Complex logos with gradients, fine details, or text are unreadable at 16×16. Use a single letter, a simple shape, or a symbolic mark from your brand identity.
Browser tabs use both light and dark backgrounds. Your favicon must be distinguishable against both. Avoid colors too close to white or too close to the typical tab bar gray.
Light-colored icons on light tab bars are invisible. Dark-colored icons on dark tab bars are invisible. Test your favicon in both browser themes.
For Apple Touch Icons and Android PWA icons, use a solid background. Transparency renders as black on iOS and can look bad on Android launcher backgrounds.
Even a single letter becomes hard to read at 16×16px. If you must use text, test it extensively and consider a symbol version for very small contexts.
Google shows favicons next to every search result on mobile SERPs and desktop (since late 2019). The favicon appears as a small circle next to your domain name in the search listing. Google's specific requirements for favicon display in search results are:
The favicon image must be a multiple of 48×48 pixels (48×48, 96×96, etc.)
The favicon URL must be crawlable and accessible to Googlebot (not blocked by robots.txt)
The icon must visually represent the website — not be misleading or deceptive
The icon should be stable and consistent — rapidly changing favicons may be ignored
The favicon must be placed at the canonical URL of the site (not a CDN subdomain without proper rel=canonical)
If Google cannot find a valid favicon — or if the favicon violates its guidelines — it displays a generic globe icon. While favicons don't directly affect search rankings, a recognizable icon increases brand recall and can improve click-through rates by making your result visually distinctive in a list of competitors.
SVG favicons (supported in Chrome, Firefox, Edge — not Safari as of 2026) can respond to the user's color scheme preference using a CSS media query inside the SVG. This means your favicon can automatically switch between a dark icon on light backgrounds and a light icon on dark backgrounds:
<!-- HTML link tag -->
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<!-- /favicon.svg -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<style>
circle { fill: #1a1a1a; }
@media (prefers-color-scheme: dark) {
circle { fill: #ffffff; }
}
</style>
<circle cx="50" cy="50" r="40"/>
</svg>Always provide PNG and ICO fallbacks for Safari users and older browsers. The SVG favicon should be added in addition to the PNG/ICO tags, not as a replacement. Place the SVG link tag first so supporting browsers pick it up preferentially.
Upload any image to our free Favicon Generator and download ICO, PNG, Apple Touch Icon, Android icons, and a web manifest in a single ZIP. 100% client-side — your image never leaves your browser.
Open Favicon Generator