Favicon Generator

A favicon generator helps you create the small icon shown in browser tabs, bookmarks, and mobile home screens—boosting brand recognition and polish.

Benefits of favicon generation

• Website branding: Create recognizable icons for your site.
• Multiple sizes: Generate icons for standard and Hi-DPI displays.
• Format support: ICO with several sizes embedded, PNGs beside it, and a vector kept as-is.
• Easy workflow: Drop a logo, choose how it sits in the square, download one ZIP.
• Professional results: Every size is averaged down from the full-resolution original, so nothing looks ragged at 16 px.

1. 1
   Bring in your artwork: Drop a logo — PNG, JPG, WebP, AVIF, GIF, BMP or SVG. No logo? Switch to Text and type one or two letters, or pick an emoji.
2. 2
   Choose how it sits in the square: Fit keeps the whole logo and pads the rest, Fill crops to the edges, Stretch ignores the shape. Add padding if Android will crop your icon, and round the corners if you want them round.
3. 3
   Set the backgrounds: Leave the icon transparent or give it a colour. Set the iPhone background separately — iOS has no transparency there and shows a see-through icon on black.
4. 4
   Name the site: The site name, short name and theme colour go into site.webmanifest and the theme-colour tag, which is what an install prompt reads.
5. 5
   Download and install: One press gives you a ZIP. Put every file in your site's root folder, then paste the copied link tags into your page's head.

Your logo is reduced to every icon size on your device, then written into favicon.ico, the PNG set, site.webmanifest, and the HTML that points at them.

Favicon generation process

• Loading: Your file is decoded once and held, so moving a setting never re-reads it.
• Framing: The logo is fitted, filled or stretched into a square, with your padding and corner rounding.
• Reduction: Every size is reduced from the original, never from the size above it, so none inherits another's softness.
• Platform plates: The iPhone icon is given an opaque background, because iOS shows a transparent one on black.
• Packaging: favicon.ico takes the 16, 32 and 48 entries; the PNGs, manifest and markup are written beside it.
• Output: One ZIP holding every file, each named the way the install steps expect.

• Icon sizes: PNG favicons at 16, 32, 48 and 96 px, a 180 px iPhone icon, and 192 and 512 px app icons.
• favicon.ico: One file carrying 16, 32 and 48 px entries, written so desktop browsers and Windows both read it.
• site.webmanifest: The manifest plus the two icon sizes an install prompt will not appear without.
• Markup: The link tags to paste into your head, ready to copy in one press.
• Platform packs: Windows Start tiles, Android launcher densities and vector passthrough with Pro.

Use it when launching a site, rebranding, supporting PWA installs, or matching platform icon guidelines.

Ideal use cases

• Web development: Ship favicon.ico alongside index.html.
• Brand consistency: Match tab icon to logo or mark.
• Mobile: Add apple-touch-icon and launcher sizes.
• Windows: Generate tile images for pinned sites.
• Client work: Deliver a full icon set in one pass.

Simple, high-contrast artwork reads best at 16×16. Start from at least a 512×512 square source when possible.

Key statistics

• 16×16 and 32×32 are the most common favicon dimensions.
• ICO can store multiple embedded bitmaps in one file.
• PNG favicons are flexible but need one file per size unless you zip them.
• Favicons appear in tabs, history, and bookmarks UI.
• High-quality sources reduce softness after downscaling.

Favor bold shapes, test in real browser tabs, and validate contrast on light and dark toolbars.

Quality considerations

• Use a sharp, square master image.
• Avoid tiny text or filigree that disappears at low resolution.
• Preview on both standard and Retina displays.
• Keep brand colors consistent with your site header.

When not to use

• Highly detailed photos that become a blur at 16×16.
• Very low-resolution sources.
• Art that relies on gradients thinner than a few pixels.
• Cases where you need vector/SVG-only delivery (use dedicated tooling).

Powered by optimised image processing algorithms.

• Image upscaler
• Metadata viewer
• Image converter
• Image compressor