HTML Favicon

A favicon is a small website icon shown in the browser tab. It is added using the <link rel="icon"> tag inside the head section.

4 views

5 min read

Try It Yourself→

Experiment with the code in an interactive editor

What is Favicon?

Favicon is that tiny little icon you see on browser tabs next to the page title.

Where you see it:

On your browser tab
In bookmarks list
In browser history

How to add favicon:

1<head>
2    <!-- For .ico file (works on all browsers) -->
3    <link rel="icon" type="image/x-icon" href="favicon.ico">
4    
5    <!-- For .png file (modern browsers) -->
6    <link rel="icon" type="image/png" href="logo.png">
7    
8    <!-- For Apple devices (iPhone, iPad) -->
9    <link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
10</head>

How to create a favicon:

Create a small image (16x16 or 32x32 pixels)
Save it as .ico or .png
Put it in your website folder
Add the <link> tag in <head>

Previous Tutorial

HTML Images And File Paths

Next Tutorial

HTML Lists