How to add a favicon to your website
Two steps: put the icon files in your site’s root folder, then paste six lines of favicon HTML into the <head>. Don’t have the files yet? Make them with the favicon generator first.
The favicon HTML code
<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="icon" href="/favicon-32x32.png" type="image/png" sizes="32x32">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#e8590c">Change the theme colour to your brand colour.
Step by step for your platform
- Unzip the package into the same folder as your index.html (the web root).
- Paste the link tags into the <head> of every page.
- Upload and hard-refresh.
Full guides: WordPress · Next.js · Shopify · Squarespace · Wix · React · Webflow · Astro · Django
Who reads which line?
Pick a place your icon appears. The lines that surface reads light up.
<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" href="/favicon.svg" type="image/svg+xml"> (used)
<link rel="icon" href="/favicon-32x32.png" sizes="32x32"> (used)
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#e8590c">
Chromium browsers prefer the SVG when one is linked, because it is sharp at every zoom level. Without it, they pick the PNG or .ico entry whose size best matches the tab (16 px at 1×, 32 px at 2×).
What each line does
favicon.ico with sizes="48x48" is the universal fallback. The sizes hint stops Chrome from downloading the .ico when a better SVG is available.
favicon.svg is what modern browsers actually show. It’s sharp at any zoom and can carry a dark-mode variant (see SVG favicons).
apple-touch-icon is read by iOS and iPadOS when someone adds your site to their home screen. It must be 180 px and opaque; make one with the Apple touch icon generator.
site.webmanifest lists the Android and PWA icons, your app name and colours. The PWA icon generator explains maskable icons.
theme-color tints the mobile browser’s address bar and Android’s task switcher.
Check that it worked
Visit https://your-site.com/favicon.ico and /favicon.svg directly: both should display, not 404. Then run the favicon checker on your home page URL. If the old icon keeps appearing, the favicon not showing guide walks through cache clearing browser by browser.
Questions people ask
Where do I put the favicon HTML code?
Inside the <head> element of every page, usually in your shared layout or header template. The files themselves go in your site’s public root so they are served from /favicon.ico, /favicon.svg and so on.
What is the HTML code for a favicon?
The minimal tag is <link rel="icon" href="/favicon.ico">. A complete modern set is: <link rel="icon" href="/favicon.ico" sizes="48x48">, <link rel="icon" href="/favicon.svg" type="image/svg+xml">, <link rel="apple-touch-icon" href="/apple-touch-icon.png"> and <link rel="manifest" href="/site.webmanifest">, all inside <head>.
Do I need all these link tags?
The six lines shown cover every current browser, iOS, Android and Google. You can skip the PNG line if you have the SVG and .ico, and the manifest line if you don’t care about Android home screens, but they cost almost nothing.
Can I add a favicon without HTML?
Partly. Browsers request /favicon.ico from the site root automatically, and iOS requests /apple-touch-icon.png. Dropping those two files in the root works with zero HTML, but you lose the SVG, the sizes hints and Android support.
Why doesn’t my new favicon show up?
Almost always caching. Browsers keep favicons in a separate cache that survives normal reloads. Open the icon URL directly and hard-refresh it, add a version query such as /favicon.svg?v=2 to the link tags, or test in a private window. The favicon not showing page has a full checklist.
What is the correct order of favicon link tags?
Order matters little in modern browsers; they choose by type and size. A sensible order is .ico first as the fallback, then SVG, then PNG, then apple-touch-icon and the manifest.