Table of Contents

HTML Favicon

HTML Favicon Explained in less then 3 minutes.

A favicon is a small file/image that is displayed next to the page title in the browser’s tab. Favicon is also known as tab icon, website icon or an URL icon. It is also displayed on the address bar, browser history and bookmark bar. In a below image you can see how favicon is displayed on the browser tab next to the page title.

How to Create Favicon

<head> 
  <title>Document</title>
  <link rel = "icon" href = "favicon.jpg" type = "image/jpg"> 
</head>

So in an above HTML code we have mentioned the path of an image after the href character that we will use as Favicon. We have also mentioned the type of an image after the type character. We can also adjust the size of an image by simply typing size = “” , but for now we will skip it.

Now, with this line of code our Favicon is ready, but it will be visible only on desktop. But nowadays websites are running on Tablets and Mobile Phones also. So to display our Favicon on tablets and mobile phones also, we use Favicon Generator.

Simply search Favicon Generator on google. Here you will use lots of favicon generators, but I will recommend you to use real favicon generator. Simply just click on it.

Now here select your favicon image.

Once you select the image it will generate your favicon. In some cases it may show you your picture is slightly larger or lesser the the actual favicon, just click on the continue with this picture or you can use different picture it is totally up to you.

Here you can see that how your favicon is displayed on desktop browser’s and mobile phone.

If you scroll little bit down they have also showed you that how it looks if you use this favicon on Android as an app.

If you scroll further more, there you will see a Generate your favicon button, just click on it and it will take you to this page.

Here you can see there are few lines of code.

Now you have to copy these lines of code and paste them in the <head> section of your page. Like this:

<head> 
  <title>Document</title>
  <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
  <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
  <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
  <link rel="manifest" href="/site.webmanifest">
  <meta name="msapplication-TileColor" content="#da532c">
  <meta name="theme-color" content="#ffffff"> 
</head>

Once it is done, now download this Favicon package and name it as Favicon.

Make sure you download this Favicon package in the same drive where you write your html code. Now you have to extract this favicon zip file into a folder like this.

Now the last step you have to do is add the folder name that you have converted from a zip file right after the href attribute in your code like this:

<head> 
  <title>Document</title>
  <link rel="apple-touch-icon" sizes="180x180" href="Favicon/apple-touch-icon.png">
  <link rel="icon" type="image/png" sizes="32x32" href="Favicon/favicon-32x32.png">
  <link rel="icon" type="image/png" sizes="16x16" href="Favicon/favicon-16x16.png">
  <link rel="manifest" href="Favicon/site.webmanifest">
  <meta name="msapplication-TileColor" content="#da532c">
  <meta name="theme-color" content="#ffffff"> 
</head>

So that is it. I have add the folder name (Favicon) that I have converted from a zip file after the href attribute in my code. Now your Favicon will be visible on all browsers and all sizes of screen.

Related Posts

HTML Images

Html Iframe

Block and Inline elements in HTML

HTML Favicon – crus4