Skip to main content

Favicon Generator

Generate favicons in all standard sizes (16x16 to 512x512) for websites and PWAs.

Reviewed by · Last reviewed

⭐

Drop an image here or click to upload

Use a square image for best results

How to Use the Favicon Generator

  1. Upload a square source image - ideally 512x512 or larger. PNG with a transparent background works best because each favicon size can sit cleanly on different browser theme colors.
  2. Preview all generated sizes. The tool produces 16x16, 32x32, 48x48, 180x180 (Apple Touch Icon), 192x192 (Android), and 512x512 (PWA splash) in one pass.
  3. Inspect each rendering. Because the source is downscaled for each target, subtle details disappear at 16x16 - this preview is where you find out whether your logo reads at thumbnail sizes.
  4. Download individual PNGs by clicking each size tile, or use "Download All" for a single ZIP.
  5. Add the recommended HTML tags shown below the previews to your <head>. They point to the generated files and include the right rel values for each platform.

What the Tool Generates

Each output size comes from a separate downscale pass on your source image. We draw the source onto a canvas sized exactly to the target dimensions using ctx.drawImage with imageSmoothingQuality = "high", which triggers the browser\'s bilinear or bicubic resampling (engine-dependent). The resulting canvas is exported via canvas.toBlob("image/png"), producing six separate PNG files with identical pixel content at their native resolutions.

Historically, favicons used the Windows ICO container (a proprietary multi-resolution bundle) served as favicon.ico. Modern browsers accept PNG favicons directly and even prefer them, so the tool outputs PNGs rather than ICO files. Chromium-based browsers, Firefox, and Safari all honor <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"> and pick the correct size automatically. For maximum backward compatibility with legacy browsers (IE11 and older), you can still serve a favicon.ico at the domain root alongside the PNGs - the browser will use whichever it prefers.

Where Each Size Goes

  • 16x16 and 32x32 are the classic browser-tab favicons. 32x32 is used on retina/HiDPI displays; 16x16 on standard-density screens.
  • 48x48 is the Windows site icon, shown on the Start menu and in some task-bar contexts when users pin a web app.
  • 180x180 is Apple\'s Touch Icon for when iOS and iPadOS users add your site to the home screen. The iOS launcher rounds the corners automatically.
  • 192x192 is the Android Chrome icon for home screen shortcuts and referenced in the PWA Web App Manifest (manifest.webmanifest).
  • 512x512 is the PWA splash screen asset, shown during app launch on Android and used by app store listing screenshots for PWAs.

Design Pitfalls at Favicon Sizes

  • Fine detail disappears at 16x16. A logo with thin strokes, a tagline, or multiple elements becomes mush. Design with the smallest size as the constraint: bold, centered, silhouetted.
  • Gradients and shadows muddy at small sizes. Flat colors reproduce cleanly across all sizes; gradients anti-alias unpredictably.
  • Transparent backgrounds behave differently per browser. Chrome tabs are white; Safari dark-mode tabs are dark; Edge themes vary. Test a transparent favicon against multiple tab backgrounds or use a solid background matched to your brand.
  • Apple Touch Icon should NOT be transparent. iOS composites a transparent Apple Touch Icon onto a solid background of its own choosing, which often clashes with a brand. Use a solid background for 180x180 specifically.
  • Multiple PWA maskable variants. The PWA spec defines a "maskable" icon with a safe zone in the middle 80% of the image. Android may crop your 192x192 into a circle, squircle, or teardrop depending on launcher. Design with 10% padding around the main shape.

Why There Are So Many Favicon Sizes

The favicon started as a Microsoft innovation in 1999: drop a favicon.ico at the domain root and IE5 would show it in the address bar. The ICO container format bundled multiple resolutions in one file so the browser could pick based on the UI context. As Safari, Firefox, and Chrome adopted the idea, each added their own sizes and conventions. Apple added the 57x57 "Touch Icon" for iOS home-screen shortcuts in 2007 (later scaled to 180x180 for retina), Android added the 192x192 manifest icon in Chrome 39 (2014), Windows tile icons went through a messy history of 128x128, 144x144, and 310x310 before settling, and the PWA Web App Manifest (W3C Working Draft, now Candidate Recommendation) standardized the 192 and 512 sizes for installable web apps. Today the minimum viable set is 32x32, 180x180, and 512x512, but the broader set in this tool covers every context you will encounter in 2026 browsers.

How This Compares to Dedicated Services

Realfavicongenerator.net is the most thorough favicon service on the web: it generates 20+ sizes including Windows Tiles, Safari pinned tab SVG, and per-platform manifest JSON fragments. It also renders previews of how the favicon looks in each platform\'s actual UI. The tradeoff is that it uploads your image to their servers, which matters if the logo is pre-release. This tool generates the six most useful sizes locally, covering 99% of real-world needs with zero privacy risk. For Photoshop-native workflows, Photoshop\'s Export As with multiple scale factors handles this directly. On the CLI, ImageMagick\'s magick logo.png -resize 32x32 favicon-32x32.png repeated across sizes works great for scripting. Use this tool when privacy matters and you want the common set fast; step up to realfavicongenerator for exhaustive platform coverage including browser preview testing.

