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. The system chooses the best match for the place where the icon is shown.
That is why one favicon.ico can look crisp in a browser tab at 16 pixels and on a desktop or taskbar at 48 pixels or more. 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. Icons are square, so a wide logo will not fill the space well. 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 phone home screens. Keep your original PNG for that and use the ICO for the classic favicon.