This guide discusses the various sizes of favicons used on websites.
But, first a brief history of the favicon, also known as the shortcut icon, which first appeared in Microsoft’s Internet Explorer 5. When introduced a web developer only needed to place a favicon.ico icon in the root directory of a website, causing a 16x16px square image to appear next to the URL in the address bar plus in the bookmark lists. This required no HTML, CSS, or other techy know how.
Two browser tabs displaying the small favicon
However, now we have moved to application icons which represent the site as a signpost and extend its branding into the browser. Due to formatting, it typically will be a smaller version of the site's logo, or a the most identifying portion of the logo. Still the 16x16px version is used today, although larger sizes up to 512x512px are commonly used in 2019. The key is to achieve clarity at 16x16px, then creating the larger sizes will easily fall into place!
When designing larger favicons it is probable that they could appear on a variety of backgrounds, so using transparency is optimal to get the best results. Consider that it won't always be displayed on a white address bar background, as an example it may appear on Windows Aero glass, a grey Mac OS X UI, or a dark browser theme. Firefox also adds a grey button background to favicons in its address bar and it is set slightly larger so it will always border the favicon.
App Icons on an IOS device, note the left icon is selected.
Once the favicon has been created, there are a number of sites that will optimize the favicon sizes needed for various devices and browsers. However, it is recommended to create and optimize a small 16x16px (actually create a 32x32px), mid-sized 128x128px and large 512x512px. These can be run through the favicon generators which will output the correct sizes for modern devices such as the Android and IOS mobile phones, Windows and MAC operating systems, along with icons for the various browsers.
Visit this free Favicon Generator Site which is a huge time saver, and provides a downloadable package that can be extracted and uploaded to a specific directory on the web site. Instead of placing the icons in the root folder, consider placing them in to a folder such as “/images/favicon”.
But, still adding the favicon.ico in the root directory is recommended, and developers who want to show a large icon in the Top Sites section of Firefox, an additional 256x256px favicon will need to be created.
Below is an example of three rows of sites that use the favicon-256x256.png image file to show the site icons in the Firefox Top Sites section.
If this 256x256px icon does not exist, Firefox will use a small icon in the lower right and take a screen shot of the active page of the website. The sites shown below do not use the dedicated icon, which dramatically decreases brand appeal when viewed in the Firefox Top Sites tab.
The icon Favicon Generator linked above will provide links that need to be added to the Meta Tags in the head section of every webpage. This additional link (noted below) also will need to be included, along with uploading the 256x256px favicon-256x256.png to the specific directory, which is /images/favicon in this example.
<link rel="icon" type="image/png" sizes="256x256" href="/images/icons/favicon-256x256.png">
The webpage with the favicon generator will test all of the icons it created, but in order to validate the Firefox Top Sites icon for your site, pin the site with its homepage URL.
In closing, know that Android seeks both 192x192px and 256x256px png images, while Apple Touch looks for an 180x180px png image. Both 16x16px and 32x32px png favicon are used by various browsers and the classic 16x16px favicon.ico is absolutely still required. Once again a simple to use online Favicon Generator can be found here. It will provide all of these sizes and more.
