If you want to add a favicon to your website, you have two options: either add the image file directly through HTML or use automated CMS or manifest solutions. The most effective method is an HTML reference in the <head> of your page plus integration via a manifest.json.

What are favicons and what are they used for?

A favicon (a portmanteau of ‘favourite’ and ‘icon’) is the small image displayed, for example, in a browser tab. This small icon not only provides a high recognition value in tab bars but is also shown in the toolbar, bookmarks, app lists, and search results of your search engine.

Website Builder
From idea to website in record time with AI
  • Intuitive website builder with AI assistance
  • Create captivating images and texts in seconds
  • Domain, SSL and email included

How to create a favicon

Before you can add a favicon using HTML, you’ll need to create the icon first. Ensure that the image is easy to recognise as part of your brand and displays well in both low and high resolution. For this reason, many favicons follow similar principles to those used in logo design. To ensure broad compatibility, it’s best to create several different versions of the icon:

Purpose Format Recommended Size Note
Classic Browsers .ico 16×16 px or 32×32 px Primarily needed by older browsers
Modern Browsers .png 32×32 px or 64×64 px Transparency possible, lossless display
Apple Touch Icon .png 180×180 px Used when adding to the home screen on iOS
Android Manifest Icon .png 192×192 px or 512×512 px Included in manifest.json, required for PWAs and Android shortcuts

How to add a favicon with HTML

The safest way to add your favicon is by referencing it through HTML. To do this, upload the image to the root directory of your domain or a subfolder (e.g., /assets/icons/). Then link it in the <head> section of your page.

<!—Standard favicon -->
<link rel="icon" type="image/png" sizes="32x32" href="/assets/icons/favicon-32x32.png">
<!-- Fallback for older browsers -->
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
<!-- Apple Touch Icon -->
<link rel="apple-touch-icon" sizes="180x180" href="/assets/icons/apple-touch-icon.png">
html

The older MIME type image/vnd.icon is considered obsolete – use image/x-icon or image/png instead.

How to add a favicon without code

If you want to add a favicon in HTML, there’s an even simpler option. You don’t need to write any code—just create the icon file and give it the correct name. After generating the favicon in the right format, save it as favicon.ico and place it in the root directory of your domain. This method only works if the filename is exact, so ensure it’s written entirely in lowercase.

However, this approach comes with two limitations: although most browsers support it, not all do. In addition, the same icon will automatically appear on all subdomains of the domain. For these reasons, the method described above remains the more reliable solution.

Favicons in CMS Like WordPress or TYPO3

In modern content management systems, the favicon is usually added through the backend.

Examples:

  • WordPress: You can add a favicon in WordPress. Simply upload it under Design → Site Identity → Site Icon. WordPress automatically generates multiple sizes and inserts the code into the <head>.
  • TYPO3 / Joomla / Drupal: Through the template or theme settings.
  • Headless CMS (e.g., Strapi, Contentful): Add manually to the frontend template or the manifest.json.

Most CMS store the favicon in a central path and handle the integration themselves—so you only need to manage the image files.

Integration via manifest.json (for PWAs and Android)

A Progressive Web App (PWA) is a web application built with modern technologies like JavaScript, HTML5, and CSS3 and delivers an app-like user experience directly in the browser. Well-known examples include the web versions of Pinterest, Google Maps, and Spotify.

For PWAs and Android devices, a simple HTML header is not enough. Instead, an additional file called manifest.json is included. This file is referenced in the webpage’s <head>, is structured in JSON format (JavaScript Object Notation), and contains important metadata about the application. This includes the app’s name, version, and icons. Additionally, the manifest defines key properties such as the launch screen mode, background scripts, and required permissions—everything that helps the browser display the web app like a native application.

<link rel="manifest" href="/manifest.json">
html

Example content of the manifest.json:

{
    "name": "My Website",
    "short_name": "Website",
    "icons": [
        {
            "src": "/assets/icons/icon-192x192.png",
            "sizes": "192x192",
            "type": "image/png"
        },
        {
            "src": "/assets/icons/icon-512x512.png",
            "sizes": "512x512",
            "type": "image/png"
        }
    ],
    "theme_color": "#ffffff",
    "background_color": "#ffffff",
    "display": "standalone"
}
json

This file ensures that your icon is displayed correctly when saving to the home screen or installing the PWA—on both Android and in modern browsers like Chrome, Edge, or Firefox.

Go to Main Menu