How to Generate a Favicon
A favicon is no longer one file. Browsers want an ICO at the site root and PNG variants declared in the head, iOS wants a 180-pixel apple-touch-icon, Android wants 192 and 512 pixel versions referenced from a web manifest, and getting any of them wrong means a blank square somewhere. Most free generators hand you a single ICO and leave the rest as an exercise — or ask for an email address before they'll give you the full set. This one builds everything from your image in one pass and packages it as a ZIP: a genuine multi-resolution ICO containing 16, 32, 48 and 64 pixel frames, six PNG assets covering browsers and both mobile platforms, a site.webmanifest with your site name and theme colour already filled in, the HTML link tags, and a README explaining where each file goes. Before you download, the preview strip shows your logo rendered at 16, 32, 48, 180 and 512 pixels — the 16-pixel version is the one worth staring at, because that's what people actually see in a tab and it's where fine detail disappears. Padding, an optional solid background and rounded corners let you adjust the composition without going back to an editor. Everything is generated in your browser.
Add your logo
Drop a square image, ideally 512 pixels or larger.
Adjust and preview
Set padding, background and site name, then check the 16px render.
Download the pack
One ZIP with every file plus the HTML to paste in.
Installing It
Where the files go
Everything except the HTML snippet and README belongs in your site root — the same level as index.html. Browsers request /favicon.ico directly whether you declare it or not, so that path matters.
Then paste the HTML
Add the link tags to the head of every page. They declare the PNG sizes, the Apple touch icon, the manifest and your theme colour, which are the parts a bare favicon.ico can't cover.
Common Use Cases
New website launch
Generate the full icon set before you go live.
Rebrand
Replace an old low-resolution favicon across every platform at once.
Fix a blurry icon
If yours looks soft on retina or Android, it's missing the larger sizes.
Progressive web app
The manifest and 192/512 icons are what an install prompt needs.
Client deliverable
Hand over a complete, correctly named icon pack.
Internal dashboards
Give an admin panel a recognisable tab icon.
Landing pages
A proper favicon makes a one-page site look finished.
Documentation sites
Static site generators expect exactly these filenames.
Tips & Best Practices
Design for 16 pixels first
That's the size in a browser tab. If your full wordmark is unreadable there, use a single letter or symbol instead.
Start from 512 pixels or larger
Every size is downscaled from your source, so a small original produces soft large icons.
Add padding for mobile
iOS and Android crop icons into rounded tiles — 10 to 15% padding stops the mark touching the edge.
Use a solid background for iOS
Apple doesn't honour transparency on home screen icons and fills it with black. Set a background colour.
Keep the theme colour on brand
It tints the browser chrome on Android and the status bar in an installed PWA.
Hard-refresh after installing
Favicon caching is unusually persistent; check in a private window if the old one lingers.
Troubleshooting
My favicon isn't showing
Browsers cache favicons aggressively. Hard-refresh, try a private window, or open /favicon.ico directly to confirm it's being served.
The iOS icon has a black background
Apple fills transparency with black on home screen icons. Turn on the solid background option and regenerate.
The 16-pixel version is a blur
Too much detail for that size. Simplify to a bold mark — the preview strip shows exactly what users will see.
Android isn't using my icon
Check the manifest is linked in your head and served from the site root, and that the icon paths inside it match where you uploaded the files.
Frequently Asked Questions
How do I generate a favicon for free?
Drop your logo above, adjust the padding and background, and download a complete nine-file pack — free, no email and no signup.
What's included in the pack?
A multi-size favicon.ico, six PNG assets for browsers and mobile, a site.webmanifest, the HTML snippet and a README.
Is my logo uploaded?
No. Every file is generated in your browser and nothing is transmitted.
What size should my source image be?
Square and at least 512 pixels. Every output is downscaled from it, so bigger is better.
Where do I put the files?
In your website root, alongside index.html. Then paste the HTML snippet into your head.
Do I need all these files?
The ICO and 32px PNG cover browsers. The Apple and Android icons matter if people add your site to a home screen.
What is site.webmanifest for?
It tells Android and progressive web apps your site name, theme colour and which icons to use for installation.
Why does my icon look bad at 16 pixels?
Fine detail can't survive that size. Simplify the mark — the preview shows exactly how it renders.
Should I add padding?
Yes for mobile. iOS and Android crop icons into tiles, so 10 to 15% padding stops the mark touching the edges.
Does it support transparency?
Yes for browser icons. For iOS home screens, enable a solid background — Apple fills transparency with black.
Can I use an SVG as the source?
Yes. SVG, PNG, JPG, WebP and GIF are all accepted.
Why isn't my new favicon appearing?
Favicon caching is stubborn. Hard-refresh, clear the site cache, or check in a private window.
Does it add a watermark?
No. The output contains only your artwork.
What is the theme colour?
It tints the browser chrome on Android and the status bar in an installed PWA. Set it to your brand colour.
Do I still need favicon.ico at the root?
Yes. Browsers request that path directly regardless of what your HTML declares.
Does it work offline?
Once the page has loaded it runs entirely in your browser, so it keeps working without a connection.
Does it work on phones?
Yes, in any modern browser on Windows, Mac, Android or iPhone with nothing to install.
Is this tool really free?
Completely free, forever — no account, no ads and no premium wall.
100% free · No signup · Built in your browser · Never uploaded
Last updated: August 2026 · FlipMyFormat Favicon Generator
Written and maintained by the FlipMyFormat team · Runs entirely in your browser