Written by David Kim — Frontend + WordPress Developer. I build websites for small businesses and generate a lot of favicons. More about me →
I build about 15 WordPress sites a year for small businesses — bakeries, law firms, a chain of car washes in Oregon. Every single one of them needs a favicon. And every single one of them has had a different favicon setup nightmare. One client's old favicon was a 256×256 PNG renamed to favicon.ico and it only worked in Chrome. Another had a perfectly valid favicon that broke on iOS because the Apple Touch Icon was 57×57 — the pre-Retina size from 2010.
After fixing enough broken favicons, I built a checklist. Now I use a free favicon generator that handles every size in one go, and this is the exact process.
People think a favicon is one file. It's not. Here are the sizes that matter based on actual browser testing in July 2026:
favicon.ico — 16×16 and 32×32 inside one ICO container. This is the fallback that every browser reads. I still generate a classic favicon ICO even for modern sites because some RSS readers and bookmarking tools only look for /favicon.ico.
PNG favicons — 16×16, 32×32, and 192×192. The 192×192 is what Chrome uses for Android home screen shortcuts and PWA install prompts. Skip this and your client's site looks unprofessional when someone saves it to their home screen.
Apple Touch Icon — 180×180 PNG. Apple's current HIG specifies this as the required size for iOS Safari bookmarks and home screen web clips. I used to generate a separate Apple Touch Icon in multiple sizes, but since iOS 13, the 180×180 scales down reliably for older devices.
SVG favicon — one file, works at any resolution. I started adding SVG favicons to every site in 2024 and they've become my default recommendation. Modern Chrome and Firefox read the SVG directly. The file is usually under 1KB. For the car wash client, their logo was already an SVG from the designer, so I generated a favicon directly from it with zero quality loss.
I generated favicons for a bakery site last week and the owner messaged me: "The icon shows in Chrome but not on my iPhone." The site had favicon.ico and a 32×32 PNG linked, but no Apple Touch Icon. Here's the complete set of link tags I include in every head now:
<link rel="icon" type="image/svg+xml" href="/favicon.svg"> — modern browsers pick this up first. <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"> — fallback. <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"> — iOS. Without that last one, iPhone users see a generic gray icon on their home screen.
Using a multi-size favicon generator means I upload one image — usually the client's logo — and download every size and format at once. The whole process takes under two minutes per site.
Written by David Kim — Frontend + WordPress Developer. I build websites for small businesses and generate a lot of favicons. More about me →