Your logo as a perfect favicon.In three simple steps.

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:

   %HEAD%
   

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.

Open this guide as a page ↗

The quick way (enough for most sites): Upload icon-512.png from your package as the site icon. Depending on your theme it's under Settings → General → Site Icon (since WordPress 6.5) or Appearance → Customize → Site Identity. WordPress creates the required sizes itself.

The full package (with favicon.ico, icon.svg and web app manifest):

1. Upload the files via FTP to the root of your WordPress installation (where wp-config.php lives).

2. Add the code to your child theme's functions.php:

   add_action('wp_head', function () { ?>
   %HEAD%
   <?php }, 1);
   

3. Remove the site icon: If an image is still set as Site Icon, remove it – otherwise WordPress prints its own icon tags as well.

Use a child theme, otherwise the code is gone after the next theme update.

Open this guide as a page ↗

1. Upload the files: In the Filelist module, create the folder fileadmin/favicon/ and upload all files from the package.

2. Add TypoScript to the setup of your site package (or the TypoScript template of the root page):

   page.headerData.1730 = TEXT
   page.headerData.1730.value (
   %HEAD:/fileadmin/favicon/%
   )
   

3. Clear caches: Maintenance → Flush TYPO3 and PHP Cache or the lightning icon, then reload the page.

Only need a plain favicon.ico? TYPO3 has page.shortcutIcon = fileadmin/favicon/favicon.ico for that – but Apple and Android icons are missing then. If your site package renders the <head> in its Fluid layout, you can paste the HTML code there directly.

Open this guide as a page ↗

1. Favicon in the theme settings: Online Store → Themes → Customize → Theme settings, then upload icon-512.png under Logo or Favicon. Shopify creates the browser favicon from it.

2. Upload the touch icon: Themes → … → Edit code → Assets → Add a new asset and upload apple-touch-icon.png.

3. Add code to theme.liquid in layout/theme.liquid, right before </head>:

   <link rel="apple-touch-icon" href="{{ 'apple-touch-icon.png' | asset_url }}">
   <meta name="theme-color" content="%THEME%">
   

Theme updates sometimes overwrite code changes – check the touch icon after updating.

Open this guide as a page ↗

Website builders don't give you access to files or the <head>. You upload a single image – use icon-512.png from your package, the builder creates the required sizes.

1. Wix: Settings → Favicon or Website settings → Favicon – on Wix only with a premium plan and a connected custom domain.
2. Squarespace: Depending on the version Design → Browser icon or Settings → Website → Browser icon (favicon).
3. Jimdo: Settings → Website or Settings → Favicon – the label depends on the Jimdo version.

Limitations: The builder decides about touch icon, Android icon and theme color; favicon.ico, icon.svg and the manifest can't be used. The image from your package is still sharper than a simply downscaled logo.

Open this guide as a page ↗

Next.js (App Router) recognizes icons by their file name and generates the tags itself:

1. Into app/: favicon.ico and icon.svg as they are, rename apple-touch-icon.png to apple-icon.png.

2. Into public/: site.webmanifest, icon-192.png, icon-512.png, icon-maskable-512.png.

3. Manifest and color in the root layout (app/layout.tsx):

   export const metadata = { manifest: '/site.webmanifest' };
   export const viewport = { themeColor: '%THEME%' };
   

React and Vue with Vite (or Create React App): put all files into public/ and this into the <head> of index.html:

%HEAD%

Open this guide as a page ↗

Joomla:

1. Upload the files via FTP to the root of your Joomla installation.

2. Add the code to your template (ideally a child template), into the <head> of index.php:

   %HEAD%
   

3. The template's default icon: If the template ships its own favicon (Cassiopeia e.g. in media/templates/site/cassiopeia/images/), replace it with your favicon.ico or remove it from the template output.

Drupal: Under Appearance → Settings of the active theme, untick Use the favicon supplied by the theme and upload your favicon.ico. For the full package, put the files into the web root and add the code above to your theme's html.html.twig.

Open this guide as a page ↗