Favicon Generator
Make favicon.ico, the Apple touch icon, Android icons and a web app manifest from one image or SVG, with the HTML tags to paste. Runs in your browser.
For images that aren't square. Fit inside keeps all of it; crop to fill trims the sides.
The Apple touch icon always gets the background color, as iPhones show see-through parts as black.
For the web app manifest and the preview.
Runs in your browser. Nothing you enter is uploaded.
How to use
This tool makes the full set of favicon files for a website from one image, without uploading it anywhere.
- Add an image: drop it on the box, choose it, or paste it with Ctrl+V (Cmd+V on a Mac). An SVG gives the sharpest icons. Otherwise use a PNG of at least 512 by 512 pixels.
- If the image isn't square, choose how to make it square: Fit inside keeps all of it, Crop to fill trims the sides.
- Keep the Transparent background, or turn it off to fill it with the Background color. The Apple touch icon always gets the background color, because iPhones show see-through parts as black.
- Add your Site name if you like. It goes in the web app manifest.
- Check the Preview: your icon in light and dark browser tabs, and on a home screen.
- Click Download all (.zip), put the files in your site's root folder, then copy the HTML into the head of every page.
The set has favicon.ico with 16, 32 and 48 pixel icons for browsers and bookmarks, icon.svg when you start from an SVG, apple-touch-icon.png at 180 pixels for iPhone and iPad, and icon-192.png and icon-512.png with site.webmanifest for Android and installed web apps. Photos are resized with a sharp Lanczos filter, and SVGs are drawn fresh at every size.
Frequently asked questions
Which favicon files does a website need?
These cover every browser and device: favicon.ico for browsers and bookmarks, icon.svg for modern browsers when you start from an SVG, apple-touch-icon.png for iPhone and iPad home screens, and icon-192.png and icon-512.png with site.webmanifest for Android.
Why doesn't my new favicon show up?
Browsers keep favicons for a long time. Check that the files are in your site's root folder and the tags are in the head of the page, then open the site in a private window or clear the browser's cache.
What kind of image makes a good favicon?
A simple, bold shape: a logo mark, a letter or a symbol. Fine lines and small text disappear at 16 pixels, so check the browser tab preview. Start from an SVG or a PNG of at least 512 pixels for sharp results.
Related tools
- SVG to PNG converter Convert SVG to PNG, JPG or WebP at 1x, 2x, 4x or an exact width, with a transparent background.
- Image resizer Resize JPG, PNG and WebP images by width, height, longest side or percent, one or many at a time, with sharp Lanczos resizing in your browser.
- Color converter Convert colors between HEX, RGB, HSL, OKLCH and CMYK, see their shades, tints and harmonies, and check WCAG contrast against white, black or any color.
More image tools
- Image converter Convert images between PNG, JPG and WebP in your browser, one or many at a time.
- EXIF remover See and remove hidden photo data such as the GPS location, camera and date, without re-saving the image.
- Crop and rotate image Crop an image by dragging or with exact pixel sizes, lock a ratio like 1:1 or 16:9, and rotate or flip it.
- Image compressor Compress JPG, PNG and WebP images in your browser, or get them under a size such as 100 KB.
- HEIC to JPG Convert iPhone HEIC photos to JPG or PNG in your browser, one or many at a time.
- Blur and pixelate image Blur or pixelate faces, number plates and text in a photo before you share it, in your browser.
- QR code reader Read QR codes from a screenshot or photo in your browser: links, Wi-Fi, contacts, events, bank payments and 2FA keys, all codes in it.