Favicons are the small icons that appear in browser tabs, bookmarks, home screens, and search results. Despite their tiny size, they play a big role in brand recognition and professional appearance. Getting favicons right in 2026 means generating multiple sizes and formats to cover every platform. Here's everything you need to know.
What Sizes Do You Need?
Different platforms and devices expect different favicon sizes. Here are the essential ones:
| Size | Use Case |
|---|---|
| 16x16 | Browser tab (standard) |
| 32x32 | Browser tab (Retina/HiDPI) |
| 48x48 | Windows taskbar |
| 180x180 | Apple Touch Icon (iOS home screen) |
| 192x192 | Android Chrome (manifest icon) |
| 512x512 | Android Chrome splash screen, PWA icon |
At minimum, you need the 32x32 favicon.ico and the 180x180 Apple Touch Icon.
For PWAs (Progressive Web Apps), include the 192x192 and 512x512 sizes in your web manifest.
Which Format Should You Use?
ICO: The classic format that supports multiple sizes in a single file.
Place favicon.ico in your site root for maximum compatibility. Every browser
supports it.
PNG: The modern standard. Use PNG for Apple Touch Icons and web manifest icons. PNGs support transparency and are supported by all modern browsers.
SVG: The newest option. SVG favicons scale perfectly to any size and
support dark mode via CSS prefers-color-scheme media queries. Browser support
is strong but not yet universal — always provide a PNG or ICO fallback.
How to Generate Favicons
The easiest approach is to start with a high-resolution source image (at least 512x512 PNG with a transparent background) and use a favicon generator to produce all required sizes automatically. Upload your source image, and the tool creates every size you need in a single download.
If your source is a photo or complex image, consider simplifying it first. Favicons are displayed at very small sizes, so detailed images become unreadable. Bold shapes, simple icons, and high-contrast colors work best.
Adding Favicons to Your Site
Place the following in your HTML <head>:
<link rel="icon" href="/favicon.ico" sizes="48x48"><link rel="icon" href="/favicon.svg" type="image/svg+xml">(if using SVG)<link rel="apple-touch-icon" href="/apple-touch-icon.png">- Reference 192x192 and 512x512 PNGs in your
manifest.json
Common Mistakes to Avoid
- Using only one size: A single 16x16 icon looks blurry on Retina displays and mobile home screens. Generate all required sizes.
- Too much detail: Simplify your design. If it's not recognizable at 16x16 pixels, it won't work as a favicon.
- No transparency: Most favicons benefit from a transparent background so they blend naturally with browser chrome.
- Forgetting Apple Touch Icon: Without it, iOS uses a screenshot of your page for the home screen bookmark — not a great look.
The Bottom Line
Start with a clean, simple 512x512 PNG. Run it through a favicon generator to get every size and format you need. Add the HTML tags, upload the files, and you're done. The whole process takes under a minute with Peregrine Pix — no sign-up, no upload to external servers, and completely free.