Favicon Size report
Favicon is short for favorites icon, also known as the page icon or urlicon. A favicon is an icon associated with a website or webpage. Microsoft first created the favicon feature, and Microsoft's Internet Explorer web browser requests a favicon for every website. The link tag supported by Microsoft does not follow the HTML recommendations of the World Wide Web Consortium.
In March 1999, Internet Explorer first used favicon only for favorites. It raises some privacy concerns, as site owners can check access logs to see how many people have downloaded the favicon.ico file and determine how many people have their site as favorites. However, this is no longer an issue since many other browsers started showing the favicon on the address bar on every visit.
The favicon is the small icon that appears on the left side of your browser's address bar. Favorites icon, also used as website avatar, and those are not all about favicons, and favicons are displayed differently depending on the browser. The post will introduce which size different devices require favicons to be.
What is a Favicon
The little icon appears next to the web page title in a browser tab. Favicons are used in browser tabs, browser history, toolbar apps, bookmarks dropdown, search bar, and search bar recommendations. In all of these, especially in the bookmarks and history tabs, which consist of lists of URLs all looking the same, the favicon makes it faster to find that website you are looking for.
Users will remember and recognize it, finding a tab with your favicon among other tabs faster. Favicons also add to overall branding consistency, and their absence might be seen as unprofessional. Let's run through favicon sizes in the following section.
Favicon Size Guide
Because device resolution varies on every browser and from device to device, those icons should come in various sizes, and you can hand off the whole package of them to an excellent development team. From a specific technical point of view, favicons not only make the website look more professional but also reduce the traffic bandwidth usage of the server to a certain extent.
Favicon standard dimensions (px)
The optimal size for creating a favicon is 16x16 pixels, which is the size in which they are most commonly displayed. However, they can sometimes appear in larger dimensions, such as 32x32 pixels.
- 16x16: browser favicon
- 32x32: taskbar shortcut icon
- 96x96: desktop shortcut icon (and Google TV)
More Favicons sizes
- 152×152: iPad touch icon (change for iOS 7: up from 144×144)
- 167×167: iPad Retina touch icon (change for iOS 10: up from 152×152, not in action. iOS 10 will use 152×152)
- 180×180: iPhone Retina
- 128x128: Chrome Webstore icon
- 196x196: Android Chrome icon
- 228x228: Opera Coast icon
Favicon File
The preferred file format for a favicon is JPEG or PNG. The favicon file is still difficult to generate: it is not a standard bitmap file and needs to be generated with a special favicon editor. Upload your favorite pictures directly, generate a 16*16 pixel file, and have an online preview function.
Favicon Design Tips
The key to favicon design is simplicity. You have a tiny amount of space to work with, and details will not be visible, so it is important to keep the shapes clean. Some logos can be used for favicons as they are, and some only in the simplified version, and of course, you need to keep the colors of the favicon on the brand.
It is important to keep updated on each operating system's requirements for displaying icons. Remember to test your favicon on different backgrounds since different browsers, systems, and view modes can affect the visibility of your favicon.