Frequently Asked Questions

Does the tool upload my logo to any server?

No. Each size is generated by drawing the source image onto a local canvas at the target dimensions and exporting via <code>canvas.toBlob</code>. Neither the source nor the generated sizes are sent anywhere. You can verify in DevTools by watching the Network panel stay empty during generation. The ZIP download assembles the files locally too.

What source image size should I upload?

Ideally 512x512 or larger, and strictly square. Anything below 512x512 will be upscaled for the PWA 512 size, which softens the image. Using 1024x1024 gives a safety margin but makes no difference for sizes 512 and below. PNG with transparency works best as a source because you get the most flexibility when the browser places the icon against different background colors.

Should my source logo have transparency?

For the browser tab favicons (16, 32, 48), yes - transparency lets your icon adapt to light and dark tab backgrounds. For the Apple Touch Icon (180x180), no - iOS composites transparent Apple Touch Icons onto a background of its choosing, often producing an ugly clash. The ideal is to generate separate source files for the tab sizes (transparent) and the touch icon (solid background), but for most brands a single transparent source works acceptably.

Do I need all six sizes?

No. The modern minimum is 32x32 (browser tab), 180x180 (Apple Touch Icon), and 512x512 (PWA and social previews). The 16x16 is useful on non-retina displays, 48x48 targets Windows, and 192x192 is the Android Chrome home-screen shortcut. If you are not building a PWA and do not care about specific OS icons, 32 and 180 covers 90% of users.

Why does my 16x16 favicon look terrible?

Bilinear downscaling of a detailed logo from 512x512 to 16x16 throws away almost all of the information. The fix is to design a specific 16x16-and-32x32 variant of your logo: simpler, higher contrast, often a bolder letter or a single motif instead of the full wordmark. Replace the generated tiny sizes with your hand-crafted versions before uploading to production.

How do I install the favicons on my site?

Copy all six PNGs to your domain root (e.g., <code>/favicon-32x32.png</code>). Add these tags to your HTML head: <code>&lt;link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"&gt;</code>, <code>&lt;link rel="apple-touch-icon" sizes="180x180" href="/favicon-180x180.png"&gt;</code>, and for PWAs reference the 192 and 512 in your <code>manifest.webmanifest</code> under the <code>icons</code> array.

Do I still need a favicon.ico file?

For modern browsers, no - PNG favicons are universally supported. For IE11 and some legacy corporate browsers, yes. The common pattern is: serve PNG favicons via link tags for modern browsers, and put a single <code>favicon.ico</code> at your domain root as a fallback that legacy browsers auto-discover without any HTML. ImageMagick can create a multi-resolution ICO from your PNGs with <code>magick favicon-16x16.png favicon-32x32.png favicon.ico</code>.

What is a "maskable" icon and do I need one?

Maskable icons are a PWA refinement defined in the Web App Manifest spec: Android launchers crop your icon into different shapes (circle, squircle, teardrop, rounded square) depending on user theme, so the icon needs its essential content in the middle 80% with safe padding around. This tool generates standard icons; for maskable variants, add 10-15% padding around your logo before uploading. Mark the manifest entry <code>"purpose": "maskable"</code>.

Why does my PWA icon look blurry on a high-DPI Android?

The 192x192 is what Android uses for most launcher icons, but on a 3x-density phone (many flagships) the launcher may request the 512x512 and scale it down. The tool already generates 512x512, so reference both in your manifest - Android picks the best match. If your source image was smaller than 512x512 originally, the 512 output was upscaled and will look soft no matter what.

How is this different from realfavicongenerator.net?

Realfavicongenerator is more thorough - it generates Windows Tile sizes, Safari pinned-tab SVG, mask SVG, and per-platform HTML and manifest fragments with previews of how your icon looks on each platform's actual UI. It uploads your image to do this. This tool generates the six sizes that cover 99% of real use cases, fully locally, in under a second. Use this for quick private generation; use realfavicongenerator when you want exhaustive platform coverage and live previews.

More Image Tools

Base64 to Image Converter

Decode a Base64 string or data URL back into a viewable image and download it as PNG, JPG, WebP or GIF. Runs in your browser.

Open tool

Image Blur & Pixelate

Apply blur or pixelation effects to images with adjustable intensity.

Open tool

Image Color Picker

Upload an image and pick colors in HEX, RGB, and HSL with a visual color history.

Open tool

Image Compressor

Compress images by adjusting quality to reduce file size without losing visual clarity.

Open tool

Image Cropper

Crop images with preset aspect ratios like 1:1, 16:9, and 4:3 using a visual editor.

Open tool

Image Flip & Rotate

Flip images horizontally or vertically and rotate by 90, 180, or 270 degrees.

Open tool