Where favicons appear
- browser tabs, the address bar and bookmarks (small sizes: 16 and 32 px);
- search results next to your site name;
- home-screen shortcuts on iPhone/iPad (apple-touch-icon) and Android (web manifest icons);
- Windows taskbar and desktop shortcuts (larger ICO sizes such as 48 px).
The files you actually need
| File | Size | Used by |
|---|---|---|
favicon.ico | 16, 32, 48 px in one file | All browsers; requested automatically from the site root |
favicon-32x32.png, favicon-16x16.png | 32 and 16 px | Modern browsers that prefer PNG |
apple-touch-icon.png | 180 × 180 | iPhone and iPad home screen |
android-chrome-192x192.png, -512x512.png | 192 and 512 px | Android home screen, installable web apps |
site.webmanifest | — | Tells Android/Chrome which icons and colours to use |
An ICO file is a container that can hold several sizes; the browser picks the one it needs. That is why one favicon.ico covers both a 16 px tab and a 48 px shortcut.
Step-by-step
- Prepare a square source, ideally 512 × 512 px or larger. A simple shape or one or two letters reads far better at 16 px than a detailed logo.
- Generate the files. In the favicon generator upload an image or use an emoji or letters, check the preview at each size and download the ZIP.
- Upload them to the site root (so
/favicon.icoopens in the browser). - Add the HTML to the
<head>of every page.
HTML to paste
<link rel="icon" href="/favicon.ico" sizes="48x48">
<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="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">And the manifest file it points to:
{
"name": "My Site",
"short_name": "My Site",
"icons": [
{ "src": "/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png" }
],
"theme_color": "#0f172a",
"background_color": "#0f172a",
"display": "standalone"
}Design tips
- Check 16 px first. If the icon is unreadable there, simplify it: thicker shapes, fewer details, strong contrast.
- Avoid transparency on the apple-touch-icon. iOS fills transparent areas (usually with black), so use a solid background.
- Think about dark tabs. A dark icon on a transparent background can vanish in a dark browser theme; a coloured background square is safer.
- Leave a little padding for Android, which may crop icons into circles or rounded squares.
What about SVG favicons?
An SVG icon (<link rel="icon" type="image/svg+xml" href="/icon.svg">) stays sharp at any size and can even switch colours for dark mode with a CSS media query inside the file. Support differs between browsers, so treat it as an extra on top of the ICO and PNG files, not a replacement.
Favicon not updating?
- Open
/favicon.icodirectly in the browser and hard-refresh (Ctrl+F5 or Cmd+Shift+R). - Check in a private window or another browser.
- Change the URL in the link tags, e.g.
/favicon.ico?v=2, to bypass caches. - For search results, be patient: the icon updates after Google recrawls your home page.
Setting up the rest of the page head? See the meta tag generator.
Frequently asked questions
What size should a favicon be?
Provide a favicon.ico containing 16×16, 32×32 and 48×48 images, a 180×180 apple-touch-icon for iPhone and iPad, and 192×192 and 512×512 PNGs in a web manifest for Android. Start from a square source of 512 px or more.
Do I still need favicon.ico?
It is still the safest fallback: browsers and many tools request /favicon.ico from the site root automatically, even without a link tag. Keep it alongside PNG (and optionally SVG) icons.
Why does my apple-touch-icon have a black background?
iOS does not support transparency in home-screen icons and fills transparent areas, typically with black. Use a solid background colour for the 180×180 icon.
Why is my old favicon still showing?
Browsers cache favicons aggressively. Open /favicon.ico directly and hard-refresh, try a private window, or change the file URL (for example add ?v=2) in your link tags.
How do I get my favicon to show in Google search results?
Link it from your home page with rel="icon", make it square, keep it crawlable (not blocked by robots.txt) and use a size larger than 48×48 as Google recommends. Updates can take some time to appear after Google recrawls the page.