How to Add Favicon in HTML Web Page | How to add own Favicon in HTML | How to add website Logo in Address Bar
A favicon is a small file with one or more icons representing the website or a blog. It is also known as a tab icon, website icon, URL icon, or bookmark icon.
This icon is displayed on the address bar, browser tab, browser history, bookmark bar, etc. The image of a favicon is in .ico file format.
There are various file formats, but all browsers support the .ico format.
{tocify} $title={Table of Contents}
What is Favicon?
Favicon is made up of two words Fav and Icon. This means Favorite Icon.
Whenever you open any website in your web browser, you must see that there is a small icon on the left side of the tab in which that browser is open; it is called Favicon.
Through Favicon, it is easy for the user to identify any blog or website. If the user keeps many websites open in a browser, then through Favicon, they can identify all the websites.
Suppose you want to give a professional look to your blog. In that case, you must put Favicon in your blog, it improves the user experience, and the blog's look also looks professional.
How to Create a Favicon
The steps for creating the favicon:
- Click on the following URL to make the favicon: https://www.favicon.cc/
- Once the favicon is successfully finished, we can download the favicon by clicking on the download favicon option.
- After the downloading, a favicon with the name favicon.ico is available in the file system drive.
Note: You can use any image you like as your favicon.
How To Add a Favicon in HTML: Insert the Favicon in an HTML file
To add a favicon to your website, either save your favicon image to the root directory of your web server or make a folder in the root directory called images and Preserve your favicon image in this folder.
A familiar name for a favicon image is “favicon.ico.”
Next, add a <link> element to your “index.html” file, after the <title> element, like this:
Example:
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport' /><title> Example of favicon</title><!-- Favicon link start--><link rel="icon" type="image/x-icon" href="/images/favicon.ico"><!-- Favicon link end--></head><body><h1>This is a Heading</h1><p>This is a paragraph.</p></body></html>{codeBox}
Now, save the “index.html” and reload it in your browser. Your favicon image should now appear to the left of the page title in your browser tab.
Note: while writing or copying the above code, make sure to change the favicon link from herf element.
Advantages of Favicon
You have many benefits from adding Favicon to your blog or website.
- Any user can quickly identify your blog.
- The look of blog looks professional with Favicon.
- The user recognizes your website despite opening different websites in many tabs in a browser.
- Builds your online branding.
- Your website looks unique.
Favicon File Format Support
The following table shows the file format support for a favicon image in the browser -
| Browser | ICO | PNG | GIF | JPEG | SVG |
|---|---|---|---|---|---|
| Edge | Yes | Yes | Yes | Yes | Yes |
| Chrome | Yes | Yes | Yes | Yes | Yes |
| Firefox | Yes | Yes | Yes | Yes | Yes |
| Opera | Yes | Yes | Yes | Yes | Yes |
| Safari | Yes | Yes | Yes | Yes | Yes |
Favicon Size Best Practices: What Is the Most suitable Favicon Size?
Favicon sizes vary based on where they will be utilized. The considerable standard favicon size is 16x16 pixels.
However, there are places where the favicon size requires a little larger. Here’s a good breakdown of favicon sizes and their usages in pixels:
- Browser favicons - 16x16
- Taskbar shortcut icons – 32x32
- Desktop shortcut icons – 96x96
- Apple touch icons – 180x180
- WordPress sizing – 512x512
This is the HTML5 syntax for displaying favicons:
<link rel="icon" type="image/png" href="https://cdn.yourwebsite.com/favicon-16x16.png" sizes="16x16"><link rel="icon" type="image/png" href="https://cdn.yourwebsite.com/favicon-32x32.png" sizes="32x32"><link rel="icon" type="image/png" href="https://cdn.yourwebsite.com/favicon-96x96.png" sizes="96x96">{codeBox}
Conclusion:
Friends, according to my expertise, I have written complete information to help you with “HTML Favicon | What is Favicon, and How To Add a Favicon in HTML.” If this post is favorable for you or not, please tell me by commenting.
If you liked this post, do not forget to share it with your friends so they can get information about it.
You can ask us through comments if you still have questions or doubts, I will answer all your questions, and you can contact us for more information.
Please tell us through the comment section if you think we miss anything.
