Generate a favicon from a PNG, JPG or any image your browser can open. One image makes favicon.ico with 16, 32 and 48 px icons inside, PNG icons at 16, 32, 180, 192 and 512 px for browsers, phones and web app manifests, and the link tags to paste into your site’s head. A logo that is not square is centre-cropped to the largest square that fits, with a warning first. Transparent backgrounds stay transparent in the ICO and the PNGs. Every icon is drawn from your original at its own size, on your device, and the set downloads as one ZIP.
How it works
- Drop one image, ideally square and at least 512 × 512 px: a logo, an icon or a monogram.
- Press Generate & download ZIP. Previews at 16, 32 and 48 px appear at actual size, so you can judge the design at tab size.
- Unzip the files into your site’s root folder and paste the lines from snippet.html into the <head> of your pages.
Questions
- What size image should I use to make a favicon?
- Square, and at least 512 × 512 px. The largest icon in the set is 512 px, and a smaller source has to be enlarged to fill it, which looks soft. Simple, bold shapes hold up best, because at 16 px a detailed logo turns into a smudge; check the 16 px preview after generating. A non-square image is centre-cropped, so keep the subject in the middle.
- How do I add the favicon to my website?
- Unzip the set into your site’s root folder, because the paths in snippet.html start at the root, such as /favicon.ico. Paste those link tags into the <head> of every page. The snippet also links /site.webmanifest: the ZIP carries the icons block for it as manifest-icons.json, so copy that into your own manifest, or delete the manifest line if your site has none.
- Do I still need favicon.ico if I have PNG icons?
- It is worth keeping. Browsers look for /favicon.ico at the site root even when a page names no icon, and one .ico file holds 16, 32 and 48 px versions, so each place it appears can pick the size it needs. Current browsers use the PNG link tags, and iPhones and iPads use the 180 px Apple touch icon when the page is added to a home screen.
- Does my file get uploaded?
- No. The models and all processing run inside your browser on your own device. You can verify this yourself: open your browser’s DevTools, watch the Network tab, and process a file: there are no uploads. After the first visit most tools also work fully offline.
- What does the favicon set include?
- favicon.ico (16/32/48 in one file), PNGs at 16, 32, 180 (Apple touch), 192 and 512 (PWA manifest), and a ready-to-paste HTML snippet. One ZIP, generated from your image locally.
- Does SVG to PNG keep transparency?
- Yes. The PNG keeps the SVG’s transparent background unless you choose a fill colour. Text inside the SVG renders with the fonts available to your browser.