Favicon Generator (ICO, PNG and Apple Touch Icon)
Turn one picture into a complete favicon set: a real multi-size favicon.ico, every PNG a site needs, the web manifest and the HTML to paste.
What it actually looks like
There is a lot of fine detail in this one. At 16 pixels it will read as a smudge. Simpler shapes and fewer colours survive that size better.
Free forever, no sign-up and no limits, and this tool installs on its own so you can keep it on your home screen.
Drop in one picture and get the complete set a website needs: a real multi-size favicon.ico, the PNGs for tabs, iPhone and Android, a web manifest, and the HTML to paste. It shows you the icon at its true 16 pixels first, because that is the size that decides whether a favicon works.
How to use it
- Choose a pictureA square logo works best. Anything the browser can read is fine: PNG with transparency, JPG, WebP or SVG.
- Check it at 16 pixelsThe preview shows the icon in a mock browser tab at its real size, plus 32, 48 and 180. If it is too detailed to read that small, the tool says so.
- Download and pasteOne ZIP holds every file. Put them in your site's root folder and paste the five lines of HTML into your <head>.
A favicon is a 16 pixel problem
Almost every favicon that fails does so for the same reason: it was judged at the size it was designed, not the size it is used. A logo at 500 pixels can carry a wordmark, a gradient and a thin outline. At 16 pixels it has 256 pixels in total to work with, roughly the number of characters in this sentence, and all of that detail collapses into a grey block that looks like every other grey block in the tab strip.
So this tool shows you 16 pixels first, in a mock tab, at its true size rather than blown up. If the result is unreadable you find out before you upload it to your site, which is the only useful time to find out. The tool also measures how much fine detail survives at that size and says plainly when there is too much.
What the set contains, and why each part exists
favicon.ico holds 16, 32 and 48 pixel images in one file. Browsers no longer need it, but plenty of other software still asks for it by name.favicon-16x16.png and 32x32 are what a browser tab actually draws, the larger one on high-resolution screens.apple-touch-icon.png at 180 pixels is what iOS uses when someone adds your site to their home screen. android-chrome-192 and512 do the same job on Android and for installable apps, andsite.webmanifest is the small file that tells a browser those icons belong together.
Background, padding and rounding
Three controls, and each solves a real problem. A background colour rescues a dark logo that would vanish against a dark tab bar. Padding stops a wordmark or a thin drawing from touching the edges, which looks cramped at small sizes. Rounding matters only when you have set a background, since it shapes the tile rather than the picture.
Nothing is ever cropped. The picture is fitted whole into the square and centred, because a favicon generator that quietly cuts the edge off a logo produces a result you will not notice until it is live.
What this tool will not do
It will not design an icon for you, generate one from text or an emoji, or animate anything. It cannot add detail to a small source picture, so give it the largest version of your logo you have. And it does not upload the files to your site for you: that part is yours, and it is two steps, copy the files into your root folder and paste five lines.
Free forever, with no account and no watermark, and every tool here installs on its own.
Questions people ask
What size should a favicon be?
There is no single size, which is why a set exists. Browsers use 16 and 32 pixels in tabs, Windows uses 48 for shortcuts, iOS wants 180 for the home screen, and Android and installable apps want 192 and 512. Give one good square picture and all of them are made from it.
Do I still need favicon.ico?
Every current browser will happily use a PNG, so for browsers alone you could skip it. It is still worth having, because a lot of other software looks for /favicon.ico by name: feed readers, link previewers, site crawlers, older content systems and some corporate proxies. The file this tool makes is a genuine ICO holding 16, 32 and 48 pixel images, not a PNG with the extension changed.
What picture makes a good favicon?
One shape, high contrast, few colours, and no text you need to read. At 16 pixels a letterform is about ten pixels tall, so a wordmark becomes a grey smear. If your logo has a symbol as well as words, use the symbol alone.
Does it need to be square?
It does not, and nothing is cropped: the picture is fitted whole inside the square, centred. A wide logo will therefore sit in a band with space above and below, which is usually not what you want in a tab. Crop it square first if the shape allows.
Should the background be transparent?
Usually yes, so the icon sits on whatever colour the browser is using, which matters in dark mode. Add a colour when your logo is a thin dark drawing that would disappear against a dark tab bar, or when you want the icon to read as a solid tile on a home screen.
Where do the files go?
In the root folder of your site, so they end up at yoursite.com/favicon.ico, yoursite.com/apple-touch-icon.png and so on. The HTML snippet points at those exact paths. If your site puts static files somewhere else, change the paths in the snippet to match.
Why does my new favicon not show up?
Browsers cache favicons unusually hard, and often keep the old one even after a normal refresh. Try the page in a private window to confirm the new file is being served. Once you have, the fastest fix in ordinary browsing is to open yoursite.com/favicon.ico directly and refresh that.
Can I make favicons for several sites at once?
Yes, up to 50. Drop in a picture per site and each one comes back as its own ZIP, complete with its own favicon.ico, on its own row. They are processed one at a time with a count, so a phone does not run out of memory partway through.