Add a favicon in HTML

For any hand-built website or template where you can edit the <head>.

1. Upload the files: Unzip the favicon package and upload all files to the root directory of your website – where your home page lives.

2. Paste the code into the <head> of every page:

   <link rel="icon" href="/favicon.ico" sizes="32x32">
   <link rel="icon" href="/icon.svg" type="image/svg+xml">
   <link rel="apple-touch-icon" href="/apple-touch-icon.png">
   <link rel="manifest" href="/site.webmanifest">
   <meta name="theme-color" content="#ffffff">
   

3. Check: Reload the page. Still seeing the old favicon? A hard reload (Ctrl + F5 or Cmd + Shift + R) helps – more in Favicon not showing.

If the files live in a subfolder, adjust the paths in the code, e.g. /favicon/favicon.ico. The paths inside site.webmanifest are relative and work in any folder.