Drop files here, or click to browse
PNG, JPG, or SVG · Square images recommended
How to use
01
Upload your logo
Drop in a PNG, JPG, or SVG up to 10 MB. Square images work best because every favicon is square; SVGs are rasterized to PNG during generation.
02
Generate the pack
Press Generate favicon pack. The tool renders your logo at ten sizes, 16, 32, 48, 64, 96, 128, 180, 192, 256, and 512 pixels, entirely on a local canvas.
03
Install the ZIP
Unzip favicon-pack.zip into your site's /public folder. The included README.txt lists every file, and the sample site.webmanifest wires up the 192 and 512 icons for PWAs.
Why Favicon Generator
- Generates 10 favicon sizes from one upload.
- Includes a sample site.webmanifest.
- 100% client-side, your logo never leaves your browser.
Common questions
What favicon sizes does the generator produce, and who uses them?
You get 16 and 32 for browser tabs and bookmarks, 48 and 64 for Windows shortcuts, 96 and 128 for desktop and web app grids, 180 for the apple-touch-icon, 192 and 512 for Android home screens and PWA manifests, and 256 as a general high-density fallback. One upload covers all of them.
Can it build a favicon from image files that aren't square?
It will run, but the canvas scales the upload to a square, so a rectangular logo gets stretched. Crop to a square first with the Image Cropper, or export a centered square version of the logo, then generate the favicon from image data that's already 1:1.
Does this favicon generator output a .ico file?
No, the pack is all PNG plus a webmanifest, which every modern browser accepts via link tags with a sizes attribute. If you need a legacy favicon.ico for very old browsers or certain crawlers, run one of the PNGs through the ICO Converter tool afterwards.
Why does a favicon all sizes generator bother with 512x512?
The 512 pixel icon is what Android and PWA install flows use for splash screens and app listings, where a small icon would look soft. Browsers only pull it when needed, so shipping it costs nothing on normal page loads.
How do I reference the generated favicons in my HTML?
Place the files at your site root or /public, then add link tags: rel='icon' with sizes='16x16' and '32x32', rel='apple-touch-icon' pointing at the 180 file, and a rel='manifest' link to site.webmanifest. The README in the ZIP lists the exact filenames to reference.
Is my logo uploaded when I create favicon online here?
No. Resizing happens with the canvas API in your browser, and the ZIP is assembled locally with JSZip before download. The logo file never touches a server, which matters if you're preparing icons for an unreleased product.
What kind of logo survives the 16 pixel favicon size?
Simple shapes with strong contrast. Fine strokes, small text, and gradients all disappear at 16x16. Start from a source image of at least 512 pixels, favor a bold monogram or symbol over a full wordmark, and check the smallest PNG in the pack before shipping.