The days of dropping a single 16×16 favicon.ico in the root directory are long gone. Modern sites display icons in browser tabs, bookmarks, home screen shortcuts, PWA splash screens, Windows tiles, and macOS dock previews — each requiring different sizes and formats. Getting this right is a small thing that makes a big difference to how polished a site feels.
The DevToolShack Favicon Generator takes a single high-resolution image and produces the complete set of favicon files and the HTML to link them — all in your browser, free, with nothing uploaded to a server.
Why Favicons Still Matter
Favicons affect more than the browser tab. They appear in:
- Browser tabs and window taskbars — where brand recognition is built at a glance
- Bookmarks and reading lists — often the only visual identifier
- Browser history — helps users find your site again quickly
- iOS and Android home screen shortcuts — when users "Add to Home Screen"
- PWA install prompts and splash screens
- Social bookmarking and link preview tools
- Windows Start menu tiles (for pinned sites in Edge)
A missing or low-resolution favicon makes a site feel unfinished. A well-chosen favicon that works at 16px is a real design challenge — but it pays off in credibility.
The Modern Favicon Stack
| File | Size(s) | Used For |
|---|---|---|
favicon.ico | 16, 32, 48px (multi-size) | Classic browser tab, legacy support |
favicon-16x16.png | 16×16 | Browser tab (small) |
favicon-32x32.png | 32×32 | Browser tab (standard) |
apple-touch-icon.png | 180×180 | iOS home screen shortcut |
android-chrome-192x192.png | 192×192 | Android home screen / PWA |
android-chrome-512x512.png | 512×512 | PWA splash screen |
site.webmanifest | N/A | PWA configuration file |
The HTML to Add to Your <head>
<!-- Classic favicon (all browsers) -->
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<!-- PNG favicons -->
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<!-- Apple Touch Icon (iOS home screen) -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<!-- Web App Manifest (PWA + Android) -->
<link rel="manifest" href="/site.webmanifest">The site.webmanifest File
{
"name": "Your Site Name",
"short_name": "SiteName",
"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"
}The theme_color controls the browser chrome color on Android. background_color is the splash screen background when the PWA launches. Match these to your brand colors.
Designing a Favicon That Works at 16px
The hardest part of favicon design isn't the file generation — it's making an icon that remains recognisable at 16×16 pixels. Some principles that help:
- Use the first letter or initials — a single letter of your brand name is almost always more legible at small sizes than a logo mark
- High contrast — the icon needs to read against both light and dark browser chrome
- Avoid thin strokes — lines thinner than 2px disappear at small sizes
- Simple shapes — complex logos lose all detail; a simplified symbol works better
- Start at 512×512 — design your favicon at high resolution and let the generator downsample; never design at 16px and scale up
<link rel="icon" type="image/svg+xml" href="/favicon.svg"> for a crisp vector favicon that scales perfectly at any DPI. Keep the ICO and PNG fallbacks for older browsers. Optimize the SVG first with the SVG Optimizer before deploying.Where to Place Favicon Files
Browsers automatically request /favicon.ico from the root of every domain — so this file should always be at the root. The other files can be anywhere if referenced correctly in <head>, but keeping all favicon files in the root directory is the most reliable approach.
<head>. Pair it with the OG Tag Generator and Meta Tag Generator to complete your page's full head metadata setup.