Favicon Size Guide
Browsers, phones and app stores each expect their own favicon size. Here is every size that actually matters in 2026, what it is used for, and the exact HTML tags to add to your site.
The sizes you actually need
| Size | Used for |
|---|---|
| 16×16 | Browser tab icon (classic) |
| 32×32 | Taskbar, bookmarks bar, high-DPI tabs |
| 48×48 | Windows site icon / desktop shortcut |
| 180×180 | Apple touch icon (iOS home screen) |
| 192×192 | Android home screen & PWA icon |
| 512×512 | PWA splash screen & high-resolution devices |
| favicon.ico | Legacy browsers and older bookmarks |
You do not need to create each one by hand. The generator takes a single square image and exports every size above as PNG, plus a multi-size favicon.ico.
How to add them to your site
Place the exported files in the root of your website and add the following tags inside <head>:
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">Tips for a sharp favicon
Start from a square source of at least 512×512 pixels. Keep the design simple — fine detail disappears at 16×16. Use a bold letter, a simple mark, or a single strong shape on a solid background. Avoid thin text.
If your new favicon does not appear right away, your browser is caching the old one. Hard-refresh (Ctrl+F5 / Cmd+Shift+R) or open the site in a private window.