What an image to favicon generator does
A favicon is not just your logo made smaller. Browsers, phones and search engines each ask for a square icon at a specific pixel size, and most of them ignore anything that is not exactly what they asked for. An image to favicon generator takes one picture and produces each of those squares, so you do not have to resize it six times in an image editor.
Three things happen to your image here:
- It is made square. “Fit whole image” scales it until the longer side fits and centres it; “Crop to fill” cuts the centre square out of it. Padding then adds an even margin.
- It is resampled in steps. Shrinking a 2000 px logo straight to 16 px skips most of its pixels and leaves jagged edges. The tool halves the image repeatedly first, which keeps curves and thin lines smoother at the small sizes.
- It is saved as PNG with the conventional file names. The names matter less to browsers than the HTML that points at them, but using the names every tutorial and plugin expects makes the files easy to drop into an existing setup.
Best image formats to upload
The format you upload only affects quality going in. Every download is PNG, because PNG is the one format every favicon consumer accepts, and the Apple touch icon must be PNG.
| Upload | Good for | Watch out for |
|---|---|---|
| SVG | Logos from a designer. Each size is drawn from the vector, so edges stay sharp. | Web fonts and external CSS are not loaded. Convert text to outlines first. |
| PNG | Logos and icons with a transparent background. | Screenshots of a logo usually include a white box and blurry edges. |
| WebP | Logos saved from a modern website; transparency is kept. | Lossy WebP adds faint blotches around sharp edges. |
| JPG | Photos and profile pictures. | No transparency, and compression noise is very visible at 16 px. |
If your only copy of the logo is a JPG on a white background, pick “Solid colour” and set it to white so the square looks intentional, or ask whoever made the logo for the PNG or SVG.
Three uploads and what to do with each
A 1000×1000 PNG app logo
Keep “Fit whole image” with 0% padding and a transparent background. Check the light and dark tab previews: a black logo on a transparent background disappears in a dark browser tab. If it does, switch the background to a solid colour, or add a light outline to the logo itself.
A 1200×300 horizontal wordmark
Fitted into a square, a 4:1 logo becomes a 16×4 px strip in the browser tab — unreadable. Crop to fill would cut the word in half. The fix is outside this tool: crop the source down to the symbol or first letter, or build a letter icon with the text favicon method, and keep the full wordmark for your site header.
A 3024×4032 phone photo of a person or product
Use “Crop to fill” so the centre square is kept. Expect the 16 and 32 px versions to be little more than a coloured blob: photos have no shapes simple enough to survive. That is acceptable for a personal site or portfolio, where the 180 and 192 px home-screen icons matter more than the tab.
Recommended favicon sizes
These are the six files this page generates, and the job each one does.
| File | Size | Requested by |
|---|---|---|
| favicon-16x16.png | 16×16 | Browser tabs on standard-density screens |
| favicon-32x32.png | 32×32 | Tabs on Retina and high-DPI screens; Windows taskbar |
| favicon-48x48.png | 48×48 | Windows site shortcuts; a sharper choice for Google Search, which recommends icons larger than 48 px |
| apple-touch-icon.png | 180×180 | iPhone and iPad “Add to Home Screen” |
| android-chrome-192x192.png | 192×192 | Android home screen, via the web manifest |
| android-chrome-512x512.png | 512×512 | Install prompts and splash screens for web apps |
Older lists add 57, 72, 96, 114, 144 and 152 px variants. Current devices downscale from the files above, so those extras only add clutter. The favicon sizes guide covers each size in more depth.
How to add the generated favicon to a website
- Unzip
favicons.zipand upload the files to your site root, so thathttps://yoursite.com/favicon-32x32.pngopens the icon. - Paste these tags inside the
<head>of every page (usually the shared layout or template):
<link rel="icon" href="/favicon.ico" sizes="32x32"> <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">
- Open the site in a private window. Browsers cache favicons far longer than pages, so a normal window may keep showing the old icon for days.
- The two Android icons are only used if a
site.webmanifestlists them. If you want Android and install support, the favicon package generator writes the manifest and the matching tag for you.
On Next.js, WordPress, Shopify or a site builder the steps differ — see how to add a favicon for each platform.
When the result does not look right
- The logo is tiny inside the square. The source has empty canvas around it. Trim the transparent edges in an editor, or use “Crop to fill” if the logo is roughly square.
- There is a white or grey box around it. The source is a JPG or a PNG without transparency. Re-export the logo with a transparent background, or make the box deliberate with a matching solid background colour.
- The 16 px icon is a smudge. Detail finer than one pixel cannot survive. Simplify: drop the tagline, thicken the strokes, or use just the initial. Some brands ship a simpler mark for 16 and 32 px and the full logo for 180 px and up.
- The large icons look soft. The source is smaller than the output. Upload the biggest original you have; an SVG avoids the problem completely.
- The icon still does not appear after uploading. Work through favicon not showing, or let the favicon checker test the live page.
Image to favicon FAQ
Can I use a JPG as a favicon?
You can upload a JPG here, but the files you download are PNG. JPG has no transparency, so a JPG logo always sits on a solid rectangle, and its compression smudges show up clearly at 16 px. If you have the logo as PNG or SVG, use that instead.
Does a WebP favicon work?
Chrome, Edge and Firefox display a WebP favicon, but the Apple touch icon must be PNG and many crawlers and older tools only read ICO or PNG. Upload the WebP here and ship the PNG and ICO output; there is nothing to gain from serving WebP for a 2 KB icon.
Should I choose “Fit whole image” or “Crop to fill”?
Fit keeps everything and is right for square logos and anything with text you cannot cut. Crop to fill is right for photos and for square-ish marks surrounded by empty canvas. For a wide wordmark neither works well: crop the source to the symbol or first letter before uploading.
Why does my icon have a white background on iPhone but not in the browser tab?
iOS turns transparent pixels in apple-touch-icon.png black, so this tool always fills the 180×180 icon with a solid colour: white by default, or the background colour you pick. The tab icons keep their transparency.
What is the smallest image I can upload?
Anything the browser can decode, but sizes above the source resolution are upscaled and look soft. A 512×512 source covers every file here; a 64×64 source is fine for the tab icons but not for the 180, 192 and 512 px icons.
Is my image uploaded anywhere?
No. The file is decoded and resized by your browser with the Canvas API. Nothing is sent to FaviconStudio, and closing the tab discards it.
Related tools and guides
- Favicon package generator — the same conversion plus
site.webmanifestand ready-made HTML. - Favicon ICO generator — only the
favicon.ico, with a preview of each layer. - SVG to favicon — for vector logos, including notes on SVG favicons and dark mode.
- ICO vs PNG vs SVG — which format each browser and device actually uses.
- Apple touch icon guide — padding and background for the iPhone home screen.