What is an ICO file?
ICO is the icon format Windows has used since its early versions. Unlike a PNG, one ICO file can store several images of different sizes, and the system picks the best match for each place the icon appears.
That is why one favicon.ico can look sharp in a browser tab at 16 pixels and on the desktop at 48 pixels or larger. Modern ICO files can also store images with an alpha channel, so icons can have transparent backgrounds.
How to prepare a PNG for PNG to ICO conversion
- Make it square. A wide logo is scaled down to fit the square, and the empty space above and below stays transparent, so it can look tiny. Use Crop Image with the 1:1 preset first.
- Start big. A source of 256 by 256 pixels or more gives the largest icon enough detail.
- Keep it simple. At 16 pixels, thin lines and small text vanish. One letter or a bold symbol reads better than a full logo with a slogan.
- Use a transparent background if the icon should blend into light and dark browser themes. For a photo, Remove Background can cut out the subject first.
- Check contrast. Pale colors on a white tab are hard to see. A solid shape with strong color stands out.
Adding the favicon to your website
Upload favicon.ico to the root folder of your site, so it is reachable at yourdomain.com/favicon.ico. Most browsers check that address automatically, even without any code.
To be explicit, add this line inside the head of your pages: <link rel='icon' href='/favicon.ico'>. After uploading, clear the browser cache or open a private window, because browsers keep old favicons for a while.
Many sites also add a separate 180 pixel PNG for iPhone home screens. Keep your original PNG for that and use the ICO for the classic favicon.