Five files cover nearly every browser and device: a 32 by 32 favicon.ico, an SVG icon for modern browsers, a 180 by 180 PNG apple-touch-icon for iPhone home screens, and 192 by 192 plus 512 by 512 PNGs listed in a web app manifest. Google Search wants a square icon, ideally larger than 48 pixels.
| File | Size | Used by |
|---|---|---|
| favicon.ico | 32 x 32 | Browser tabs, older browsers, tools that request /favicon.ico |
| icon.svg | Any (vector) | Modern browser tabs, sharp at every size |
| apple-touch-icon.png | 180 x 180 | iPhone and iPad home screen |
| icon-192.png | 192 x 192 | Web app manifest, Android home screen |
| icon-512.png | 512 x 512 | Web app manifest, install and splash screens |
Updated
Older favicon guides list twenty or more sizes for devices nobody uses. Today the browser scales from a few good source files, so the job is picking the right five, writing the head tags correctly and making sure Google can crawl them. Use the builder below to generate the tags and manifest for your own site.
Type your site name and theme colour, choose which files you have, and copy the head tags and manifest that match.
| Tag | Purpose |
|---|---|
| <link rel="icon" href="/favicon.ico" sizes="32x32"> | Classic tab icon, the fallback |
| <link rel="icon" href="/icon.svg" type="image/svg+xml"> | Vector tab icon for browsers that support SVG |
| <link rel="apple-touch-icon" href="/apple-touch-icon.png"> | Home screen icon on iOS and iPadOS |
| <link rel="manifest" href="/manifest.webmanifest"> | Points to the JSON file listing install icons |
| <meta name="theme-color" content="#4F98FB"> | Colours the browser interface on supporting mobile browsers |
Paste these into the head of every page. The sizes attribute on the ICO stops some browsers from picking it over the SVG.
<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/manifest.webmanifest">Two standard icons plus a padded maskable copy. The type field lets browsers skip formats they cannot use.
{
"name": "Harbor Bakery",
"short_name": "Harbor",
"icons": [
{ "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" },
{ "src": "/icon-maskable-512.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" }
],
"theme_color": "#4F98FB",
"background_color": "#ffffff",
"display": "standalone"
}A style block inside the SVG swaps the fill when the browser is in dark mode, so the mark never disappears on a dark tab.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
<style>
rect { fill: #1d4ed8 }
@media (prefers-color-scheme: dark) { rect { fill: #93c5fd } }
</style>
<rect x="4" y="4" width="24" height="24" rx="6"/>
</svg>Browsers now pick the closest icon and scale it, and the SVG format lets one file serve every tab size. The many old Windows tile and Apple sizes were for platforms that have since moved on.
Apple's Safari documentation still describes per-device touch icons, but iOS falls back to a larger icon when no exact match exists, so a single 180 pixel PNG covers current iPhones and iPads well.
Chromium browsers need at least a 192 pixel and a 512 pixel icon in the manifest before a site can be installed, according to web.dev. With those two, Chrome scales for other densities automatically.
Each manifest icon can carry a purpose of any, maskable or monochrome. Use a separate file for maskable, since padding that suits a cropped shape looks too small when shown square.
Google Search shows a favicon next to results when it can find one on your home page. The supported rel values are icon, shortcut icon, apple-touch-icon and apple-touch-icon-precomposed.
Google also accepts several formats, including ICO, PNG, GIF and JPEG. The icon file may even live on another domain, as long as Googlebot is allowed to fetch it.
There is no single best size. Ship a 32 by 32 ICO for compatibility and an SVG for crisp modern tabs, then add the 180 pixel Apple icon and the 192 and 512 manifest icons for home screens. Google Search asks for a square image, at least 8 pixels and preferably larger than 48 by 48.
Put the files in your site root and add link tags in the head of every page: rel icon for the ICO and SVG, rel apple-touch-icon for the 180 pixel PNG, and rel manifest pointing at a JSON file that lists the 192 and 512 icons. The builder on this page writes those lines for you.
Google needs to crawl both your home page and the icon file, the icon must be square, and the link has to be in the home page head. Updates can take a while to appear because Google recrawls favicons on its own schedule.
It is worth keeping. Some tools, feed readers and older browsers ask for /favicon.ico directly without reading your HTML, and a small ICO at the root answers them.
A manifest icon marked with purpose maskable, drawn with extra padding so Android can crop it into a circle, squircle or other shape. Keep the logo inside the central safe zone and fill the background edge to edge.
Related: Favicon generator, Progressive web app guide, Website image sizes, Open Graph image generator.
Start for free or see all free tools. We.Inc is free to start, with no card needed. AI building is on paid plans from $20 a month.
We.Inc is an AI-powered website builder you can resell under your own brand. Launch a branded client dashboard, bill on Stripe Connect, and deliver AI-generated websites in minutes. White-label plans start at $99 a month for 25 client sites, with a 7-day free trial and no per-site fees.