Favicon generator
Generate every favicon a website needs from one square image, free and in your browser with no upload: favicon.ico, PNG icons from 16 to 512 pixels, a maskable icon, site.webmanifest and the HTML to paste.
One square image in, a ZIP of icons plus the HTML to paste out.
In detail
The favicon generator turns one square image into the files a website needs for its icons: favicon.ico holding 16, 32 and 48 pixel versions, PNGs at 16, 32, 48, 180, 192 and 512, a maskable 512 for Android launchers, site.webmanifest and an HTML snippet to paste into your page's head.
Every icon is rendered in your own tab and handed back as favicon-pack.zip. The preview sheet shows each icon at its actual pixel size, because a 16-pixel favicon is only honest at 16 pixels. Start from a PNG or SVG at least 512 pixels square; an SVG is redrawn at each size, so even the largest icons stay sharp.
Favicon generator at a glance
- Input
- One square image: PNG, SVG, JPG or another format, ideally 512 pixels or larger
- Output
- favicon-pack.zip with favicon.ico, seven PNG icons, site.webmanifest and snippet.html
- What it does
- favicon.ico with 16, 32 and 48 pixel images
- Apple touch and Android icons
- A maskable icon with a safe zone
- site.webmanifest and an HTML snippet
- Background color and rounded corners
- Who it is for
- Web developers, bloggers and small businesses setting up a site.
- Limits
- A source under 512 pixels makes soft large icons, and the tool warns.
- The snippet assumes the files sit at the root of the site.
- Privacy
- Runs entirely in your browser: the file is never uploaded, and nothing is kept after you close the tab.
How to make a favicon
- Drop a square image A PNG or SVG at 512 pixels or larger works best. An SVG is re-rendered larger before the icons are cut, so the 512 pixel files are drawn rather than enlarged.
- Set the background and corners The background color fills the Apple and maskable icons, which cannot be transparent. Turn on rounded corners to round the tab and web icons over that color — Apple and Android apply their own mask, so those two are left square.
- Name the app The name is written to site.webmanifest as name and short_name, with short_name trimmed to twelve characters on a word boundary. The theme color becomes the browser UI color on Android and the meta tag in the snippet.
- Check the sheet, then download Every icon appears at actual size with its filename underneath. Press Download ZIP for favicon-pack.zip, or copy site.webmanifest and the HTML snippet straight to the clipboard.
Favicon generator: common questions
What is actually in the ZIP?
Ten files: favicon.ico containing 16, 32 and 48 pixel images, favicon-16.png, favicon-32.png, favicon-48.png, apple-touch-icon.png at 180, icon-192.png, icon-512.png, icon-maskable-512.png, site.webmanifest and snippet.html. The snippet is the link and meta tags to paste into your head, and it assumes the files sit at the root of the site.
How small can the source image be?
It will accept anything, but the 512 pixel icons are enlarged from whatever you give it. If the shortest side is under 512 pixels the tool warns you those icons will look soft. Small sizes are produced by halving repeatedly toward the target instead of in one jump, which is what stops a 16 pixel favicon looking like static.
Why is the maskable icon drawn smaller than the others?
Android launchers crop a maskable icon, sometimes to a circle, so the artwork sits inside the middle 80 percent of the 512 pixel square and the background color fills the rest. Anything outside that safe zone can be cut away by the launcher, which is why that one icon cannot be transparent either.