HTML Favicon Icon
📌 Key Takeaways
- HTML Favicon Icon
- How to Put a Favicon on an HTML Page
- A Picture of a Favicon
- Favicon File Format Support
Table of Contents:
A favicon is a small picture that shows up in the browser tab next to the name of the page.
How to Put a Favicon on an HTML Page
You can make your favicon out of any picture you want. You can also make your own favicon on sites like https://www.favicon.cc.
Tip: Since a favicon is small, it should be a simple, high-contrast image.
A favicon is a small image that shows up to the left of the page name in the browser tab.
A Picture of a Favicon
To add a favicon to your website, either save the image to the root directory of your webserver or make a folder called imgin the root directory and save the image there. “favicon.ico” is a common name for a file with a favicon.
After the <title> element, add a <link> element to your “index.php” file, like this:
Example
<!DOCTYPE html>
<html>
<head>
<title>Your Page Title</title>
<link rel=”icon” type=”image/x-icon” href=”/img/favicon.ico”>
</head>
<body><h1>Your Heading</h1>
<p>Your paragraph.</p></body>
</html>
Favicon File Format Support
The supported file formats for favicon images are displayed in the following table:
| 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 |