Demon Tech Roadmap

HTML

HTML Favicon

HTML favicons display small icons in browser tabs.

Read Time

5 min read

Difficulty

Beginner

Last Updated

Jun 15, 2026

Version

v1.0.0

Introduction

HTML pages show a small icon next to the page title in the browser tab. Developers use the `` tag to attach this icon. Browsers request standard formats like `.ico`, `.png`, or `.svg`.

Syntax

1<!-- favicon syntax -->
2<link rel="icon" href="/favicon.ico" sizes="any">

Example

1<!-- this defines a favicon -->
2<!DOCTYPE html>
3<html lang="en">
4  <head>
5    <meta charset="UTF-8">
6    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7    <title>Favicon</title>
8    <link rel="icon" href="/icon.svg" type="image/svg+xml">
9  </head>
10  <body>
11    <h1>Check the tab icon</h1>
12  </body>
13</html>

Try it Yourself

Hands-on Practice

Modify the code below to see how it affects the output. This is the best way to learn!

Interactive Editor

1234567891011121314151617181920

Live Preview

Key Points

Favicons appear in browser tabs.
The `` tag connects the icon file.
The `href` attribute points to the image path.
Browsers cache favicons aggressively.

Up Next

Continue your journey with the next topic.

Go to HTML Page Title ❯