HTML
HTML Head
HTML Forms
HTML Graphics
HTML Media
HTML APIs
HTML Favicon
An HTML favicon is a small image that represents a website. It is displayed next to the page title on the left side in the bookmarks, browser tab, and address bar.
Adding Favicon to HTML
Favicon HTML helps identify your website when you are working on multiple tabs. It is also referred to as a favorite icon and is defined with <link> tag with rel = “icon.”
Note: Use a single image with high contrast to give your brand or site an identity.
To add HTML Favicon, follow the steps mentioned below:
- Save your favorite image to the root directly of your webpage. Commonly, the saved folder of the favicon image is expressed as “favicon.ico.”
- In the <head> section, add <link> tag after <title> element.
- To specify the type of linked document, use rel = ”icon.”
- Use the “href” HTML attribute to provide the favicon image’s URL.
- This step is optional, but if you want to specify the image type, you must set the type attribute.
Save the changes and reload. As soon as the page refreshes, it will show the favicon image.
Supported Favicon Formats
HTML favicon is supported by all major browsers, including Chrome, Edge, Safari, Firefox, and Opera. We can use the following formats for HTML favicon.
- ico
- png
- gif
- Jpg
- SVG
HTML favicon is a vulnerable part of webpages that can be easily exploited in phishing attacks on HTTPS pages. To avoid such a situation, only display the favicon in the tab, and beside your web page’s URL, add a security status of the accessibility protocol used to access the website.
Watch Video on YouTube
How to create HTML Page?
