Setting a Favicon in HTML
The favicon is the small icon displayed in the browser tab or bookmarks. Although small, it’s an important part of a website's branding.
What Is a Favicon?
A favicon is a small image used to identify a website in the browser tab, browsing history, or even on mobile home screens. It’s usually a simplified version of a logo.
Adding a Basic Favicon
The simplest method is to place a <link> tag in the <head> section of your site pointing to a favicon.ico file:
html
<head>
<link rel="icon" type="image/x-icon" href="/favicon.ico">
</head>Where Should the Favicon File Be?
Most browsers automatically look for /favicon.ico in the root directory of the website. It's best to place it there, but you can store it elsewhere if you specify the path with the <link> tag.
Favicon Formats
While .ico is the most common format, you can also use PNG, GIF, SVG, or other image types. Just make sure the file is small — typically 16x16 or 32x32 pixels.
Specifying Alternative Favicon Formats
If you’re not using a .ico file, it’s a good idea to specify the file type using the type attribute. For example:
html
<link rel="icon" type="image/png" href="/favicon.png">Useful Tips
Don’t forget to clear your browser cache when updating your favicon. Also, consider creating multiple sizes to support various devices — for example, 48x48 or 180x180 pixels for iOS.
Select Language
Set theme
© 2025 ReadyTools. All rights reserved.