Key Takeaways
- Favicons, originally introduced by Internet Explorer in 1999, have evolved from a simple icon in a browser’s address bar to a key part of a website’s identity and branding. Their use can create a lasting impression on site visitors and are now utilized for multiple purposes across different devices.
- The use of favicons has expanded beyond the traditional ICO format, with modern browsers accepting PNG files for favicons, allowing for transparent images with rounded corners. The size of favicons has also increased, with modern browsers allowing for 32×32 size icons, and specific instructions for favicons are required for different platforms like Apple devices and Windows 8.
- Despite their importance, favicons have limitations such as creating extra traffic due to repeated checking for it in the same location, not loading new favicons automatically in older browsers, and being a target for phishing attacks. However, their visual impact and functionality are expected to continue growing, making them an integral part of website design and branding.
/favicon.ico
. Since then many things have changed. They are now used for multiple purposes in different devices.
The most basic format of using favicon for a website is as follows:
<link rel="shortcut icon" href="favicon.ico"/>
The rel Property
The important part of the above declaration is therel
property. It is this property which helps the browser identify the favicon and show them properly. Traditional IE browsers used “shortcut” and “icon” both to identify the image and to display it in the browser title and shortcut bar. After the release of HTML5 this has been changed to only “icon” as the global representation of favicon.
The Type Property
Thetype
property can sometimes define whether the browser will display the favicon or not. Internet Explorer sees only the server MIME of the ICO file, otherwise it ignores the file. In general one has to declare the favicon in following ways, for IE:
<!-- For IE6+ --> <link rel="shortcut icon" href="path/to/favicon.ico" type="image/x-icon">
<!-- For IE6+ --> <link rel="shortcut icon" href="path/to/favicon.ico">
<!-- For IE6+ --> <link rel="shortcut icon" href="path/to/favicon.ico" type="image/vnd.microsoft.icon">One of the best upgrades to the use of the favicon in recent times has been the acceptance of PNG files. You can use transparent images with rounded corners as the favicon for your websites. Rounded corners with transparent edges were too difficult to achieve in ICO format. Browsers like Google Chrome and Mozilla Firefox allow the use of PNG favicons. An important point to note here is that if both ICO format and PNG format are declared the ICO format will be used by all browsers, irrespective of the order in which they are declared.
<!-- Works in Chrome, Safari, IE --> <link rel="shortcut icon" href="path/to/favicon.ico">
<!-- Works in Firefox, Opera, Chrome and Safari -> <link rel="icon" href="path/to/favicon.png">
The Size
Another development in the role of the favicon is the size. Older browsers used 16×16 as the standard size of a favicon while modern browsers allow 32×32 size icons which are later scaled down to appropriate size. IE10 uses the 32×32 size icon to display in the address bar.<!-- For IE 6-10 --> <link rel="shortcut icon" href="favicon.ico"/> <!-- For all other browsers --> <link rel="icon" href="favicon.ico"/>With the use of PNG favicons, another new property is added called size” which determines the size of the file specified in the
href
property. For example:
<link rel="icon" href="favicon16.png" sizes="16x16"> <link rel="icon" href="favicon32.png" sizes="32x32"> <link rel="icon" href="favicon48.png" sizes="48x48"> <link rel="icon" href="favicon64.png" sizes="64x64"> <link rel="icon" href="favicon128.png" sizes="128x128">In general, Firefox and Safari will use the favicon which comes first in the declaration. Different versions of Chrome have different preferences. Chrome for Windows will use either 16×16 or ICO, whichever comes first. Chrome for Mac will use an ICO favicon if present or else it will go with 32×32 size favicon and scale down to 16×16 for higher clarity in non-retina devices. Opera on the other hand doesn’t have any such preferences; it randomly selects any one from all the favicons presents.
Best Use
Since Internet Explorer does not support PNG files and other modern browsers do, we can wrap ICO files in the conditional statement and leave the PNG files open. For example:<!-- For IE --> <!--[if IE]><link rel="shortcut icon" href="path/to/favicon.ico"><![endif]-->
<!-- For Modern Browsers with PNG Support --> <link rel="icon" type="image/png" href="path/to/favicon.png">But we have an issue in the above declaration! IE 10 doesn’t support conditional statements and neither do PNG files. What should we do now? We can drop the ICO files in the root directory and make declarations for PNG files only. This way, Internet Explorer will ignore the
<icon rel="icon">
and prefer the ICO image in the root directory. Modern browsers will find the <icon rel="icon">
declaration and use PNG files.
For Apple Devices
Apple devices with iOS 1.1.3 and later require a special type ofrel
property which can be recognized only by such devices. The rel
property in such devices use apple-touch-icon
and apple-touch-icon-precomposed
.
Here the favicons are used not only to display in browsers but also when a website is bookmarked to the apps screen. Such favicons need to be of a higher resolution and custom-made in order to stand out among other apps.
<!-- For rounded corners and reflective shine in Apple devices --> <link rel="apple-touch-icon" href="favicon.png" />
<!-- Favicon without reflective shine --> <link rel="apple-touch-icon-precomposed" href="favicon.png" />The value
apple-touch-icon-precomposed
is used to instruct the device not to add reflective shine to the favicon and use it as it is.
The recommended basic size for Apple devices is 57×57 with 90 degrees corners. For higher resolution screens use 114×114 size images. iPad 2 uses 72×72 size while iPad 3 uses 114×114 for retina display.
For Windows 8
Windows 8 uses the concept of tiles and has the option to pin a website to the home screen. The favicon in such should be of good quality in order to get look good on the screen.<meta name="msapplication-TileColor" content="#D83434"> <meta name="msapplication-TileImage" content="path/to/tileicon.png">Note that in the above declaration I have used the
meta
tags instead of a link
tag. Windows 8 prefers to see the meta
declaration for images in the tiles. The msapplication-TileColor
tag specifies the colors to be filled in the tile and msapplication-TileImage
specifies the image to display at the centre of the tile.
Limitations to favicons
Favicons can sometime create extra traffic for your website due to repeated checking for it in the same location. Sometimes these can even create garbage 404 errors in the log files if not found. Another important limitation of these favicons is the inability to load the new favicons automatically. This problem is mostly found in older browsers such as IE6-9. Therel
attribute is also not standardized by W3C, so different user agents define their own version.
Favicons have been the main target of many types of phishing attacks and eavesdropping in past such as showing the secured icon when they are not certified to be secured.
These are all points to be taken into consideration when deciding whether and how to use favicons on a website. None of them should stop you using favicons creatively.
Today, favicons have an importance of their own. Their visual impact will continue to grow and you should expect them to grow in functionality, as well.
Frequently Asked Questions about Favicons
What is the significance of a favicon in SEO?
A favicon, short for favorite icon, plays a crucial role in search engine optimization (SEO). It helps in brand recognition and user experience, which indirectly influences SEO. When users search for content, a unique favicon can make your website stand out in the search results or bookmarks, increasing the chances of click-throughs. Moreover, Google uses it in mobile search results and may consider it as a ranking factor, making it an essential element of SEO.
How can I create a favicon for my website?
Creating a favicon involves designing an icon that represents your brand, converting it into the .ico format, and uploading it to your website’s root directory. You can use graphic design software like Adobe Photoshop or online favicon generators to create your icon. Remember to keep it simple and recognizable even at small sizes.
What are the best practices for designing a favicon?
When designing a favicon, it’s important to keep it simple and recognizable. Use your brand’s logo or a simplified version of it. The design should be clear and visible even at small sizes. Stick to a square aspect ratio and ensure it’s compatible with the .ico format. Also, consider how it will look against different browser backgrounds.
How does a favicon improve user experience?
A favicon improves user experience by providing visual cues for identifying and navigating websites. It appears in the browser tab, bookmarks, history, and search bar, helping users quickly locate and return to your site among multiple open tabs or bookmarks. It also enhances brand recognition and trust.
Can I use different favicons for different web pages?
While it’s technically possible to use different favicons for different web pages, it’s not recommended for branding consistency. A single, recognizable favicon across all your web pages helps users quickly identify your content and enhances brand recognition.
How do I change my website’s favicon?
To change your website’s favicon, you need to create a new .ico file, replace the old one in your website’s root directory, and update the favicon link in your HTML code. Remember to clear your browser’s cache to see the changes.
Why isn’t my favicon showing up?
If your favicon isn’t showing up, it could be due to several reasons. The .ico file might not be in the correct location, the HTML code might be incorrect, or the browser cache might not be refreshed. Check these aspects and correct any issues.
What is the ideal size for a favicon?
The standard size for a favicon is 16×16 pixels. However, modern browsers and devices support larger sizes like 32×32, 48×48, or even 64×64 pixels. It’s best to provide multiple sizes to ensure your favicon looks good on all platforms.
How does a favicon affect website branding?
A favicon is a small but significant part of website branding. It represents your brand on browser tabs, bookmarks, and search results, helping users quickly identify your content. A well-designed favicon enhances brand recognition, trust, and user experience.
Is a favicon necessary for my website?
While a favicon isn’t technically necessary for a website to function, it’s highly recommended for improving user experience, brand recognition, and potentially SEO. It’s a small effort that can have a significant impact on how users perceive and interact with your website.
Web Designer with over 6 years of experience, including user experience and front end development. Currently, CEO and Co-Founder of Hashnode, a network of software developers. Has published two books: Jump Start Bootstrap and Jump Start Foundation for SitePoint Premium.