Favicon Generator — How to Create Website Icons for Every Browser

A favicon is the small icon that appears in browser tabs, bookmarks, mobile home screens, and search results next to your site name. It's one of the first things people notice about a website — not because they're looking for it, but because its absence is obvious. A missing favicon signals "this site isn't finished," and a blurry one signals "this site doesn't care about details."

The problem is that "a favicon" is actually six different files at six different sizes for six different contexts. Browser tabs need 16×16 and 32×32. Browser toolbars want 48×48. iOS home screens require a 180×180 Apple Touch Icon. Android and PWA apps need 192×192 and 512×512. Plus an ICO file that bundles multiple sizes for legacy support. The Favicon Generator creates all of them from a single source image.

Every Size and Why It Exists

16×16 pixels — the classic browser tab icon. This is what people see next to your page title in their browser. At 16 pixels, there's almost no room for detail. Simple shapes, bold colors, and high contrast are essential. If your icon has thin lines or small text, they'll disappear at this size.

32×32 pixels — used in browser tab displays on high-DPI (Retina) screens, Windows taskbar shortcuts, and some bookmark views. Twice the resolution of 16×16, so slightly more detail is possible, but the icon is still displayed very small. This is also the size used when someone drags your tab to create a desktop shortcut on Windows.

48×48 pixels — browser toolbar and Windows desktop icons. Less commonly referenced directly, but included in the ICO bundle for completeness.

180×180 pixels (Apple Touch Icon) — the icon shown when someone adds your site to their iPhone or iPad home screen. This is a significant jump in size and visibility. At 180 pixels, your icon needs to look good as a standalone app icon alongside native apps. Rounded corners are applied automatically by iOS — don't add them yourself.

192×192 pixels — Android Chrome uses this for home screen shortcuts and the "Add to Home Screen" prompt. Referenced in the site.webmanifest file.

512×512 pixels — the PWA (Progressive Web App) splash screen icon. When a user launches your web app from their home screen, this icon appears during loading. It's the largest favicon size and the one where image quality matters most. Also used by some app stores and directories.

Preparing Your Source Image

The generator scales your source image down to each target size. Starting with a large, clean source produces the best results. A few things to get right before uploading.

Square format. Favicons are square. If your source is rectangular, it will be squished. Use the Image Cropper to crop to 1:1 before generating. If your logo is a horizontal wordmark, use just the icon portion or a single letter.

512 pixels minimum. The largest favicon size is 512×512, so your source should be at least that large. Scaling up a 64×64 icon to 512×512 produces a blurry mess. If you only have a small source, consider recreating it as SVG — SVG inputs scale perfectly to any size. You can also convert an SVG to PNG at any resolution using the SVG to PNG tool. The Quality Analyzer can tell you whether your source has enough resolution.

Simple design. Remember that this icon will be displayed at 16×16 pixels. Fine details, thin lines, small text, and subtle gradients all vanish at that scale. The most effective favicons are simple: a bold letter, a geometric shape, a recognizable icon with strong contrast. Look at the favicons of sites you visit daily — most are one or two colors with a single shape.

Transparent background (optional). PNG sources with transparency work well — the transparent areas will be preserved in the PNG outputs. The ICO file also supports transparency. For Apple Touch Icons, iOS fills transparent areas with white, so if your icon has a transparent background, it will appear on a white square on iOS home screens. Consider adding a solid background for the Apple Touch variant.

From Upload to Deployment

The workflow is straightforward: upload an image, generate all sizes, download the ZIP, add the files and code to your site.

Step 1: Upload. Drop your source image into the Favicon Generator. Any image format works — PNG, JPG, WebP, SVG, even GIF. Square images produce the best results. The tool shows a preview and warns you if the source is too small or not square.

Step 2: Generate. Click "Generate All Sizes." The tool creates six PNG files (16, 32, 48, 180, 192, 512) plus a multi-resolution ICO file — all in the browser using the Canvas API. Nothing is uploaded to any server.

Step 3: Download. Download the ZIP file containing all icons. You also get two code snippets: the HTML link tags for your page head, and a site.webmanifest file for Android and PWA support.

