In this article, you will learn about HTML Favicon, creating html Favicon and how to add a Favicon in html with the help of examples.
What is HTML Favicon?
Favicon is short form of Favorite Icon also known as Bookmark Icon which can be defined as a small logo with .ico file extension. There are various file formats (SVG, PNG, GIF etc.) for html Favicon but .ico format is most suitable and supported by all the browsers. A favicon is a small image displayed next to the page title in the browser tab or address bar.
Simply, a favicon is a small file containing the one or more icons that are used to iconize any website or blog. This Favicon icon is actually displayed on the address bar, browser's tab, browser history and in bookmark bar which gives your website a professional look and also makes the webpage more attractive.
Syntax
<link rel="icon" type="image/x-icon" href="/images/favicon.ico">
A favicon image is visible to the left of the page title in the browser tab which would be look something like this;
How to create html Favicon?
You can use any image of your choice as your favicon. But still if you want to create your own unique favicon then, there are many online tools and sites available on the Internet through which you can easily create any logo or favicon. Some of those sites and tools are favicon.cc, Canva, Picsart etc. Now let's discuss how to create html Favicon.
1. First, click on the following link to create a Favicon
2. Now design the favicon according to your own art techniques.
3. After the favicon is successfully designed, download it by clicking on the button of the download favicon.
If you want to make favicon in more easily way then canva will be the best option for you. Canva is free to use Graphic designer tool where you get 100+ templates, 50+ Font styles and lot of stickers. So what are you waiting for? - Explore Now!!
How to add a Favicon in html file?
1. In order to add a Favicon in html file or document, you have to save your favicon image to the root directory of your webserver or you have to create a new folder named with images, then save your favicon image in that folder.
2. Then paste the following syntax just after the <head> tag;
<link rel="icon" type="image/x-icon" href="/images/favicon.ico">
Below is an example of a code in which we have used the above syntax.
<!DOCTYPE html><html>
<head>
<title>My Page Title</title>
<link rel="icon" type="image/x-icon" href="/images/favicon.ico">
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Replace the yellow area in a Syntax with your favicon image location where you saved your favicon icon.
3. After this, save the html document then open that HTML file in any browser.
Conclusion
Above we have discussed about HTML Favicon, creating html Favicon and how to add a Favicon in html with the help of examples. Favicon is short form of Favorite Icon also known as Bookmark Icon which can be defined as a small logo with .ico file extension. There are many online tools and sites available on the Internet through which you can easily create any logo or favicon such as favicon.cc, Canva, Picsart etc.