Adding a Favicon to Your Website: Enhance Your Brand Identity
Learn how to add a favicon (website icon) to your website to improve its branding and user experience. This tutorial provides a step-by-step guide, explains favicon image formats, and demonstrates how to display your website's icon in browser tabs and bookmarks.
Adding a Favicon to Your Website
What is a Favicon?
A favicon (favorite icon) is a small image that represents your website in a browser tab or bookmark. It enhances your website's visual identity and makes it easier for users to identify your site among multiple open tabs. A well-designed favicon should be simple, memorable, and have good contrast.
Adding a Favicon to Your HTML
To add a favicon, follow these steps:
- Create or choose your favicon image: The favicon should be a small image (typically 16x16 or 32x32 pixels). Many websites offer favicon creation tools. A simple design with good contrast works best.
- Save the favicon image: Save your favicon image file (commonly named
favicon.ico) in the root directory of your website, or in a subdirectory such as the `images` folder. - Add the `<link>` tag to your HTML: Place the following line in the `<head>` section of your HTML file, after the `<title>` tag:
Adding the Favicon Link
<link rel="icon" type="image/x-icon" href="/images/favicon.ico">
Replace `/images/favicon.ico` with the actual path to your favicon image.
Reload your webpage in the browser to see the favicon appear.
Favicon File Format Support
Most modern browsers support several image formats for favicons:
| 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 |