HTML Favicon
On this page
HTML Favicon
A favicon is a small image displayed next to the page title in the browser tab.
How to Add a Favicon in HTML
You can use any image as your favicon. You can also create your own favicon using online tools.
Tip: A favicon is very small, so it should be simple and have high contrast.
The favicon is displayed to the left of the page title in the browser tab.
Adding a Favicon
To add a favicon to your website, save the favicon image in the root directory of your web server or inside an images folder. A common file name is favicon.ico.
Then add a <link> element inside the <head> section of your HTML document, after the <title> element.
<!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>
After saving the file, reload the page in your browser. The favicon should appear next to the page title.
Favicon File Format Support
| 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 |
Chapter Summary
- Use the
<link>element to define a favicon - Place the favicon reference inside the
<head>section - Use simple, high-contrast images for best results
Exercise
In which HTML element is the favicon defined?
<img> <body> <link> <style>
HTML Link Tag
| Tag | Description |
|---|---|
<link> | Defines the relationship between a document and an external resource |
Basic Favicon