A HTML favicon appears in the tab bar of your browser next to the name of a website. The favicon is a small image that identifies the website a user is visiting. Favicons are declared in the <head> tag of a web page.
Have you noticed all or 99% of your browser tabs have their own distinguishing logo on the side? Well that was the coolest thing (back in 1999) when Internet Explorer first supported it.
This little image or icon the favicon, which stands for favorite icon. Favicons are not required, but they are common on most websites. They are also used for shortcuts across multiple devices. So all websites and web apps should implement favicon(s) to distinguish themselves.
What is an HTML Favicon?
A HTML favicon is an image that appears in your browser tabs list. You will see your favicon if you bookmark a site and on some sites that let you can embed links. A favicon makes it easy for a user to identify a site in their tabs list, bookmarks, and in embedded lists of links.
A favicon is added in the <head> tag of a web page. The <head> tag is where all the so-called “meta” information goes. Meta information is details about the web page itself, such as the title of the page.
Favicon HTML: The Traditional Way to Add a Favicon
Let’s suppose you’ve finished your kick-ass app using the latest technology. You want to add some flare. When someone visits your website URL, they should see an icon that identifies your app in their browser bar. You have your design ready, and you want to add your favicon to the page.
First you have to make sure your image is either an ICO file or save it as PNG (to preserve transparency). The file should be at least 16×16 in size. Then, convert the image into the ICO format.
Why are we converting to ICO? We do so because browsers have many resolutions, and favicons are used as shortcut icons. An ICO file will contain many PNG images inside to support different resolutions and shortcuts. But, ICO has its drawbacks, as we’ll discuss in a moment.
You can use one of the many online tools out there to convert an ICO from a PNG image.
Your browser will pick your favicon from by dropping the file on the root directory. As practice, let’s add the favicon.ico to the index.html between the <head> tag. Add the following code to your <head> tag:
<link rel="icon" href="/favicon.ico" type="image/x-icon">
Refresh and check your icon pop up on the tab! Breeze.
Our image location is /favicon.ico. This refers to the favicon.ico file in the root folder of our website. The root folder is the main folder, usually the one in which an index.html file is placed.
Note: If you get a “favicon.ico Not Found error”, make sure the icon is named favicon.ico. Then, make sure your icon is in the main folder of your site. Finally, check that your index.html is placed in the file you request on your web page.
Favicon HTML: A More Compatible Way to Add a Favicon
You might notice that the favicon does not work across all systems. This is because the ICO format is not as reliable anymore. To fix this, HTML5 introduced the sizes attribute, so we could rely directly on PNG files. Today we don’t have to necessarily compress a PNG to an ICO!
We can save our PNG image in three sizes to match the favicon.ico (16×16), taskbar (32×32) and shortcut icons (96×96). Then our HTML code <head> tag can be changed as:
<link rel="icon" type="image/png" href="/favicon16x16.png" sizes="16x16"> <link rel="icon" type="image/png" href="/favicon32x32.png" sizes="32x32"> <link rel="icon" type="image/png" href="/favicon96x96.png" sizes="96x96">
This should make our website or app more consistent with modern standards!
HTML Add Favicon: Getting More Complex
When it comes to web browser mobile support or larger displays, our potential favicon list continues to expand.
Take for example the apple-touch-icon, which is basically the icon when you add to the home screen on an iOS device. Well, if you want to optimize for iOS devices, yes you’ll need a specific favicon for that.
Behold, our list of favicons grows:
<link rel="apple-touch-icon" sizes="72x72" href="touch-ipad.png" > <link rel="apple-touch-icon" sizes="114x114" href="touch-iphone.png" > <link rel="apple-touch-icon" sizes="152x152" href="touch-ipad-ret.png" >
You might ask what about Android devices? Wait, how did we get from that single and fabulous favicon.ico to an ever-growing list of them?
Conclusion
There are great open source references and plenty of favicon generators to help you in your way. For a smaller app or portfolio project, you might not have the time to cover most or all of the favicon instances.
At the end it all boils down to your own needs. Feel free to experiment with what works with you. One strategy will be to start by having a 16×16 PNG, 32×32 PNG and 152×152 PNG favicons, and expand from there.
You could also keep it simple and stick to the old-fashioned favicon.ico. This format is supported so there’s nothing stopping you from doing that. Just note as your app or project grows you’ll need to add/replace with PNG favicons. Now you know how to add a favicon to your website.
If you’re looking for more HTML learning resources and top online courses, check out our How to Learn HTML guide.
About us: Career Karma is a platform designed to help job seekers find, research, and connect with job training programs to advance their careers. Learn about the CK publication.
