Make a favicon set for your site
A modern site needs four things in its head and five files at its root: an ICO for old browsers, an SVG for new ones, a 180 pixel touch icon for iPhones and a 192 and a 512 for the web app manifest. Drop one square picture above and all of them come out, along with the four lines of markup and the manifest to paste in. The picture is drawn here, in this tab, and is not uploaded.
Make a favicon set
Bring one square picture and this draws the whole set a site needs, then writes out the tags and the manifest that go with it. Everything is drawn by this tab, on your own machine, so the picture you choose is not uploaded anywhere.
iOS draws a transparent touch icon on black, which is why this is on by default. Nothing else in the set is flattened.
Every file in the set is drawn from your picture in this tab and dropped in the folder your browser saves to. The files go at the root of your site, next to each other and next to the page that links them, which is what the leading slash in every line above means. One picture at a time stops at 8 MB, and a picture that is not square is centred rather than cropped.
Favicon generator, step by step
- Choose the pictureA PNG at 512 pixels or bigger, or an SVG, which is better because every size is then drawn from the vector rather than shrunk from one render.
- Type your site nameIt goes in the manifest, which is what a phone reads when somebody adds your site to their home screen. Leave it blank if you would rather fill it in yourself.
- Take the files and the tagsSave them one at a time or take the lot as a zip, drop them at the root of your site, and paste the four lines into the head of every page.
Why the SVG line has to come after the ICO line, and other things nobody tells you
A browser handed several elements with the same rel takes the last one it can use, so an icon block that puts the SVG first quietly gets you the 32 pixel bitmap in every browser that would have drawn the vector. That single ordering is the most common mistake in a hand written head, and it is invisible: the site looks fine, the tab just looks slightly worse than it should. The other two are the touch icon and the manifest. iOS composites a transparent touch icon onto black rather than onto your page, which is why this fills that one file with a colour and leaves every other file alone, and a manifest with a name in it is what turns a bookmark into something that looks installed. Nothing here writes a theme colour, a start URL or a display mode, because a favicon generator has no idea what your site is and a guess in a manifest is a thing you have to notice before you can undo it.
The reason a favicon is still fiddly in 2026 is that nothing was ever taken away. Every rule browsers have had about site icons since 1999 is still in force somewhere, so the honest answer to “what do I need” is a short list with a long history behind it, and the generators that grew up alongside it will happily hand you fifty files and a block of markup twenty lines deep.
You do not need fifty files. You need one bitmap container for the things that never learned to read your markup, one vector for everything that did, one square for iOS, and two squares for the manifest so that a phone has something to draw when your site is added to a home screen. That is the set above, and the four lines that go with it are the whole of the markup.
The part worth being careful about is not the pictures at all. It is that the two icon lines are read in order and the last usable one wins, that the paths are absolute so they resolve the same from every page on the site rather than only from the front one, and that the touch icon is the one file that should not be transparent. None of those will ever produce an error. They just quietly give you a worse tab than the one you drew.
Questions
Do I still need a favicon.ico in 2026?
Yes, and it is the file you will think least about. Anything old enough to ignore your link tags looks for one at the root of the site by name, and so do a fair number of feed readers, chat previews and crawlers that are not really browsers at all. It holds a 16 and a 32 here, which is everything that still asks for one.
What size should the picture I bring be?
At least 512 pixels on its longest edge if it is a PNG, and any size at all if it is an SVG. Anything smaller than 512 is refused rather than stretched, because the set has a 512 rung in it and a file blown up to fill that rung is soft at every size, which you would not discover until it was already on your site.
Why does my logo look like a smudge in the tab?
Because a 16 pixel square is smaller than one letter of this sentence, and a mark drawn for a website header has detail in it that simply cannot survive down there. The fix is a second, simpler drawing for the small sizes rather than a better resizer. Look at what large companies use in a tab and it is almost always one shape.
Can I use an SVG on its own and skip the rest?
Almost, and not quite. Every current browser will take icon.svg, but Safari on iOS uses the touch icon for a home screen shortcut, an installed web app reads the manifest, and the odd thing still goes looking for favicon.ico by name. The set is five small files precisely so that none of those has to be thought about again.
Where does my picture go while this is working?
Onto a canvas in this tab and nowhere else. Your browser opens the file, draws it at each of the sizes, packs the results into an ICO and a zip, and hands them back through its own downloads folder. There is no server in that sentence. One event is logged when a set finishes, saying which tool ran and carrying nothing drawn from your file.
Other things here
There is a full list on the free tools page. They all work the same way: in the browser, with nothing to install.
The tool is free. So is the thought.
This page did one small job. Edmund is for the thing you thought of while doing it: a capture app for iPhone, iPad and Mac that files a note the moment you have it, so it does not get lost between having it and writing it down.
See what Edmund does