Favicon Generator: One Image to a Full Icon Set

A favicon generator turns a single square image into every icon file a website needs: seven PNG sizes, a genuine multi-size favicon.ico, a site.webmanifest, and a snippet of HTML to paste into your ``. Upload one JPG, PNG, GIF, WebP, AVIF or BMP up to 5 MB, choose how it should fill the square, and download the whole set as one ZIP.

The alternative is exporting sizes by hand and hoping the .ico is correct. It usually is not: many converters produce a single-size icon renamed to .ico, and some browsers then ignore it or fall back to a blurry default. This tool builds the ICO properly with three embedded sizes, which is why the result works in tabs, bookmarks and older browsers without extra files.

#What is in the ZIP

The manifest is a starting point, not a finished configuration. It sets name and short_name to "Your Site", theme_color to #4f46e5, background_color to #ffffff, and display to standalone. Edit the name and colours to match your site before deploying.

The tags file contains five lines:

<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

Those paths assume the files sit in your site root. If you put them in /assets/icons/, update every href and the manifest icon src values to match.

#How to generate a favicon set

1. Open the favicon generator.
2. Upload one image. A square PNG of at least 512 × 512 pixels gives the sharpest result.
3. Choose a fit mode: fit inside, fill and crop, or stretch to square.
4. Press Generate. The server builds each size from the original and packages the ZIP.
5. Download the ZIP and extract it into your site root.
6. Paste the tags from favicon-tags.html into your ``.
7. Edit the name and colours in site.webmanifest, then hard-refresh the site to check the tab icon.

Browsers cache favicons aggressively. If the new icon does not appear immediately, open the site in a private window or clear the favicon cache rather than assuming the files are wrong.

#Fit, fill or stretch

Fit is the safe default because nothing is cut off. A wide logo will end up smaller with transparent space above and below, which can look weak at 16 pixels. Fill uses the available space but trims the sides of a wide image. Stretch keeps every pixel but distorts anything that is not already square.

For a wordmark, fit is usually right. For a square badge or app icon, all three modes give the same result because the source is already square. If the source is not square and cropping is acceptable, a deliberate crop with the image cropper gives you more control than the automatic fill.

#Why so many sizes

A favicon is not one file. Different platforms ask for different shapes and sizes:

• 16 × 16 is the classic tab icon and the hardest to get right. Detail disappears; a simple shape survives.
• 32 × 32 is the common high-density tab icon and the one most desktop browsers actually show.
• 48 × 48 covers Windows shortcuts and some older surfaces.
• 180 × 180 is the iOS home-screen icon, which is displayed on a rounded square.
• 192 × 192 and 512 × 512 are required for Android home screens and progressive web app install prompts.

The .ico file carries 16, 32 and 48 pixel versions in one container. A browser picks the size it needs, which is why a real multi-size ICO is more reliable than a renamed PNG.

#Common problems and fixes

The icon looks blurry. The source was probably smaller than the requested size, so the larger icons were upscaled. Use a square image of at least 512 × 512 pixels, ideally a simple design that survives at 16 pixels.

The icon is cut off. The mode is filling and cropping. Switch to fit inside, or crop the source deliberately before uploading.

The icon is stretched. The mode is stretch. Choose fit or fill instead, or supply a square source.

The old icon is still showing. Browser caching. Try a private window, a hard refresh, or clear the favicon cache. On a live site, a versioned path or a new filename can force a refresh.

The icon does not appear at all. Check that the files are in the path the tags point to, and that the tags are inside ``. A 404 on favicon.ico is the usual cause.

The ICO looks different from the PNGs. The ICO contains 16, 32 and 48 pixel frames generated from the same source. Small sizes simplify detail, so some difference is expected.

An animated GIF only shows one frame. The generator uses the first frame. Animation is not supported in favicons on any mainstream platform.

EXIF or colour profile issues. The source is processed through Imagick and metadata is stripped, so embedded profiles do not carry over. Check the colours on a calibrated display if exact brand colour matters.

#Tips for a favicon that holds up

• Design for 16 pixels first. A detailed logo becomes a smudge. Test a simplified mark with strong contrast.
• Use a square source. It removes the mode decision and keeps the composition under your control.
• Leave a margin. Icons that touch the edge look cramped in a tab. A little padding reads better.
• Check both light and dark browser themes. A dark icon can vanish on a dark tab bar. A subtle outline or a light background helps.
• Keep the source file. You will want to regenerate when brand colours change. Start from the layered original, not a screenshot.
• Compress only if the upload is rejected. The limit is 5 MB, and icon sources are usually far below it. If you need to shrink one, the Image Compressor can do it without touching the dimensions.
• Match the manifest to the brand. The generated theme_color and background_color are placeholders. Set them to your actual palette.
• Do not rely on the ICO alone. Modern browsers prefer the PNG tags. Keep both.

#After you deploy

Clear the cache and check the tab, a bookmark, and a phone home screen. The tab icon is the one most people see, and it is also the smallest, so it is the real test. If the mark is unreadable at 16 pixels, simplify it and regenerate rather than accepting a blurry icon.

The manifest matters for installability. If the site is a PWA, the 192 and 512 icons are part of the install criteria, and a missing or misnamed file can stop the install prompt from appearing. Copy the files to the root as named, or update the manifest paths.

#Frequently asked questions

#Bottom line

One good square source is enough to produce every icon a site needs, including a proper multi-size ICO and a manifest. Choose fit for logos, fill for photos, and keep the design simple enough to read at 16 pixels. Start with the favicon generator, paste the tags, edit the manifest, and check the tab in a private window before you call it done.