Favicon Generator that builds every size from one image
Add an image on the left and pick the sizes you need; previews appear on the right immediately. There is no generate button to press, and you also get a multi-size favicon.ico plus the head code to paste. Your image never leaves the browser.
Add an image
Drop an image here
PNG · JPG · WEBP · SVG · a near-square source works best
Sizes to build
Options
Generated set
- Source
- —
- Sizes selected
- —
- Files built
- —
- Total size
- —
Showing a sample image. Add your own and it takes over right away.
Code to paste into head
Everything is generated inside your browser on a canvas. Images are never uploaded, and the favicon.ico packs 16, 32 and 48 pixel versions into one file so the browser can pick the right one.
ready to use.
- Visible firstKeep the input and result positions clear.
- Results firstPut the main number up front and keep the process secondary.
- Less to askNo sign-up or extra information before using the tool.
How to use the favicon generator
A favicon is the small mark that stands in for your site in browser tabs, bookmark lists and home-screen shortcuts. It looks like something you can just shrink, but it has to stay readable at 16 pixels and still look sharp on a 512 pixel home screen, which is why separate sizes are worth preparing.
This favicon generator takes one image, builds thirteen sizes at once, and also produces the multi-size favicon.ico that browsers actually look for plus the HTML you paste into head. Everything runs inside the browser, so your source logo never leaves the machine.
Where favicons actually appear
The same artwork lands in several places at different sizes. Knowing the destinations tells you which sizes are worth keeping.
- Browser tabs and the address bar — 16 and 32 pixels are what people really see
- Bookmark lists and history — 32 and 48 pixels
- iOS home-screen shortcuts — 152, 167 and 180 pixels
- Android home screens and installed PWAs — 192 and 512 pixels
- Search result icons — multiples of 48 pixels are recommended
How this tool handles your image
When you pick a file the browser reads it into memory, paints it on a canvas, and redraws it once per selected size before exporting PNG. There is no upload step, so it responds instantly and the original file is untouched.
- Changing a size or option refreshes the previews with no button to press
- Each size is drawn straight from the source, so no intermediate step costs quality
- Redrawing drops metadata such as camera and authoring information
Follow the screen in order
The left column holds input and settings, the right column holds the result. One pass from top to bottom is enough.
- Drop an image on the left panel or press Choose file
- Switch off any size chips you do not need
- Turn on auto-crop for non-square art, or padding when the logo touches the edge
- Pick PNG, ICO or both as the output format
- Save favicon.ico or a ZIP, then copy the head code below the previews
Why favicon.ico should hold several sizes
ICO is a container format that can store multiple resolutions in one file. Browsers and operating systems choose whichever size fits the slot, so an ICO holding only 16 pixels turns soft wherever something larger is needed.
- The favicon.ico built here packs 16, 32 and 48 pixels into one file
- Placed at the site root it is found automatically with no declaration
- Large icons belong in PNG referenced from head rather than inside the ICO
When to use PNG and when to use ICO
The two formats are not competitors; they cover different consumers. Most sites ship both.
- PNG — the default for modern browsers and mobile home screens
- ICO — older browsers and Windows contexts look for a root favicon.ico first
- Building PNG + ICO together means no client ends up with a blank icon
Choosing a source image
Shrink something far enough and only shape and contrast survive. A busy source turns to mush at 16 pixels.
- Start from a near-square image of at least 512 pixels
- If it contains type, keep it to one or two characters
- Hairlines and gradients disappear at small sizes
- A transparent PNG is safer when the destination background is unknown
Where the head snippet goes
Upload the generated files to your site, then paste the code shown on the right inside the HTML head. Adjust the paths to match where you actually put the files.
- link rel="icon" points at the browser tab icon
- link rel="apple-touch-icon" covers the iOS home screen
- The icons array in manifest.json drives Android and PWA install icons
- favicon.ico at the root is discovered automatically without a declaration
A worked example
Say you have a 1024 pixel square logo and want a normal website set. The minimum useful selection looks like this.
- Keep 16, 32 and 48 on and save favicon.ico
- Keep 180 on to produce apple-touch-icon.png
- Keep 192 and 512 on for the PWA icons
- Download the all ZIP, unpack it at the site root and paste the head code
Common mistakes
Favicons are cached aggressively, which makes changes hard to confirm. These four cover most cases.
- The old icon persists — clear the browser and CDN cache and hard reload
- It turns to mush at 16 pixels — the source is too detailed, simplify the shape
- Only the home-screen icon is clipped — turn on padding for a safe area
- Transparency renders black — check that you exported the PNG entries
Check before you ship
Walking this list right before deployment saves a round trip.
- Is favicon.ico at the site root?
- Do the paths in the head code match where the files actually live?
- Does the 180 pixel icon survive iOS corner rounding?
- Are 192 and 512 registered in the manifest?
- Is the shape still readable at 16 pixels in a real tab?
Frequently asked questions
Is my image uploaded to a server?
No. Every step from picking the file to saving happens inside the browser on your own device. Your source logo never leaves the machine, so unreleased artwork is safe to work with here.
What kind of source should I prepare?
A near-square PNG of at least 512 pixels is safest. If the aspect ratio differs, auto-crop takes the centre. Starting from something small means the large sizes will look soft, so prepare a generous original.
Where does favicon.ico belong?
At the site root, directly under the domain. Placed there it is found automatically without anything in head. If you keep it elsewhere you have to point at it explicitly.
I replaced the favicon but the old one still shows.
Favicons are cached unusually hard. Hard reload first; if it persists, add a version to the filename or purge the CDN. Closing and reopening the tab often is not enough.
Is transparency preserved?
Yes for PNG, and also for the ICO here because it stores PNG data. Do check a real tab in dark mode though, since a dark logo on a dark tab strip can disappear.
What happens to a non-square image?
With auto-crop on, the centre is cut using the shorter edge. With it off, the image is fitted inside a square and the remaining area stays transparent. A wide logo usually looks better if you crop it deliberately first.
When should I turn padding on?
When the logo runs to the edge of the square. Environments that round icon corners, such as the iOS home screen, will clip those edges; a 5% margin creates a safe area.
Which sizes does a PWA need?
192 and 512 pixels are effectively required. Build both and register them in the manifest icons array so the Android install icon and splash screen render correctly. 512 also serves as the maskable source.
Can I produce an SVG favicon?
You can upload an SVG source and convert it to PNG at each size, but the tool does not emit vector output. To ship an SVG favicon, reference the original SVG in head and keep the ICO and PNG files from here as the fallback for older browsers.
References
Official documentation for icon declarations and size conventions.