Step 4: Deploy. Extract the ZIP contents to your website's root directory (or an /assets/favicon/ subfolder — just update the paths in the HTML snippet). Paste the HTML link tags into your page's head section. Place the site.webmanifest file where the HTML snippet points to. Deploy and test.

The ICO File Question

In 2026, you might wonder if the ICO format is still necessary. The short answer: yes, include it.

Modern browsers prefer PNG favicons referenced via HTML link tags — they offer better compression, transparency support, and flexibility. But the ICO file at /favicon.ico remains the universal fallback. When a browser, RSS reader, bookmark manager, or crawler can't find a favicon in the HTML, it checks the site root for favicon.ico. Some older browsers use it exclusively.

The ICO format isn't just one image — it's a container that bundles multiple sizes (16, 32, and 48 pixels in a single file). Browsers pick the most appropriate size from the bundle. The generator creates this multi-resolution ICO automatically from your source image.

Including both PNG link tags and an ICO fallback covers every browser, device, and application that might display your icon. The total file size for all favicon files combined is typically under 50KB — negligible cost for universal compatibility.

Common Mistakes

Non-square source. Uploading a rectangular logo and getting a squished icon. Crop to square first — use the lettermark or icon portion of your logo, not the full wordmark.

Too much detail. A beautifully detailed logo at 512px that turns into an unrecognizable blob at 16px. Simplify for the smallest size. Some brands use a separate, simplified favicon design distinct from their main logo.

Wrong file paths. The HTML snippet assumes files are in the root directory. If you put them in /assets/favicon/ or another subfolder, update every path in the link tags. A broken path means no icon.

Browser cache. After deploying a new favicon, you and your users might still see the old one. Browsers aggressively cache favicons. Hard-refresh (Ctrl+Shift+R) clears the current page, but bookmark icons may take longer to update. Adding a version query string (?v=2) to favicon URLs can help force cache invalidation.

Missing webmanifest. Without site.webmanifest, Android Chrome can't find the 192 and 512 pixel icons for home screen shortcuts and PWA splash screens. The generator provides the manifest content — just save it as a file and reference it in your HTML.

Testing Your Favicon

After deployment, verify the favicon works across contexts. Open your site in a browser and check the tab icon — it should be sharp and recognizable. Bookmark the page and confirm the bookmark icon matches. On an iPhone, use "Add to Home Screen" from Safari and check the Apple Touch Icon. On Android, do the same from Chrome.

If the tab icon shows but the Apple Touch Icon doesn't, the 180×180 file is missing or the HTML link tag path is wrong. If nothing shows, check that favicon.ico is accessible at your-domain.com/favicon.ico. The OG Image Previewer can verify your social sharing meta tags and images while you're at it — it's a good checkpoint for overall meta setup.

For comparing your favicon at different sizes side by side, download individual size files and view them with the Image Resizer to see how your icon holds up at each dimension. If the 16×16 version is unreadable, you may need a simpler design for the smallest sizes.

Common Questions

Can I use a non-square image? Technically yes, but the result will be distorted. Favicons are always displayed as squares. Crop your source to 1:1 first with the Image Cropper.

Do I still need favicon.ico? Yes. Modern browsers prefer PNG via HTML link tags, but the ICO file at the site root is the universal fallback for older browsers, RSS readers, and bookmark managers.

What's the minimum source size? 512×512 pixels. The largest favicon output is 512px, so smaller sources get upscaled and blurry. SVG sources work at any size since they're resolution-independent.

How do I test if it's working? Check the browser tab, bookmark the page, and add it to a mobile home screen. Hard-refresh (Ctrl+Shift+R) if you see a cached old icon. Common issues: wrong file paths in HTML, missing webmanifest, or browser cache.

Sixteen Pixels That Represent Your Entire Site

A favicon is the smallest piece of your brand identity and one of the most visible. It sits in browser tabs for hours while people work, appears in bookmark lists they scan daily, and shows up on mobile home screens right next to native apps. Getting it right means starting with a clean source image, generating every size the ecosystem demands, and deploying the files with the correct HTML and manifest references. The Favicon Generator handles the generation in your browser — you handle the design and the deployment.