Developer tools
One image in, every icon out
Drop a square PNG or SVG and get favicon.ico, every PNG size browsers and phones ask for, a web manifest and the exact <head> tags to paste.
For the Apple and maskable icons.
Browser bar and manifest.
Where you will put the files; the tags use it.
Add a logo to see it in a browser tab and on a home screen.
Paste into <head>
site.webmanifest
About this tool
The whole icon set, and the tags that use it
Browsers, iPhones, Android home screens and search results each want a different file. This builds all of them from one source image: a multi-size favicon.ico (16, 32 and 48 px), PNGs at 16, 32, 48, 180, 192 and 512, a maskable icon with the logo kept inside the safe zone, a site.webmanifest, and the handful of <head> tags that point to them — no more, no less. Preview how it looks in a browser tab and on a home screen before you download.
- Free, no sign-up
- Runs in your browser
- Nothing uploaded
A real favicon.ico
A proper multi-image ICO with 16, 32 and 48 px inside, built in the page — not a renamed PNG.
Maskable done right
Android crops icons into circles and squircles. The maskable version pads your logo into the 80% safe zone on a background colour you pick.
Only the tags you need
Five lines of HTML and a manifest — the modern minimal set, not the 20 legacy tags old generators still emit.
Step by step
How to make a favicon
Add your logo
Drop a square PNG (512 px or larger) or an SVG. Transparent backgrounds work.
Set the details
Pick the background colour for the iPhone and maskable icons, and your site’s name and theme colour.
Download the set
Download the ZIP, put the files in your site’s root, and paste the <head> tags.
Get the most out of it
Tips for the best results
- Start from SVG or 512 pxEvery size is drawn from your source; a small source makes blurry large icons.
- Simplify for 16 pxA detailed logo turns to mush at 16 px. A single letter or mark reads far better in a tab.
- Give Apple a backgroundiOS fills transparency with black. The Apple touch icon here uses your background colour.
- Check the tabLook at the 16 px preview on both light and dark tab bars before you ship.
Keep going
More free developer tools
Questions
Questions about this tool
Everything here runs in your browser — nothing you add is uploaded. More in the general FAQ.
What favicon sizes do I need?
A favicon.ico containing 16, 32 and 48 px for browsers, a 180 × 180 Apple touch icon for iPhone and iPad, and 192 and 512 px PNGs referenced from a web manifest for Android and installed web apps. This generator makes exactly that set, plus a maskable icon.
Which HTML tags do I add to my site?
A link to favicon.ico, an SVG or 32 px PNG icon, the apple-touch-icon, the manifest, and a theme-color meta tag. The generator writes them with the right paths — paste them into your <head>.
What is a maskable icon?
An icon designed to be cropped. Android shows app icons in circles, squircles or rounded squares, and a maskable icon keeps the important part inside the central 80% so nothing is cut off.
Can I use an SVG favicon?
Yes, modern browsers support SVG favicons, and if your source is an SVG it is included. The ICO and PNGs are still generated for Safari, older browsers and home screens.
Is my logo uploaded?
No. Every icon is drawn on a canvas in your browser and the ZIP is built on your device.