A favicon is a small image displayed next to the page title in the browser tab. A favicon is a small file containing the one or more icons which are used to represent the website or a blog. It is also known as a tab icon, website icon, URL icon, or a bookmark icon. This icon is actually displayed on the address bar, browser’s tab, browser history, bookmark bar, etc. The image of a favicon is in .ico file format. There are various file formats, but .ico format is supported by all the browsers.
How to Create a Favicon
Following are the steps for creating the favicon:
- Click on the following URL, to create the favicon: https://www.favicon.cc/
- Once the favicon is successfully created, we can download the favicon by clicking on the download favicon option.
- 3After the downloading, a favicon with the name favicon.ico is available in the file system drive.
How To Add a Favicon in HTML
You can use any image you like as your favicon. You can also create your own favicon on sites like https://favicon.cc.
Tip: A favicon is a small image, so it should be a simple image with high contrast.
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"> To add a favicon to your website, either save your favicon image to the root directory of your webserver, or create a folder in the root directory called images, and save your favicon image in this folder. A common name for a favicon image is “favicon.ico”.
Next, add a <link> element to your “index.html” file, after the <title> element, like this:
Example
<!DOCTYPE html> <html> <head> <title>My Page Title</title> <link rel="icon" type="image/x-icon" href="/images/favicon.ico"> </head> <body> <h1>This is a Heading</h1> <p>This is a paragraph.</p> </body> </html>
Favicon File Format Support
The following table shows the file format support for a favicon image:
| 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 |
