Structure
HTML Favicon
Adding a Favicon
HTML favicon uses <link rel='icon'> to display a site icon in browsers.
What is a Favicon?
A favicon, short for 'favorite icon', is a small icon associated with a particular website or web page. When a user bookmarks a page, the favicon appears next to the site's name, helping users quickly identify the site. Additionally, favicons are displayed in browser tab bars, enhancing the visual identity of the website.
Adding a Favicon Using HTML
The most common way to add a favicon to your website is by using the <link> element in the <head> section of your HTML document. This element should have the rel attribute set to icon and the href attribute pointing to the location of the favicon file.
Supported Favicon File Formats
Although the .ico format is the most widely supported and used for favicons, modern browsers also support other image formats like .png, .gif, and .svg. Here is how you can include a PNG format favicon:
Favicon Best Practices
- Size and Resolution: Ensure your favicon is at least 16x16 pixels for older browsers. However, for better display on high-resolution screens, consider using 32x32 or even 48x48 pixels.
- Multiple Formats: Offering multiple formats ensures better compatibility across different browsers and devices.
- Location: Typically, favicons are placed in the root directory of the website, but they can be stored elsewhere as long as the path is correctly specified in the
hrefattribute.
Testing Your Favicon
After adding a favicon, it may not immediately appear in the browser due to caching. To test your favicon:
- Clear your browser cache or perform a hard refresh (usually
Ctrl + F5on Windows orCmd + Shift + Ron Mac). - Check your site in multiple browsers to ensure cross-browser compatibility.
- Use online favicon testing tools to verify proper implementation.
