How to Add a Favicon in HTML
Adding a favicon is just a few link tags in your HTML <head>. Here's the complete set that covers every browser, iOS, Android, and PWA.
Put your icon files in the site root, then add these tags to the <head> of every page: <link rel="icon"> for ICO/PNG, <link rel="apple-touch-icon"> for iOS, and <link rel="manifest"> for Android/PWA.
Complete favicon HTML
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<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" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">Frequently Asked Questions
Where does the favicon HTML go?+
Inside the <head> section of every HTML page, before </head>. Add all the <link> tags you need (icon, apple-touch-icon, manifest).
Do I need both ICO and PNG link tags?+
It's recommended. favicon.ico is the universal fallback; PNG link tags give modern browsers sized, sharp icons. The two coexist without conflict.
Why isn't my favicon HTML working?+
Check the file paths are correct and the files exist, clear browser cache (hard refresh), and make sure the tags are inside <head>, not <body>.
Generate the files + the HTML
Upload an image and download a complete favicon package — the favicon generator includes the exact HTML you need.
Open Favicon Generator