HTML Favicon
A favicon is a small image displayed next to the page title in the browser tab.
What is a Favicon?
A favicon, short for "favorite icon", is a small icon that provides a branding for your website. It's most commonly seen in browser tabs, but also in bookmarks lists, address bars, and other places.
How to Add a Favicon in HTML
You can add a favicon to your website by including a <link> tag in the <head> section of your HTML document.
Example
html
<head>
<title>My Page Title</title>
<link rel="icon" type="image/x-icon" href="/images/favicon.ico">
</head>Favicon File Formats
While the traditional format for a favicon is the ICO file (.ico), modern browsers support several other image formats, including:
- PNG (
.png) - GIF (
.gif) - JPEG (
.jpg) - SVG (
.svg)
Using a PNG or SVG is often recommended for modern websites due to better quality and scalability.
Test Yourself with an Exercise
Which HTML element is used to specify a favicon?