What is the Favicon Generator?#
The Favicon Generator turns one image into the full set of icons a site needs: a multi-size favicon.ico, PNG icons, a web app manifest, and the HTML tags to paste into your page.
Everything runs in your browser. The image never leaves your device.
How to Use#
- Add an image by dropping it, pasting it, or choosing a file.
- Download the files you need, or save the set as a ZIP.
A square image of 512 × 512 px or larger is recommended. SVG scales to any size.
Adjust the layout, background, and site name when the defaults do not fit. Check how the icon reads in a browser tab or on an iOS home screen before you download.
Generated Files#
- favicon.ico: holds 16, 32, and 48 px versions for browser tabs and bookmarks.
- favicon-16x16.png, favicon-32x32.png, favicon-48x48.png: small PNG icons for browsers.
- apple-touch-icon.png: a 180 px icon for iOS home screens.
- android-chrome-192x192.png, android-chrome-512x512.png: icons for Android home screens, referenced from the manifest.
- icon.svg: the original file, included only when the input is an SVG.
- site.webmanifest: names the site, lists the Android icons, and sets the theme color and display mode.
- HTML tags: link and meta lines for your page's
<head>, ready to copy.
Settings#
- Fit:
Containkeeps the whole image visible.Coverfills the square and trims the overflow from the center. - Shape:
Squarekeeps the corners.Circleclips the image into a circle. The Apple Touch icon always stays square. - Padding: space between the icon edge and the image, as a share of the icon size.
- Zoom: scales the image inside the padding, from half to double size.
- Background:
Transparentleaves empty areas see-through.Solidfills them with the background color. - Make the Apple Touch icon opaque: with a transparent background, this fills only the Apple Touch icon with the background color, so it stays readable on home screens.
- Site name: used for the manifest and the previews. An empty name becomes My app.
Common Use Cases#
- Adding a favicon and app icons to a new site or blog.
- Rebuilding icons from a fresh logo without opening an image editor.
- Checking how an icon reads at tab size before shipping it.
FAQ#
No. The tool reads the file on your device and never sends it anywhere, so closing the page leaves nothing behind.
The files belong at the root of your site, with the HTML tags pasted into your page's <head>. The manifest and icons are referenced by path, so keeping the file names as they are avoids broken links.
The original SVG is included as icon.svg next to the PNG set. Layout and background settings shape the PNG and ICO output, not the SVG.
Empty areas stay see-through, which can wash out on dark browser themes. The Apple Touch icon can still be filled in with the opaque option.
Every icon file plus the manifest. The HTML tags stay on the page for copying and are not part of the archive.
No. The tool works with one image at a time. Run the tool again for each additional image.