How to Create a Favicon (Every Size You Need in 2026)
Modern favicons aren't a single file — they're a set of 7+ sizes for browsers, iOS home screens, Android, and Windows tiles. Here's the complete list and how to generate them in one shot.
"A favicon" used to mean a single 16×16 pixel .ico file. In 2026, a complete favicon set means seven or more files, served via specific HTML link tags, covering every operating system and browser combination. Skip any of them and you'll see broken icons on someone's device.
The complete 2026 favicon set
| File | Size | Purpose |
|---|---|---|
| favicon.ico | 32×32 (multi-res) | Legacy browsers, IE, Edge tab |
| favicon-16x16.png | 16 × 16 | Small browser tab |
| favicon-32x32.png | 32 × 32 | Most modern browsers |
| apple-touch-icon.png | 180 × 180 | iPhone / iPad home screen |
| android-chrome-192x192.png | 192 × 192 | Android home screen |
| android-chrome-512x512.png | 512 × 512 | Android splash screen |
| safari-pinned-tab.svg | (vector) | Safari pinned tabs |
| site.webmanifest | (JSON) | PWA install metadata |
That's the minimum complete set. For full Windows tile support add msapplication-TileImage variants; for high-DPI iPad add 152 × 152 and 167 × 167.
Generate them all in one click
Open Favicon Generator. Drop a single source image (recommended: at least 512 × 512, square, with a transparent background). The tool produces every size in the table above plus a copy-pasteable HTML snippet.
Drop the generated files into your site's root, paste the snippet into your <head>, and you're covered for every device that's been released in the last decade.
Source-image tips
- Square aspect ratio. Anything else gets cropped (or letterboxed) and looks awkward.
- Vector source if possible. SVGs scale to every output size without aliasing. If your source is a raster icon, start at 512 × 512 minimum so the tool doesn't have to upscale.
- High contrast against both white and dark. Browsers display favicons against varying backgrounds (light tab on light, dark tab on dark). A logo that disappears on either background is a half-broken icon.
- No tiny details. The 16 × 16 size is brutal — a logo with text or fine lines becomes a smudge. Either simplify the design at small sizes or let the tool produce a "letterform only" 16 × 16 variant.
- Transparent background. PNG with alpha channel — let the browser pick the background color. Remove Background handles this if your source has a solid background color.
The HTML snippet
The Favicon Generator outputs this — paste it inside <head>:
<link rel="icon" href="/favicon.ico" sizes="32x32" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
<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" />
<link rel="manifest" href="/site.webmanifest" />
Order matters slightly — browsers pick the first one they support that matches the size they need.
FAQ
Do I really need all 7 files in 2026? Practically: yes, if you care about the icon appearing correctly when someone bookmarks your site to their iPhone home screen, pins it as a Safari tab, or installs it as a PWA on Android. The "just a favicon.ico" era ended around 2014.
My logo is detailed. Should I simplify for small sizes? Yes. The Favicon Generator can produce a "monogram" mode where the 16 × 16 and 32 × 32 sizes use a stylized initial letter while the larger sizes use the full logo. Or just provide a separate simplified source for small sizes.
Can I use an emoji as my favicon? Yes — Favicon Generator accepts emoji input. The output is a PNG of the emoji rendered at each size, using the OS's emoji font on the user's device. Surprisingly effective for a quick prototype site.
Tools mentioned in this guide
Related guides
What Is Base64 Encoding? (And When to Use It)
Base64 is a way to represent binary data as ASCII text. It's how email attachments get sent, how images get embedded in HTML, and how API tokens get transmitted. Here's the actual story.
What Is WebP and Should You Use It?
WebP is a modern image format from Google that produces smaller files than JPEG and PNG with comparable quality. Here's when to use it, when not to, and how to convert.
How to Remove EXIF Data From Photos (Phone or Computer)
EXIF data embedded in photos can include GPS coordinates, camera serial numbers, and timestamps. Here's how to strip it before sharing — without uploading anything.