Favicon formats

Key formats

These are the formats you need to know;

• ICO is the original Windows icon format, which contains multiple image sizes inside a single file.
• PNG supports transparency, and is commonly used.
• SVG is a vector format, and therefore has no size. It is rendered to whatever size needed. In small formats like the 16x16 displayed in browser tabs, it often pixellates.

Creating ICO-format Favicons

Most of the icon libraries I've seen offer their icons in a downloadable format as ICO files.

However editing these, or creating icons from scratch, is easiest with a specialized icon editor, so that you can see all of the size and color-depth variants easily, and work across them.

The best Windows tool I've found for this is icofx.

With the right plug-ins, Adobe Photoshop can be used to edit ICO files, however it's not properly designed for this kind of work.

Which does the browser choose?

What happens when you have ICO, PNG, and SVG versions that can be used for the same icon size? What happens when the browser needs a size, that you haven't explicitly defined?

It depends. Each browser has it's own preferences.

Modern browsers and devices have switched to favoring scaling icons closest in size. ICO, GIF and PNG are all supported by Edge, Firefox, Chrome, Opera and Safari. SVGs and JPEGs are supported by all modern browsers (Not Internet Explorer), however Safari only supports SVG icons in technology preview. Animated GIFs are mostly unsupported.
- Emerging Insights

‍

‍

‍

‍