Written by David Kim — Frontend developer and WordPress consultant. I paste this exact favicon snippet into every client site I build — about 100 and counting. More about me →
A designer I collaborate with messaged me last week: "David, I built this beautiful portfolio site and the tab just shows the generic globe icon. What am I doing wrong?" She'd created a gorgeous custom favicon as a 64×64 PNG and saved it to her root directory as favicon.png — but she hadn't added a single line of HTML to tell the browser it existed. She assumed browsers auto-detect it. They don't (not for PNGs, at least). Here are the exact lines I paste into every <head> I touch, and why I use this specific set.
<link rel="icon" type="image/png" href="/favicon-32.png" sizes="32x32">
This single line tells Chrome, Firefox, Edge, and Opera to display your icon in the browser tab. I use a 32×32 PNG because that's the native tab resolution on standard-DPI displays. You can serve a larger file — browsers will scale it down — but a properly sized 32×32 file is under 1KB versus a 512×512 PNG that might be 50KB, and that difference matters on slow mobile connections.
MDN's HTML link element documentation confirms that modern browsers support PNG favicons via the rel="icon" syntax natively. The old /favicon.ico convention — just dropping an ICO file in the root folder with no HTML at all — still works in most browsers as a fallback, but I don't rely on it. I've seen it fail on Safari 16+ and on corporate networks with aggressive caching policies that strip root-directory default files.
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
If you've ever bookmarked a site on your iPhone home screen and the icon showed up as a fuzzy screenshot of the page itself, this line was missing. Safari on iOS and macOS reads apple-touch-icon separately from rel="icon" — it won't fall back to your regular favicon for bookmarks or the home screen. I learned this after a restaurant client complained that their customers' home screen shortcuts looked "broken" on iPhone.
The recommended size for this one is 180×180 pixels. Apple's Human Interface Guidelines specify this dimension for home screen icons, and the OS auto-rounds the corners and adds the glass overlay. A smaller file will work but looks pixelated; a larger one gets resized fine but wastes bandwidth.
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
This is a relatively recent addition to the HTML standard. SVGs as favicons are supported in Firefox since v80, Chrome since v118, and Edge since v119 — which covers about 92% of global browser traffic as of 2026. The advantage is that a vector favicon stays crisp at every resolution and the file is usually under 500 bytes unless your icon is extremely complex. I prefer using SVGs for all new projects and falling back to the 32×32 PNG for older browsers.
One quirk: SVG favicons don't support the sizes attribute, since they're resolution-independent. Just omit sizes on the SVG line. Also, Safari doesn't support SVG favicons yet — hence keeping the PNG line above it in the HTML order. Browsers use the last supported rel="icon" declaration, so put the SVG before the PNG to give modern browsers the vector version while Safari gets the raster fallback.
Starting in Chrome 122 and Edge 122, you can specify a separate favicon for dark mode with a media attribute:
<link rel="icon" type="image/svg+xml" href="/favicon-dark.svg" media="(prefers-color-scheme: dark)">
I use this on about half my client projects now — the ones where the favicon contains dark elements that disappear against dark browser chrome. For simple icons with a colored background, a single SVG usually works fine in both modes. But if your icon is a dark logo mark, add the dark-mode variant. The fallback behavior is clean: browsers that don't understand media on a <link rel="icon"> simply ignore the attribute and use the first matching icon declaration.
After a hundred client sites, here's the block I keep in my snippet manager and drop into every <head>:
<link rel="icon" type="image/svg+xml" href="/favicon.svg"> <link rel="icon" type="image/png" href="/favicon-32.png" sizes="32x32"> <link rel="apple-touch-icon" href="/apple-touch-icon.png">
That's it. Three lines, no ICO file required, works in every browser released in the last four years. You can generate all three formats from a single source image using our free favicon generator — upload a square PNG or SVG of at least 260×260, and it auto-generates the 32×32 PNG, 180×180 Apple icon, and optimized SVG in one export.
Written by David Kim — Frontend developer and WordPress consultant. I paste this exact favicon snippet into every client site I build — about 100 and counting. More about me →