81 views
How to Add a Favicon in Html
To add a favicon (short for “favorite icon”) to your HTML document, follow these steps:
- Create an image file for your favicon: The favicon is usually a small square image, typically in the .ico format. You can use an image editing software to create or convert your desired image to the .ico format. Ensure the image is square and has dimensions of 16×16 pixels or 32×32 pixels for better compatibility.
- Save the favicon image in the root directory of your website: Place the favicon.ico file in the same directory as your HTML file or in the root directory of your website.
- Add the favicon link in the
<head>section of your HTML document: Open your HTML file and locate the<head>section, then add the following line within the<head>tags:
HTML<span role="button" tabindex="0" data-code="
<link rel="icon" href="favicon.ico" type="image/x-icon">Note: If your favicon file is saved with a different name or in a different location, make sure to update the href attribute value accordingly.
- Save your HTML file and test: Save the changes to your HTML file, and the favicon should now be included. You can open your HTML file in a web browser to see the favicon displayed in the browser tab or bookmark bar.
Remember to clear your browser cache or do a hard refresh (Ctrl+F5) if you don’t see the favicon immediately, as your browser may have cached the previous version of the page.
By following these steps, you can successfully add a favicon to your HTML document, which enhances the branding and visual identity of your website.