Favicon Generator
Generate PNG favicon files at all standard sizes from any image — free, no upload.
Drop an image or click to browseAny aspect ratio — non-square images are fitted, not squashed. PNG transparency supported.
Generate favicons from any image — free
Favicons appear in browser tabs, bookmarks, and PWA home-screen icons. The standard sizes are 16×16, 32×32, and 48×48px for browsers; 128px for Chrome Web Store; and 192px for Android home screens. Favicons are square, so a non-square source has to be fitted: Contain keeps the whole image and letterboxes it, Coverfills the square and crops the edges, and the padding and background controls stop a wide logo from touching the icon's edges. For resizing to custom dimensions, use the Image Resizer.
Built and maintained by Meet Shah · Last updated
What this tool is used for
- Producing the standard PNG sizes a site needs from one source image.
- Generating icons for a web app manifest.
- Replacing an old favicon across every required size.
- Producing a set to compare at their real sizes before choosing.
- Getting the sizes a platform expects without looking them up.
Frequently Asked Questions
- Which sizes do I actually need?
- 16 and 32 cover browser tabs and bookmarks, 180 is the Apple touch icon, 192 and 512 are what a PWA manifest wants for Android home screens and splash. 48, 64 and 128 fill in Windows tiles and the Chrome Web Store. The generator emits all eight so the HTML you paste is complete.
- What happens to a logo that is not square?
- It gets fitted, not stretched. Contain keeps the whole image and letterboxes it; Cover fills the square and crops the overflowing edges. Stretching a 1000×500 wordmark into a square is the failure mode this tool was fixed to avoid — the result looked deliberate because the preview was squashed identically.
- Why does my detailed logo turn to mush at 16px?
- Because 16×16 is 256 pixels in total, and any stroke thinner than one pixel disappears into an averaged grey. Favicons are the one place to ship a simplified mark — a single letter or shape — rather than the full logo. Add padding so the shape does not touch the icon's edge.
- Do I still need an .ico file?
- Rarely. Every current browser accepts PNG through `<link rel="icon">`, and .ico only matters for very old IE and for the implicit `/favicon.ico` request a browser makes when no link tag is found. Serving a PNG at that path works in practice, since browsers sniff the content rather than trusting the extension.
- Why does my new favicon not appear?
- Favicon caching is unusually aggressive and separate from the normal page cache, so a hard refresh often does not touch it. Append a query string to the link's href, or open the icon URL directly to force a fetch. The tab is frequently the last place to update.
Common errors and gotchas
- Designing detail that disappears entirely at 16 pixels.
- Supplying one large image and letting it be downscaled, which loses legibility at the smallest size.
- Losing transparency, which shows as a box against a coloured tab.
- Omitting the maskable variant, which Android crops badly.
- Testing without clearing the cache and concluding the change did not apply.
Related Design & CSS tools
Color Converter
Convert a color to HEX, RGB, HSL, HSB, and CMYK at once.
HEX to RGB
Convert HEX color codes to RGB / RGBA values.
RGB to HEX
Convert RGB values into HEX color codes.
CSS Box Shadow Generator
Visually design CSS box-shadow with a live preview and code.
CSS Border Radius Generator
Visually craft border-radius with a live preview.
HEX to CMYK
Convert HEX colors to CMYK print values.
CMYK to HEX
Convert CMYK print values to HEX colors.
HEX to HSB
Convert HEX colors to HSB / HSV values.