All Tools VerseFavicon Generator
Generate all favicon sizes from one image - 16/32/48/180/192/512 + Apple Touch + ZIP. Free, offline, client-side, instant and secure.
- Runs in your browser
- Nothing uploaded
- Free, no sign-up
Upload one square image. The tool renders six PNGs at the sizes
modern browsers actually use (16, 32, 48 for tabs; 180 for Apple
Touch; 192 and 512 for Android / PWA), generates the matching
<link> tags for your chosen path prefix, and
bundles everything into a single ZIP for one-click download.
Optional opaque background fill for icons that need to stand out
against a coloured browser tab.
Generated favicons
How to Use Favicon Generator
- Upload or drop a source image. PNG/JPG/SVG/WebP/GIF accepted, max 20 MB. Square at least 512 × 512 px works best - smaller sources are upscaled and lose sharpness at 192/512 px.
- Choose transparency. Checkbox on (default) preserves alpha - your icon shows the browser tab colour through any transparent pixels. Uncheck to fill transparent pixels with an opaque background colour (next field).
- Pick the background colour if you unchecked transparency. The colour input is disabled while transparent is on. Switching the checkbox triggers a re-render - the preview cards update immediately.
- Set the tag path prefix. Defaults to
/(favicon files in your site root). Use/icons/if you'll host them in a subfolder, or any other absolute or relative path. The<link>tags below regenerate as you type. - Read the stats line. Shows file count, total bytes, source dimensions, and the bg setting. Lets you sanity-check before downloading.
- Inspect the six preview cards. Each shows the actual pixel-rendered favicon on a checkerboard (so transparency is visible), the role label, filename, and per-file size. The
image-rendering: pixelatedCSS keeps 16/32 px crisp instead of letting the browser blur them on upscale. - Download the ZIP (or individual files). Download ZIP bundles all 6 PNGs plus a
link-tags.htmlwith the ready-to-paste tags. Ctrl/Cmd + Enter also triggers the ZIP. Or hit the per-card download buttons for individual files. - Paste the tags into
<head>and upload the files to the path you specified. Hard-refresh once (Ctrl/Cmd + Shift + R) to bust the browser favicon cache.
Frequently Asked Questions
Is my image uploaded anywhere?
No. All resizing happens in your browser via the Canvas API. The image is decoded from a FileReader data URL into an off-screen canvas, redrawn at each target size, and exported as a PNG blob – entirely client-side. No fetch, no XHR, no analytics. Works offline after the page loads.
What sizes does the tool generate?
Six: 16 × 16, 32 × 32, 48 × 48 (browser tabs / bookmarks / Windows shortcut), 180 × 180 (Apple Touch Icon for iOS Home Screen), 192 × 192 (Android Chrome / Web App Manifest), 512 × 512 (PWA splash / install icon). Those are the canonical recommended sizes; nothing else gets real platform use.
What format should my source image be?
Square PNG at 512 × 512 with a transparent background is the safe answer. SVG works and scales perfectly – but make sure the SVG renders correctly in a browser <img> (no referenced fonts, no external resources). JPG and GIF accepted but discouraged: JPG can’t represent transparency; GIF’s palette quantizes detail. WebP works the same as PNG.
What does the transparent checkbox actually do?
When checked (default), the rendering canvas is cleared with clearRect before draw – alpha pixels from the source survive. When unchecked, the canvas is filled with the colour from the colour picker before draw – alpha pixels show through as that opaque colour. Useful for browser-tab themes where transparent favicons would clash with the tab background.
Why does the ZIP say “store-only”?
The ZIP format supports compressed and uncompressed (stored) entries. Compression on already-compressed data (PNG, JPG) usually grows the file, not shrinks it. The encoder writes store-only entries – bytes go in verbatim plus a 30-byte local header – which keeps the ZIP small and the encoder itself tiny (no Deflate implementation required).
Can I use a non-square source image?
Yes, but it gets letterboxed. The drawer scales the image to fit inside the target square (preserving aspect ratio) and centres it. Empty areas are either transparent or the chosen background colour. For best visual results, crop your source to square before uploading.
How do I add the favicons to my site?
Unzip the download to your site (root, or wherever your path prefix points). Paste the <link> tags from link-tags.html inside your page’s <head>. The Copy button copies the same tags directly to your clipboard. Hard-refresh once to bust the browser cache – favicons are cached very aggressively.
Why do I need this many sizes?
Each platform picks the closest match: Windows taskbar wants 32 × 32, browser tabs want 16 × 16, iOS Home Screen wants 180 × 180, Android Home Screen wants 192 × 192, PWA install screens want 512 × 512. Provide them all and every surface renders sharply – provide only one and you get blurry upscales or jagged downsamples on most platforms.
What if my logo is detailed?
Detail dies below 32 × 32. A 16 × 16 favicon is 256 pixels total – there’s room for a single shape and maybe two colour regions, not a finished illustration. The preview cards let you see how legible your icon stays at 16 / 32 px. If it’s mush, simplify (a single glyph or monogram); a complex logo for the desktop and a simple mark for favicons is normal.
Related Tools
Favicon Checker →
Preview your favicon in browser-tab mockups (16, 32, 48, 180 px), check format and…
Add Background to Image →
Add background to images online for free. Change image background color. Fast, private, 100%…
Add Border to Image Online - Photo Frame Effect →
Add border to any image online. Upload photo, customize border, download. 100% private.
Add Image Effect Online - Apply Photo Effects →
Add effects to images online for free. Apply grayscale, sepia, vintage, and more. Fast,…
Add Noise to Image →
Add noise to images online for free. Apply grain effect to your photos. Fast,…
Add Rainbow Filter to Image →
Add rainbow filter to images online for free. Apply colorful rainbow effect to any…
Add Sepia Filter to Image - Vintage Photo Effect →
Add sepia filter to any image online. Upload your photo, apply vintage sepia effect,…
Add Stroke to Image →
Add stroke or border to images online for free. Create framed images easily.
Convert Add Symmetry to Image →
Mirror an image to create horizontal or vertical symmetry effects, preview the result, and…
Add Text to Image Online - Text on Photo →
Add text to images online for free. Overlay text on your photos. Fast, private,…
Add Watermark to Image →
Add watermark to images online for free. Overlay text watermark on your photos. Fast,…
Adjust Image Brightness Online - Brighten or Darken Photos →
Adjust image brightness online for free. Upload your photo, increase or decrease brightness, and…