How to add a favicon in HTML (code for every browser)

Adding a favicon takes two steps: upload the icon files to your website, then link them in the <head> of your HTML.

1. Upload the files

Put your favicon files in the root folder of your website, the same folder as your home page (index.html or index.php). On most hosting, including Hostinger and cPanel hosts, that folder is public_html.

If you don’t have the files yet, make them with the favicon generator.

2. Add the favicon HTML code

Paste this inside <head> on every page (in a shared header file if your site has one):

<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

If you also have an SVG favicon, add this line after the first one:

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

Why the paths start with /

href="/favicon.ico" always points to the root of your site. Without the slash, href="favicon.ico" points to the current folder, so the icon breaks on pages like /blog/my-post. This is one of the most common reasons a favicon shows on the home page but not elsewhere.

Do I need the HTML if I have favicon.ico?

Browsers look for /favicon.ico on their own, so a site with only that file still gets a favicon in most browsers. The link tags are still worth adding: they let browsers pick sharper PNG or SVG icons, and they tell iPhones and Android which home-screen icons to use.

What about rel="shortcut icon"?

rel="shortcut icon" is an old Internet Explorer form. rel="icon" works everywhere today, so you don’t need it.

Check that it works

Run your site through the favicon checker. It confirms each file loads and tells you if anything is missing. If the icon still doesn’t appear, read why your favicon is not showing.