Add a Favicon for a website in HTML
In this article, I will take you through how to add a favicon to a website using HTML
Firstly, What is Favicon ??
Favicon is an Icon which is present on the title bar of the website. Usually, this Icon will be the logo of the company or the logo given for representation of the website or web application.
Why Favicon is required ??
By default, the website created with HTML will have a dummy globe icon and it is not that interesting. To remove the dummy globe and make the title bar a little more interesting and exciting we add the favicon.
Before starting how to implement a favicon we need to make the sure size of the favicon is small, Small Size icons will have better clarity than icons with bigger sizes.
Let's Start with how we can add Favicon to a website using HTML. There are different methods using which this can be achieved but here we will discuss the easiest way which using <link> Element
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="shortcut icon" type="image/png" href=""></head><body></body></html>
Now in href the part you should provide the source address of the favicon
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="shortcut icon" type="image/png" href="../favicon.jpg"></head><body></body></html>
Output:
Thanks for Reading…
I hope you have learned something new from this article. If you have any feedback, questions or suggestions. Please Let me know in the Comments.
Read More of My works
Social Links:
