Favicon Generator

Cover the standard set: 16x16 and 32x32 for browser tabs, 48x48 as a fallback for older Windows tools, 180x180 for the iOS home-screen Apple touch icon, 192x192 and 512x512 for Android home-screen and PWA install. The favicon generator usually produces all of these from a single source PNG and writes the matching link tags. Skip the 64, 96, 128 variants unless you have a specific reason - modern browsers don't need them. The 512x512 also doubles as the maskable PWA icon when configured correctly in your site.webmanifest file.

Not strictly required anymore, but useful as a fallback. Modern browsers - Chrome, Firefox, Safari, Edge - all happily use PNG favicons declared via link rel='icon' tags. Chrome actually prefers PNG. The .ico file matters mainly for Internet Explorer (still around in some enterprise environments), legacy Windows desktop shortcuts, and the case where browsers blindly request /favicon.ico from the site root regardless of what's declared in HTML. Generating one alongside your PNG set takes no extra effort, satisfies the auto-request, and avoids 404s in your access logs. Keep it, but PNGs do the real work.

Start with a crisp square PNG at 512x512 minimum. The generator downscales from there to produce 16x16, 32x32, 180x180 and the rest, and downscaling from a clean source always beats upscaling from a blurry one. Make sure the design is simple - at 16x16, a complex logo turns into a fuzzy blob. Use bold strokes, high contrast, and ideally test the actual 16x16 output before committing. Vector source (SVG converted to 512x512 PNG) is even better, since you can re-render at any size cleanly. Avoid thin lines, small text, fine gradients - they all collapse at favicon scale.

The icon iOS uses when someone adds your site to their home screen. Without it, iOS picks an ugly screenshot of your page. Recommended size is 180x180 PNG, declared with <link rel='apple-touch-icon' href='/apple-touch-icon.png'/> in your HTML head. iOS automatically applies rounded corners, so don't pre-round them yourself or you get double-rounded weirdness. Earlier iOS versions also added a glossy overlay - that's gone now. Keep the design bold and contrast-heavy, since it'll appear on phone home screens at modest size. Most favicon generators include this in their output bundle without extra work.

It's the JSON file that defines your site's behavior as a Progressive Web App. The manifest declares the app name, short name, the icon set in different sizes, theme color (which colors the browser UI on Android), background color (used during PWA splash screen), display mode (standalone, fullscreen, browser), and start URL. When users install your site to their home screen, the OS reads this file to know how to present it. Without it, Add to Home Screen still works but you lose the proper app-like experience. Reference it from HTML with <link rel='manifest' href='/site.webmanifest'/>.

Drop them in the site root, not inside an /assets or /images folder. The reason: browsers automatically request /favicon.ico from the root regardless of what's in your HTML, and Apple's iOS does the same for /apple-touch-icon.png. Putting them at root satisfies those auto-requests without 404s in logs. Then in the head of every page (or your base template), paste the link tags from the generator: <link rel='icon' type='image/png' sizes='32x32' href='/favicon-32x32.png'/> and so on. Manifest also goes at root: /site.webmanifest. The generator usually outputs ready-to-paste HTML alongside the files.

For browser tabs, yes - transparency lets the favicon blend naturally with whatever tab color the browser or theme uses, light or dark. Solid backgrounds end up looking like a colored block sitting in the tab strip, especially in dark mode. For iOS Apple touch icons, though, transparency renders as black on the home screen because iOS doesn't composite over a guaranteed background. So either supply a separate version with a solid color background for iOS, or accept the black look. Most favicon generators handle this automatically by giving the touch icon a sensible background color.

Different contexts need different pixel counts. A browser tab uses 16x16 or 32x32 - tiny, so the design has to be readable at that size. iOS home-screen icons want 180x180 because phone screens have higher density. Android home-screen and PWA install need 192x192 and 512x512 for both standard and high-DPI displays. Older Windows shortcuts and tooling sometimes pull 48x48. Browsers also pick the closest size match for each context - serving only a 16x16 means a high-DPI display has to upscale and looks fuzzy. Multiple sizes give every device the sharpest version available.