Web assets
Favicon generator
Upload a square image (transparent PNG or SVG ≥ 512×512 works best) and download a complete favicon pack with 9 PNG sizes plus an Apple Touch icon — all generated in your browser.
How this tool handles files
- Processing
- In your browser, on-device
- Storage
- Nothing stored
- Output
- A file you download
- Your responsibility
- Review before official use
- Runs in your browser. Your file is processed on your own device and, on this site, is not uploaded to our servers.
- Nothing is stored. Your file and its output are gone the moment you close or reload the page.
- Review sensitive files (bank, ID, medical) and check the output before sharing it.
Every tool on FormatOS runs in your browser. Read our Privacy Policy and File Handling Policy.
What's in the pack
- Nine PNG sizes for browsers and PWAs (16, 32, 48, 64, 96, 128, 180, 192, 512).
- An Apple Touch icon (180×180) for iOS home screen bookmarks.
- A README with a copy-pasteable <link> snippet for your site head.
What a favicon pack actually needs
A favicon is the small icon a browser shows in the tab, the bookmarks bar, and the history list. Modern sites do not ship a single icon — different surfaces ask for different pixel dimensions, and a blurry or missing icon makes a site look unfinished. This tool takes one square source image and renders the full ladder of sizes at once, so you do not have to resize nine images by hand in a graphics editor.
The pack contains nine PNG sizes: 16 and 32 are the classic browser-tab and bookmark icons; 48, 64, 96, and 128 cover higher-density displays and a few legacy contexts; 180 is the Apple Touch icon iOS uses when someone adds your site to their home screen; and 192 and 512 are the sizes a Progressive Web App (PWA) manifest references for the install prompt and splash screen. A copy of the 180 image is also saved as apple-touch-icon.png, the filename Safari looks for.
Reach for this tool when you are launching a website, theme, or web app and need icons that look crisp everywhere. It is not a logo designer — it scales whatever you give it. If the source is a busy, detailed image, the 16 and 32 versions will look muddy, because there simply are not enough pixels to hold detail at that size.
Pick the right source image
Start from a square image at least 512×512 so the largest size is generated by downscaling, never by stretching a small image up. A transparent PNG or an SVG gives the cleanest result; SVG is rasterized to PNG at each size during export. If your source is not square, it is drawn centered and the icon may look off-balance, so crop it to a square first with the Crop tool.
Design for the smallest size, not the largest. At 16×16 a full wordmark is unreadable — a single bold letter, a simple mark, or a high-contrast symbol survives the shrink. Keep generous internal padding and avoid thin strokes, fine gradients, and tiny text. A shape that fills the canvas edge to edge reads far better in a crowded tab strip than a small mark floating in whitespace.
The output is always PNG, which keeps transparency. If your icon has rounded or transparent corners, they are preserved across every size. There is no .ico file in this pack — current browsers accept PNG favicons through the markup below, so a separate .ico is no longer required for general use.
Wiring it into your site
Unzip the pack and drop the PNGs into the root of your site or your framework's public/static folder, then add the link tags to the <head> of every page. The included favicon-readme.txt has the exact snippet, which looks like this: <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png" />, <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />, plus matching lines for the 16, 48, 192, and 512 sizes. Adjust the href paths if your assets live in a subfolder.
For a PWA, the 192 and 512 PNGs are the two icons a web app manifest expects. This tool does not write the manifest file for you, so add an icons array to your manifest.json (or site.webmanifest) pointing at favicon-192.png and favicon-512.png with their sizes and a "type" of "image/png". The home-screen icon on iOS comes from the apple-touch-icon link, not from the manifest, which is why both are included.
Browsers cache favicons aggressively. After deploying, you may still see the old icon for a while — do a hard refresh, open the icon URL directly to confirm it loads, or test in a private window. If the tab icon never updates, double-check that the link paths resolve to a real file and that the filenames match what you uploaded.
How your image is handled, and what to keep
The whole pack is built in your browser. Your source image is drawn to an off-screen canvas, exported at each size, and bundled into a ZIP on your own device — on this site, the image is not uploaded to our servers and nothing is stored after you leave the page. That makes it safe to use on an unreleased logo or a client asset you have not published yet.
Keep your original high-resolution source file. The generated PNGs are downscaled copies, so you cannot enlarge a 32-pixel icon back into a sharp 512 later — you would just regenerate from the original. If you tweak the logo, rerun the tool on the updated source to refresh the whole pack at once.
If the build fails, the usual causes are an unsupported or corrupt file, or a source that is not a raster/SVG image. Re-export your artwork as a clean PNG or SVG and try again. Because the result is a download, confirm the icons look right at small sizes before wiring them into a live site.
Frequently asked questions
Nine PNG sizes: 16 and 32 are the browser-tab and bookmark icons, 48/64/96/128 cover higher-density displays, 180 is the Apple Touch icon for iOS home screens, and 192 and 512 are the icons a PWA web app manifest references. A copy of the 180 image is also saved as apple-touch-icon.png.
A square image at least 512×512, ideally a transparent PNG or an SVG. SVG is rasterized to PNG at each size on export. Design for the smallest size — at 16×16 a single bold mark reads far better than a detailed logo or fine text.
No. The pack is PNG only. Current browsers accept PNG favicons through the included link tags, so a separate .ico file is no longer required for general use.
Unzip the PNGs into your site root or public folder and paste the link tags from the included favicon-readme.txt into your <head>. For a PWA, point your manifest's icons array at favicon-192.png and favicon-512.png — this tool does not write the manifest file for you.
No. The whole pack is built in your browser. On this site, your source image is processed on your own device and is not uploaded to our servers; nothing is stored once you close or reload the page.