Favicon Generator
Generate favicon.ico plus every PNG size modern browsers and mobile devices expect, packaged as a ZIP with the HTML to drop in.
About Favicon Generator
A favicon is not one file any more. Browsers want a classic favicon.ico, modern ones prefer PNGs at several sizes, iOS wants a 180×180 apple-touch-icon, and Android wants 192×192 and 512×512 for the web app manifest. This tool takes one square image and produces the whole set.
You get a real multi-resolution .ico containing 16, 32 and 48 pixel versions — which is what the format is actually for — alongside each PNG size as its own file, a site.webmanifest, and the HTML link tags to paste into your <head>.
Everything is generated with the browser's own canvas, so your logo is never uploaded. Start from a square image at 512 pixels or larger for the best results; small source images upscale poorly and favicons are judged at very small sizes where softness is obvious.
How to use it
- 1Upload a square image — PNG with transparency works best.
- 2Optionally pick a background colour to fill transparency for the .ico.
- 3Preview the generated sizes to check the logo still reads at 16 pixels.
- 4Download the ZIP and paste the supplied HTML into your page head.
Common uses
- Setting up favicons for a new website
- Adding iOS and Android home-screen icons to an existing site
- Replacing a favicon that looks blurry because only one size was provided
- Generating icons for a client site without installing design software
Frequently asked questions
What size should my source image be?
Square and at least 512×512. Every output size is produced by scaling down, which is reliable — scaling up is not. If your logo has fine detail or thin text, check the 16×16 preview, because detail that reads beautifully at full size often turns to mush at favicon scale.
What is the difference between favicon.ico and the PNGs?
The .ico is a container holding several resolutions in one file, and it is what older browsers and some tooling look for at your site root. The individual PNGs are what modern browsers, iOS and Android prefer. Shipping both covers everything.
Where do the files go?
Put favicon.ico at the root of your site, the PNGs wherever you serve static assets, and paste the generated link tags into your page head. The included site.webmanifest is what Android uses for home-screen installs.
Does it handle transparency?
The PNGs keep transparency. For the .ico you can set a background colour, which is worth doing — transparent .ico files render unpredictably against dark browser themes.