How to add a favicon to your website
Introduction
Hello there friend, today we are going to look at how you as a web developer can add a favicon to your website's webpages by editing your HTML files. A favicon refers to an image placed to the left-side of browser top tabs, for example, on a google search tab you will notice that it has a big colored G representing there logo. This only shows that a favicon image is mostly a website or company logo or something that holds a certain meaning to your website or company, so without further do, lets get right into it.
Creating or preparing your favicon image
Favicon images have a recommended format of use, the most recommended are two which include, .png and .ico formats. So for example your company or website logo is in a .jpg or .jpeg format, this can simply be changed to the recommended formats by changing them by simply renaming your image with a .png format at the end, that is after you have already removed or erased or deleted the .jpeg format at the end of the image name when renaming and you must also note that your image should be renamed us favicon. Well, that is all on how you can create or prepare your image to be used as a favicon.
Adding the favicon image to your website's webpages
We have prepared our favicon and we are readyyy to launch it to the tabs😁, well lets get started, time is money right😉. In order for you to get the favicon working, you must add a <link> tag in your <head> section of each and every webpage of your website and here is how you'll do that:
<link rel="shortcut icon" type="image/png" href="favicon.jpg"/>
well now to get into the details, the rel attribute specifies what the link tag is linking to, for example, icon value is used to specify that the link is linking to a favicon image.
Note: according to HTML 5, the rel attribute doesnt contain any spaced value hence making "shortcut icon" invalid for use in the rel attribute, use the icon value to describe this. But then why is it that even in this format it still works?🤔 the browser still gets to show the image as it has been saved as favicon.ico or png and even if you never specified a link tag for this but as long as the image is saved as favicon.ico in your websites root folder, then the browser is likely to diplay the favicon in the websites tabs
The type attribute is used to show the format or type of your favicon and in this context it is an image in .png format and if its in .ico format then it would be "image/ico". The href attribute specifies the location of the favicon image for the browser, it might be a file path leading to the favicon or just the name if it's in the same folder and that marks the ending of this essential info.
Conclusion
Favicon images represent a company or website logo which lets your users know that it's your site and not only that as these images also add beauty to your sites. Thanks for reading guys and if you liked the content, you can subscribe and check out more of my posts as i am really loaded.😉
Online shopping for Holiday Pick from Private Brands from a great selection at Clothing, Shoes & Jewelry Store.