Favicon generator
Make favicon.ico, Apple touch and Android icons, plus the web manifest and HTML, from one logo.
Shape
If the logo isn't square
Background
App details (web manifest)
How did this tool do?
Every file in the favicon set, and where it's used
Different devices look for different icons, which is why one favicon.ico is no longer enough. The ZIP holds favicon.ico with 16, 32 and 48 px icons inside for browser tabs and bookmarks, 16 and 32 px PNGs for high-resolution screens, a 180 px apple-touch-icon.png for when someone adds your site to an iPhone or iPad home screen, and 192 and 512 px icons for Android, listed in site.webmanifest. Upload an SVG and it's also included as favicon.svg, which stays sharp at every size.
A favicon is shown at 16 px, where a detailed logo turns into a blur. The previews show each size at its real pixel size, so you can see that before you ship it. A single letter or a simple mark reads best. Padding adds space around the logo, and the shape can be square, rounded or a circle. Fit inside keeps a wide logo whole, while Crop centre fills the square.
To install it, put the files in your site's root folder and paste the HTML from favicon-snippet.html into the <head> of your pages. Browsers cache favicons hard, so if the old icon still shows, open the site in a private window to check.
Where you'll meet it
A new website
The whole icon set from one logo, ready to drop in.
Installable web apps
Android icons and a web manifest with your app's name and colours.
iPhone home screen
A touch icon with a solid background, so it isn't shown on black.
How to use it
- 01Drop your logo — an SVG or a large square PNG gives the sharpest icons.
- 02Choose a shape, padding and background, and check the previews at real size.
- 03Download the ZIP, put the files in your site's root folder and paste the HTML into your <head>.
Favicons, answered
Which files do I actually need?
favicon.ico covers every browser. The PNGs make it sharp on high-resolution screens, apple-touch-icon.png is used when someone adds your site to an iPhone home screen, and the manifest icons are for Android.
Why does the Apple icon have a background?
iOS shows transparent touch icons on black. If you choose a transparent background, that one icon gets white so it looks right.
Can I use an SVG favicon?
Yes. If you upload an SVG, it's included as favicon.svg and linked in the HTML, with the ICO as a fallback.
Is anything uploaded?
No. Everything runs in your browser, so your files never leave your device.