Favicon HTML code and how to add it

To add a favicon in HTML, upload the icon files to your site's root folder and add link tags inside the <head> of every page.

Copy-ready favicon HTML

<link rel="icon" href="/favicon.ico" sizes="any">
<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">

The favicon generator writes this snippet for the sizes you pick, with a copy button.

Steps

1. Generate your files and unzip the download.
2. Upload them to the root of your site, so /favicon.ico opens in the browser.
3. Paste the link tags into the head of every page, or into your shared layout or template.
4. Reload with a hard refresh. If the old icon remains, see favicon not showing.

Do I need every tag?

The ICO link covers older browsers, the PNG links cover modern ones, the Apple touch icon covers iOS home screens, and the manifest covers Android and installable apps. For a simple site, the ICO plus one 32×32 PNG is a reasonable minimum.

Using a different folder

If you keep icons in a folder such as /assets/icons/, change each href to match. Keep a copy of favicon.ico in the root too, because some tools request it there automatically.