📋 In This Guide
Why You Need Multiple Favicon Sizes
A favicon isn't just one image anymore — different devices and contexts request different sizes. Browser tabs use a tiny 16x16 or 32x32 icon, iOS home screen shortcuts need a 180x180 Apple touch icon, and Android's home screen and app manifest look for 192x192 and 512x512 versions. Providing all of these ensures your site looks polished and professional everywhere it's saved or bookmarked, rather than falling back to a generic blank-page icon on some devices.
Browser Tabs
16x16 and 32x32 for tab bars and bookmarks
iOS Home Screen
180x180 Apple touch icon for "Add to Home Screen"
Android
192x192 and 512x512 for Chrome and app manifests
Professional Polish
A missing favicon is one of the fastest "unfinished site" signals
Every Favicon Size Explained
| Size | Filename | Used For |
|---|---|---|
| 16×16 | favicon-16x16.png | Standard browser tab icon |
| 32×32 | favicon-32x32.png | Retina/high-DPI browser tabs and taskbar |
| 180×180 | apple-touch-icon.png | iOS "Add to Home Screen" icon |
| 192×192 | android-chrome-192x192.png | Android home screen and Chrome |
| 512×512 | android-chrome-512x512.png | Android splash screens and web app manifest |
What Makes a Good Favicon Source Image
Favicons are viewed at genuinely tiny sizes — as small as 16 pixels square. A detailed logo with thin lines, small text, or subtle gradients often turns into an unrecognisable blur at that size. The best source images are simple, bold, high-contrast icon-style marks — think a single letter, a simplified symbol, or a solid shape — rather than your full detailed logo with a tagline.
Need meta tags and social previews too?
Generate SEO, Open Graph and Twitter Card tags with live previews.
How to Add Your Favicon to a Website
Upload all the generated PNG files to your website's root directory, then paste the provided link tags into the <head> section of every page — or, on most sites, into a single shared header template so it applies everywhere at once.
5 Common Favicon Mistakes to Avoid
Frequently Asked Questions
16x16 and 32x32 for browser tabs, 180x180 for Apple touch icons on iOS, and 192x192 plus 512x512 for Android Chrome home screen icons and app manifests.
Modern browsers fully support PNG favicons, so it's no longer strictly required. Some old browsers and crawlers still check for /favicon.ico by default, so many sites keep one as a fallback.
Favicons are always square. Non-square images are automatically center-cropped to a square before resizing so your icon isn't stretched or distorted.
Upload all PNG files to your website's root directory, then add the provided link tags inside your page's head section.
Browsers cache favicons aggressively. Try a hard refresh, clear the browser cache, or check in a private/incognito window to confirm it's actually live.
A simple, bold, high-contrast design with minimal fine detail works best, since favicons are viewed as small as 16x16 pixels where complex logos become an unrecognisable blur.
No. All image processing happens entirely inside your browser using the HTML5 Canvas API. Your image is never uploaded or stored anywhere outside your device.