Favicon and Apple touch icon generator
Upload one image and download every icon a site needs: favicon.ico, PNG favicons, the Apple touch icon, Android and PWA icons, and a web manifest, with the HTML to paste. Free and runs in your browser.
flowchart LR
Logo[Your logo] --> ICO[favicon.ico]
Logo --> Apple[apple-touch-icon.png]
Logo --> Android[android-chrome icons]
Logo --> Manifest[site.webmanifest]How to do it
- Step 1
Upload an image
Upload a square PNG, SVG, JPG or WebP, ideally 512 pixels or larger.
- Step 2
Adjust it
Set padding, background colour and corner rounding, and check the previews at every size.
- Step 3
Name your site
Enter your site name and theme colour for the web manifest.
- Step 4
Download and install
Download the ZIP, unzip it into your site's root and paste the HTML.
Why so many files
Browsers ask for /favicon.ico before anything else, so it is still worth having one; it holds three sizes so tabs, bookmarks and the Windows taskbar each get a sharp version. Modern browsers prefer an SVG or PNG favicon when the HTML points at one. Phones use the Apple touch icon and the manifest icons when someone saves the site to their home screen.
Maskable icons
Android may crop home-screen icons into a circle or squircle. The maskable icon has extra padding so your image stays inside the safe zone, the central 80%, whatever shape the launcher uses.
Padding, background and corners
Padding adds space around the image; a little helps marks that touch the edges. A background colour and rounded corners turn a transparent logo into an app-style tile.
What this does not do
- Raster images smaller than 512 pixels are scaled up for the large icons and will look soft.
- The generator does not create Windows tile (browserconfig.xml) files; current Windows versions use the manifest icons instead.
Frequently asked questions
Which files does it generate?
favicon.ico (16, 32 and 48 pixels in one file), favicon-16x16.png, favicon-32x32.png, favicon-48x48.png, apple-touch-icon.png (180 pixels), android-chrome-192x192.png and android-chrome-512x512.png, a padded maskable-512x512.png for Android, site.webmanifest, and head.html with the tags to paste. If you upload an SVG, favicon.svg is included too.
What image should I upload?
A square image of at least 512 by 512 pixels, ideally an SVG or a PNG with a transparent background. Simple shapes and bold marks survive being shrunk to 16 pixels; detailed logos and text do not.
Why does the Apple icon have a background?
iOS fills transparent areas of the home-screen icon with black, so the Apple touch icon always gets a solid background: your chosen colour, or white if you left it transparent. iOS rounds the corners itself.
Where do I put the files?
Unzip the files into the root of your site, so /favicon.ico resolves, and paste the lines from head.html into the <head> of every page.
Is my image uploaded?
No. The image is resized in your browser and the ZIP is created on your machine.