What is a favicon?

Not only those who program websites or develop plugins for web browsers have certainly heard of the word Favicon heard. You may have come across the term fav icon as a synonym for it. But what is behind it? What does all this have to do with websites? And how did the name for the small graphics come about? I have summarized the answers to these and other questions for you in this guide. 

Do you know a favicon now?

A favicon is a graphic file that (usually) measures 16 x 16 or 32 x 32 pixels. Favicons are used as a logo, symbol or rather icon of websites. They were first introduced in 1999 with Microsoft's Internet Explorer 5. Appropriate standards have been defined to ensure the integration and presentation of the graphics.

The graphical user interface of the web browser should be upgraded and made more attractive for private users. Instead of simply filing links and website names in the bookmark or favorites list, small graphics are now used to differentiate between the pages. This made the operation easier and more convenient.

Where does the name favicon come from?

The term "favicon" is made up of the English words Favorite (for a website in the browser's favorites list) and Icon (for the symbol of the website). When they were introduced, the graphics named in this way served as visual orientation in the list of favorite or bookmarked websites in the web browser. Favicons are now better known as the little images that appear in browser tabs to show which page is open within them. 

Sir Apfelot's green apple, YouTube's red play button, Wikipedia's W on a white background—we've all learned to distinguish web browser tabs not primarily by their labels but by their icons. This is just as quick as with companies and brands using their logos. However, since favicons come from a time when only one website could be opened per browser window, the name for listing the pages in the favorites or bookmarks list was formed - i.e. "fav icon" or "favicon".

The correct file format for a favicon

Which file format to choose for a website favicon to be displayed in the web browser tab, favorites list and bookmarks? Well, by default, a graphics container with the .ICO file extension is used. This icon container can contain multiple versions and resolutions of the graphic - similar to the app icons with the .icns extension that you can find under macOS.

Overall, you can use these file formats for website icons:

• ICO
• PNG
• GIF
• SVG

As shown above, the standard sizes for an .ICO file are often 16 x 16 pixels or 32 x 32 pixels. Like you below https://www.sir-apfelot.de/favicon.ico see, the Sir Apfelot favicon is offered in the smaller size. If you look at the Wikipedia favicon below https://de.wikipedia.org/favicon.ico but then you can see that sizes of 48 x 48 pixels or similar are now also possible.

It should be noted that .ICO files can be used with up to 16,7 million colors to create a wide variety of favicons. With other file formats for favicons (yes, there are more), the color selection may be limited. If you use a gif or a png, i.e. a .gif file or a .png file as a favicon, the size (16 x 16 pixels) and color depth (256 colors) may be limited. Another format that can be used is .SVG.

Sources: 1, 2

Johannes Domke

After graduating from high school, Johannes completed an apprenticeship as a business assistant specializing in foreign languages. But then he decided to research and write, which resulted in his independence. For several years he has been working for Sir Apfelot, among others. His articles include product introductions, news, manuals, video games, consoles, and more. He follows Apple keynotes live via stream.