You have the flexibility to use any image of your choice as your favicon. Additionally, you can craft your own favicon using platforms such as https://www.favicon.cc.
| Hint: Since a favicon is a small image, it’s recommended to opt for a simple image with strong contrast. |
To incorporate a favicon into your website, you can either store your favicon image directly in the root directory of your webserver or create a folder named “images” within the root directory and save your favicon image inside this folder. A typical name for a favicon image is “favicon.ico”.
Then, include a <link> element in your “index.html” file, positioned after the <title> element, as demonstrated below:
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> |
Now, save the “index.html” file and refresh it in your browser. Your browser tab should now showcase your favicon image positioned to the left of the page title.
Below is a table illustrating the file format compatibility 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 |
