HTML Favicon

A favicon (short for favourite icon) is a small image displayed next to the page title in the browser tab. It helps users identify your site quickly among many open tabs.

What a Favicon Looks Like

The favicon appears in:

The browser tab next to the page title
Bookmarks and favourites lists
Browser history
Home screen when saved on mobile devices

How to Add a Favicon

Add a <link> tag inside the <head> section of your HTML page:

<head>
    <link rel="icon" href="favicon.ico" type="image/x-icon">
</head>

The favicon file should be placed in the root folder of your website (same level as your homepage).

Tip: Many browsers will automatically find favicon.ico in the root folder even without a <link> tag, but it is best practice to always declare it explicitly.

Supported Favicon Formats

Format	Type	Support
`.ico`	`image/x-icon`	All browsers — most compatible
`.png`	`image/png`	All modern browsers
`.svg`	`image/svg+xml`	Modern browsers only
`.gif`	`image/gif`	Limited support — avoid

Using PNG as Favicon

PNG is widely supported and easier to create than ICO files:

<link rel="icon" href="favicon.png" type="image/png">

Favicon for All Devices

For full device support (including iOS home screen and Android), declare multiple sizes:

<!-- Standard favicon -->
<link rel="icon" href="favicon.ico" type="image/x-icon">

<!-- PNG for modern browsers -->
<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">

<!-- Apple touch icon (iOS home screen) -->
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">

SVG Favicon (Modern Browsers)

SVG favicons scale perfectly at any size and can even support dark mode:

<link rel="icon" href="favicon.svg" type="image/svg+xml">

How to Create a Favicon

You can create a favicon in several ways:

Use an online generator — search for "favicon generator" (e.g., favicon.io, realfavicongenerator.net)
Design a 32×32 or 16×16 pixel image in any image editor
Export your logo as PNG and convert it to .ico format online

Note: Keep your favicon design simple and recognisable at small sizes. Detailed logos become unreadable at 16×16 or 32×32 pixels. Use bold shapes, initials, or a single symbol.

Quick Reference

Use Case	rel attribute	Recommended Size
Browser tab icon	`icon`	32×32 or 16×16 px
iOS home screen	`apple-touch-icon`	180×180 px
Android home screen	`icon`	192×192 px

« Previous Lesson Next Lesson »