How to add favicon in html?
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" >
