[{"data":1,"prerenderedAt":11},["ShallowReactive",2],{"guide:en:blog\u002Ffavicon-sizes-which-ones-you-need":-1,"article-en-favicon-sizes-which-ones-you-need":3},{"slug":4,"title":5,"description":6,"date":7,"keyword":8,"tool":9,"html":10},"favicon-sizes-which-ones-you-need","Favicon Sizes: Which Ones You Actually Need in 2025","A plain-English guide to favicon sizes: 16x16, 32x32, 180x180, 192 and 512, which ones modern browsers use, and the HTML to drop in.","2026-10-12","favicon size","favicon-generator","\u003Cp>Search "favicon size" and you get a wall of conflicting numbers: 16x16, 32x32, 48x48, 64, 180, 192, 256, 512. Most of those lists were written a decade ago and never updated. In practice, a modern site needs about four files, and you can make all of them in one pass with the \u003Ca href=\"\u002Ffavicon-generator\">favicon generator\u003C\u002Fa> — it runs entirely in your browser, so your logo never leaves your machine.\u003C\u002Fp>\n\u003Cp>Here's what each size is actually for, and what you can safely skip.\u003C\u002Fp>\n\u003Ch2>The sizes that still matter\u003C\u002Fh2>\n\u003Ch3>16x16 and 32x32 — browser tabs and bookmarks\u003C\u002Fh3>\n\u003Cp>This is the classic favicon. 16x16 is what you see in a crowded tab strip; 32x32 is used on high-DPI screens, the bookmarks bar, and some address bar UIs. Both are traditionally bundled into a single \u003Ccode>favicon.ico\u003C\u002Fcode> file, which can hold multiple resolutions at once. Windows also pulls 48x48 from the same \u003Ccode>.ico\u003C\u002Fcode> for desktop shortcuts, so including it costs almost nothing.\u003C\u002Fp>\n\u003Ch3>180x180 — Apple touch icon\u003C\u002Fh3>\n\u003Cp>When someone taps "Add to Home Screen" on an iPhone or iPad, Safari looks for \u003Ccode>apple-touch-icon.png\u003C\u002Fcode> at 180x180. If it isn't there, iOS screenshots your page and uses that instead, which looks terrible. This one PNG covers every current iOS device because the system downscales as needed.\u003C\u002Fp>\n\u003Ch3>192x192 and 512x512 — Android and PWAs\u003C\u002Fh3>\n\u003Cp>Android Chrome and installable web apps read icons from your \u003Ccode>site.webmanifest\u003C\u002Fcode>. 192 is the home-screen icon; 512 is used for the splash screen and app listings. If you ever want your site installable, you need both.\u003C\u002Fp>\n\u003Ch3>SVG — optional but nice\u003C\u002Fh3>\n\u003Cp>Firefox and Chrome both support an SVG favicon, which stays crisp at any size and can respond to dark mode with a media query inside the file. It's a bonus, not a replacement — Safari and older browsers still want the raster versions.\u003C\u002Fp>\n\u003Ch2>What you can skip\u003C\u002Fh2>\n\u003Cp>64x64, 96x96, 128x128, the whole set of Windows tile images, and the dozen legacy \u003Ccode>apple-touch-icon-76x76\u003C\u002Fcode>-style files. They were needed for devices that are mostly gone. Shipping twenty icon files bloats your repo and gains you nothing measurable.\u003C\u002Fp>\n\u003Ch2>The HTML\u003C\u002Fh2>\n\u003Cp>Drop the files in your site root and add this to \u003Ccode><head>\u003C\u002Fcode>:\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-html\"><link rel="icon" href="\u002Ffavicon.ico" sizes="any">\n<link rel="icon" href="\u002Ficon.svg" type="image\u002Fsvg+xml">\n<link rel="apple-touch-icon" href="\u002Fapple-touch-icon.png">\n<link rel="manifest" href="\u002Fsite.webmanifest">\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>And in the manifest:\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-json\">"icons": [\n  { "src": "\u002Ficon-192.png", "type": "image\u002Fpng", "sizes": "192x192" },\n  { "src": "\u002Ficon-512.png", "type": "image\u002Fpng", "sizes": "512x512" }\n]\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Ch2>Designing for 16 pixels\u003C\u002Fh2>\n\u003Cp>The hard part isn't the export, it's that a full logo turns to mush at 16x16. A few things that help:\u003C\u002Fp>\n\u003Cul>\n\u003Cli>\u003Cstrong>Use a fragment, not the whole logo.\u003C\u002Fstrong> One letter, one glyph, one shape. Wordmarks are unreadable at tab size.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Start square.\u003C\u002Fstrong> If your source is a wide logo, \u003Ca href=\"\u002Fcrop-image\">crop it to a square\u003C\u002Fa> first so the generator isn't letterboxing it with empty space.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Keep contrast high.\u003C\u002Fstrong> Thin outlines vanish. Solid shapes survive.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Decide on the background.\u003C\u002Fstrong> A transparent PNG adapts to light and dark browser chrome; if your mark is dark, consider giving it a solid colored tile instead. You can \u003Ca href=\"\u002Fremove-background\">remove the background\u003C\u002Fa> from a logo screenshot in seconds if you only have a flat JPG.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Mind the safe area.\u003C\u002Fstrong> Android masks icons into circles and squircles, so leave roughly 10% padding around the edge of your 512 artwork.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>If you're matching the favicon's background to your site's brand color, the \u003Ca href=\"\u002Fcolor-picker\">image color picker\u003C\u002Fa> will pull the exact hex from an existing screenshot — handy for the \u003Ccode>theme-color\u003C\u002Fcode> meta tag too.\u003C\u002Fp>\n\u003Ch2>Generate the whole set at once\u003C\u002Fh2>\n\u003Cp>Upload nothing: drop a square PNG or SVG into the \u003Ca href=\"\u002Ffavicon-generator\">free browser-based favicon generator\u003C\u002Fa> and it produces the \u003Ccode>.ico\u003C\u002Fcode>, the Apple touch icon, and the 192\u002F512 PNGs locally, in your own tab. Nothing is sent to a server, there's no sign-up, and no copy of your unreleased logo ends up sitting in someone else's storage bucket.\u003C\u002Fp>\n\u003Cp>Then zoom your browser out, look at the tab, and ask the only question that matters: can you tell what it is?\u003C\u002Fp>\n",1791831495325]