Search for "favicon sizes" and you'll find lists of twenty or thirty icon files. You don't need them. Modern browsers, phones and search engines use a handful of sizes, and everything else is either scaled from those or a leftover from platforms that no longer exist. Here is the short list, the exact HTML to add, and how to fix a favicon that refuses to update.
The favicon sizes you actually need
| File | Size | Used for |
|---|---|---|
favicon.ico | 32×32 (can also hold 16×16 and 48×48) | Browser tabs and bookmarks; the fallback every browser requests from your site's root |
favicon-16x16.png | 16×16 | Browser tabs on standard-resolution screens |
favicon-32x32.png | 32×32 | Tabs on high-resolution screens, taskbar and desktop shortcuts |
apple-touch-icon.png | 180×180 | The icon when someone adds your site to an iPhone or iPad home screen |
android-chrome-192x192.png | 192×192 | Android home screen shortcuts, via the web app manifest |
android-chrome-512x512.png | 512×512 | Splash screens and installable web apps (PWAs) |
The HTML to add to your pages
Put the image files in your site's root folder and add these lines inside the <head> of every page:
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#ffffff">You don't need a <link> tag for favicon.ico as long as it sits in the root: browsers look for /favicon.ico automatically.
The web app manifest
The site.webmanifest file tells Android and installable-app features which icons to use and which colours to show while your site loads:
{
"name": "Your Site",
"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"
}Favicons in Google Search
Google shows your favicon next to your site's name in search results, so it's worth getting right. Google reads the same rel="icon" and rel="apple-touch-icon" links shown above. To be eligible:
- the icon must be square;
- it should be comfortably larger than 48×48 pixels, which the 180×180 Apple touch icon covers;
- the icon file and your home page must be crawlable, so don't block them in
robots.txt; - it should be a visual representation of your brand; Google swaps inappropriate icons (for example, anything pornographic or hateful) for a default one.
After you change a favicon, it can take days or weeks for Google to show the new one, because it is refreshed when Google recrawls your home page.
Design tips for tiny icons
- Simplify. A full logo with a tagline turns into a smudge at 16×16. Use a symbol, a monogram or one or two letters.
- Use strong contrast so the icon works on light and dark browser themes.
- Give the Apple icon a solid background. iOS doesn't keep transparency on home-screen icons, and transparent areas can end up black.
- Preview at real size before you publish. What looks crisp at 512×512 can be unreadable in a tab.
What about SVG favicons?
Most modern browsers also accept an SVG favicon (<link rel="icon" href="/favicon.svg" type="image/svg+xml">). SVGs stay sharp at every size and can even switch colours for dark mode using a CSS media query inside the file. Treat SVG as an extra, not a replacement: keep the ICO and PNG files for browsers and platforms that don't support it.
Why isn't my new favicon showing?
- Browser cache. Browsers cache favicons aggressively. Try a hard refresh, a private window, or another browser.
- Force a refresh for visitors by changing the file name or adding a version to the URL, for example
/favicon-32x32.png?v=2. - Wrong path. Open the icon's URL directly in your browser. If you get a 404, the
hrefor the file location is wrong. - Missing root file. Some tools and older browsers only ever request
/favicon.ico, so make sure it exists in the root.
Generate every size at once
Our free Favicon & App Icon Generator turns one image, or a letter or emoji on a coloured background, into the complete set: favicon.ico, 16×16 and 32×32 PNGs, the 180×180 Apple touch icon, 192×192 and 512×512 Android icons and a ready-made site.webmanifest, packed into one ZIP, and shows you the HTML snippet to paste into your pages. If your source image isn't square, use the Image Cropper first.
Frequently asked questions
What size should a favicon be?
Provide a 32×32 favicon.ico plus 16×16 and 32×32 PNGs for browsers, a 180×180 Apple touch icon, and 192×192 and 512×512 icons for Android. Start from an image of at least 512×512 pixels so every size is sharp.
Do I still need favicon.ico?
Yes. It is the file browsers and many other tools request by default, and it costs you nothing to include.
Can a favicon be a JPG?
Browsers may display one, but PNG, ICO and SVG are the reliable choices. JPG has no transparency and blurs sharp edges at small sizes.
Why does my favicon look blurry?
Usually because a large, detailed logo was shrunk to 16×16. Simplify the design for small sizes, and make sure each size is generated separately rather than one image being stretched.