Do you need a favicon.ico for your website, or an icon for a Windows shortcut, and all you have is a PNG or JPG of your logo?
Don’t worry, you are not alone, and you do not need any design software. Add your picture below, check how it looks at the small sizes, and download a proper .ico file. This PNG to ICO converter also takes JPG, SVG and WEBP, and nothing is uploaded.
Your picture never leaves this computer. The icon is made in your browser. Nothing is uploaded.
A square picture of at least 256 pixels gives the sharpest result. If you have a hand drawn small version too, add both and each size uses the closest one.
An ICO file is a folder of pictures, not one picture
This is the part most people never get told, and it is why so many favicons look blurry.
A PNG is one picture at one size. An .ico file can hold several copies of the same icon at different sizes, and whatever shows it picks the copy that fits. A browser tab usually wants a tiny one. A Windows desktop shortcut wants a big one.
Think of it like an envelope of passport photos. You hand over the size the form asks for, instead of cutting a big photo down with scissors every time.
If an .ico only holds one size, Windows and the browser have to shrink or stretch it on the spot. Microsoft’s own guidance for Windows apps asks for 16, 24, 32, 48 and 256 pixel versions at the bare minimum, because Windows looks for an exact match first and scales down from the next size up when it cannot find one.
So this tool puts every size you tick into the file. The small ones are stored as plain bitmaps and only the 256 pixel one is compressed, which is how Microsoft’s icon guidelines describe building an icon file.
Which sizes to tick
- For a website favicon: 16, 32 and 48. A browser tab shows 16, or 32 on a sharp screen, and 48 is there for the bigger places some systems show a site icon. Adding 256 makes the file bigger for no gain in a tab.
- For a Windows program or shortcut: 16, 24, 32, 48 and 256, the minimum set Microsoft lists.
- Not sure: choose Every common size. The file gets bigger, but nothing will ever have to be stretched.
An .ico cannot hold anything bigger than 256 pixels. That is a limit of the format itself, so no converter can do more.
Why a favicon looks blurry, and what actually fixes it
There are two causes, and they need different fixes.
The first is the one above: the .ico holds a single size and gets stretched. Drop your current .ico onto the tool and it lists every size inside. If it says “only one size”, that is your answer, and making a new one here fixes it.
The second is the logo itself. A detailed logo simply does not survive being 16 pixels wide. Microsoft’s icon guidelines say plainly that simply scaling down from the 256 pixel size does not work, which is why designers draw a simpler version for the smallest sizes.
That is why every preview here is shown at its real size, on a light tab and a dark tab, next to an enlarged copy. If your logo is a smudge at 16 pixels, you will see it before you download anything.
Note: if you have a hand drawn small version, add it together with the big logo. Each size is made from the smallest picture that is at least that big, so your 16 pixel drawing is used as it is for 16, and the big logo for the rest.
See-through edges without a grey outline
Shrinking a logo means combining many pixels into one. At the edge of a logo with no background, some of those pixels are colour and some are fully see-through.
Averaged the obvious way, the see-through pixels count as black, so a red edge turns dark red and the whole logo gets a faint dirty outline at small sizes. Here each pixel’s colour only counts as much as it can actually be seen, so a red edge stays red and simply fades out.
The tests for this page run the obvious average through the same check first, and it has to fail. Then every size of every test icon is opened with a separate image library and compared with its own careful shrink of the same logo.
A logo that is not square
Icons are square. Google’s own rule for the favicon it shows in search results is a square picture, and it recommends one larger than 48 pixels.
So a wide logo has two choices here, and stretching is deliberately not one of them, because a squashed logo is always wrong. Add see-through space keeps the whole logo and puts empty space above and below it. Crop to the middle fills the square and cuts off the ends. For a long wordmark, cropping usually leaves the first letter or the symbol, which is often the better favicon anyway.
JPG to ICO
JPG to ICO works exactly the same way, with one catch you should know before you start: a JPG has no see-through parts. Whatever is behind the logo in the JPG, usually white, becomes a square behind your icon in every browser tab.
Keep in mind that on a dark browser tab that white square is very visible, which the dark preview shows you. If you can get your logo as a PNG with no background, use that instead.
ICO to PNG, and checking any .ico
Drop an .ico file onto the tool and it opens it instead of converting it. You see every picture inside, its real size, how it is stored, and a PNG download for each one. That is the quickest way to get a usable picture back out of an old icon.
It also reads the real size of each picture rather than trusting the file’s own list, and tells you when the two disagree. Some tools write that list wrong, and a program that trusts the list rather than the pictures can then pick the wrong one.
Putting the favicon on your website
- Upload favicon.ico to the top folder of your site, so it opens at yoursite.com/favicon.ico.
- Add this line inside the head of your pages:
<link rel="icon" href="/favicon.ico">. Many browsers look for /favicon.ico on their own, but the line removes any doubt. - Open yoursite.com/favicon.ico directly in a new tab to check it is there. Browsers keep old favicons far longer than old pages, so the tab itself can show the old icon for a while even when the new one is live.
On WordPress you do not need an .ico at all. Upload a square PNG as the Site Icon and WordPress makes the sizes for you. If it is not showing up, the favicon not showing in WordPress guide walks through the usual causes.
This will not help with the icon on an iPhone home screen. iPhones use a separate PNG called an apple touch icon, not the .ico file.
Where this stops, honestly
- It is not an icon editor. It shrinks your picture carefully, but it cannot redesign a detailed logo for 16 pixels. Only a simpler drawing can.
- It does not make Mac .icns files or cursor files. Only Windows .ico.
- A moving GIF gives a still icon from its first frame. An .ico cannot move.
- Enlarging does not add detail. If your picture is smaller than a size you tick, that size is stretched and the result says so. Start from 256 pixels or more.
- Very old icons with 16 colours can be opened and turned into PNG, but new icons are always made in full colour with see-through edges.
Frequently asked questions
What size should my favicon picture be?
Start from a square picture of at least 256 pixels. The .ico then holds the small sizes made from it. For WordPress, use a square PNG as the Site Icon instead.
Can I just rename a PNG to .ico?
Some browsers will show it anyway, because they look at what is inside the file rather than its name. But it is still one picture in the wrong format, so it only works where a program happens to look inside. Converting takes a few seconds and removes the guesswork.
Why is my .ico bigger than my PNG?
Because it holds several pictures, and the small ones are stored uncompressed, which is how Windows icon files are built. A 48 pixel bitmap is about 9 KB on its own. For a website, ticking only 16, 32 and 48 keeps it small.
Is it free, and is my picture uploaded?
It is free, there is no sign up, and nothing is uploaded. The icon is made in your browser. Load the page, switch off your wifi and it still works.
If your icon comes out looking wrong, ask me in the comment section below and I will love to help you out.