Favicon generator
Favicon generator that turns one PNG, JPG, WebP or SVG into favicon.ico, an Apple touch icon, 192 and 512 px icons, a web manifest and the HTML tags.
What this favicon generator makes
One image goes in and a ZIP comes out with everything a site needs for its icons:
- favicon.ico with 16, 32 and 48 px icons for browser tabs, bookmarks and Windows.
- apple-touch-icon.png at 180 × 180 px for iPhone and iPad home screens, on a white background.
- icon-192.png and icon-512.png for Android home screens and installable web apps.
- site.webmanifest that points to the two large icons.
- favicon-tags.html with the link tags to paste into the head of your pages.
- icon.svg, a copy of your original, when you start from an SVG.
How to generate a favicon
Drop a square logo or icon above and press Convert all. Each size is drawn fresh from your source image, so the 16 px icon isn't a blurry copy of the 512 px one. Non-square images are centered with transparent padding. Download the ZIP, unzip it, upload the files to the root folder of your website and paste the tags from favicon-tags.html into your page head.
Start from the right source image
Use a square image of at least 512 × 512 pixels, or an SVG. SVG works best, because it is drawn sharp at every size, and Chrome, Edge and Firefox can show icon.svg directly in the tab. Keep the design simple. At 16 pixels a detailed logo turns into a smudge, so many brands use just their initial or symbol for the favicon.
Why the touch icon gets a white background
iOS doesn't show transparency on home screen icons. It fills transparent pixels with black, which makes most logos look wrong. The generator places apple-touch-icon.png on white so it looks clean. If your brand uses a coloured background, add it to the source image before you generate the set.
Finish the web manifest
The site.webmanifest has empty name and short_name fields and white theme and background colours. Open it in a text editor and fill in your site name and colours. Browsers use these when someone installs your site as an app or adds it to their home screen.
Before you start
Input: PNG, JPG, JPEG, WEBP, and SVG. Output: favicon set (ZIP). The settings appear before anything runs, so you can check them first. Your original file is never changed.
Pick the size and quality for where the image will end up. Resizing before strong compression usually keeps more visible detail. Keep an untouched original so you can export again later.
Keep the original until you have opened and checked the result. The work happens in this browser tab, so the size you can handle depends on your device's memory, your browser and the file itself.
How to use the favicon generator
- Drop a square PNG, JPG, WebP or SVG of your logo into the box above.
- Press Convert all. Every icon size is drawn in your browser.
- Download the ZIP and upload its files to your site's root folder.
- Paste the tags from favicon-tags.html into the head of your HTML.
Last updated · How we build and check tools · Report an error