Wenn Sie ein Favicon in Ihre Website integrieren möchten, haben Sie zwei Möglichkeiten: Entweder binden Sie die Bilddatei direkt über HTML ein oder Sie nutzen automatisierte CMS- oder Manifest-Lösungen. Am sinnvollsten ist eine HTML-Referenz im <head> Ihrer Seite plus die Integration über eine manifest.json.

Was sind Favicons und wofür werden sie genutzt?

Ein Favicon (Kofferwort aus „favorite“ und „icon“) ist die kleine Bildmarke, die z. B. im Reiter eines Browser-Tabs angezeigt wird. Das kleine Icon sorgt nicht nur für hohen Wiedererkennungswert in den Tab-Reitern, sondern wird u. a. auch in der Toolbar, bei den Lesezeichen, in einer App-Liste oder bei den Suchergebnissen Ihrer Suchmaschine angezeigt.

Profi-Website in Sekunden dank KI.
  • Modernste Vorlagen, KI-generiert
  • Integrierte Marketingtools für Ihren Online-Erfolg
  • 24/7 Premium-Support und persönlicher Berater inklusive

So wird ein Favicon erstellt

Bevor Sie ein Favicon mit HTML einbinden können, müssen Sie es zunächst selbst erstellen. Sie sollten dafür sorgen, dass das Bildchen in niedriger und hoher Auflösung funktioniert und sofort als Teil Ihrer Marke zu erkennen ist. Deshalb orientieren sich viele Favicons an Regeln, die auch für das Erstellen von Logos gelten. Für beste Kompatibilität sollten Sie außerdem mehrere Versionen generieren:

Einsatzzweck Format Empfohlene Größe Hinweis
Klassische Browser .ico 16×16 px oder 32×32 px Wird vor allem von älteren Browsern benötigt
Moderne Browser .png 32×32 px oder 64×64 px Transparenz möglich, verlustfreie Darstellung
Apple Touch Icon .png 180×180 px Wird beim Hinzufügen zum Homescreen auf iOS verwendet
Android Manifest Icon .png 192×192 px oder 512×512 px In manifest.json eingebunden, für PWAs und Android-Shortcuts erforderlich

Favicon mit HTML einbinden

Am sichersten können Sie Ihr Favicon einbauen, indem Sie es über HTML referenzieren. Dafür laden Sie das Bild in das Hauptverzeichnis Ihrer Domain oder in einen Unterordner (z. B. /assets/icons/). Anschließend verlinken Sie es im <head>-Bereich Ihrer Seite.

<!-- Standard-Favicon -->
<link rel="icon" type="image/png" sizes="32x32" href="/assets/icons/favicon-32x32.png">
<!-- Fallback für ältere Browser -->
<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

Der ältere MIME-Type image/vnd.icon gilt als veraltet – verwenden Sie stattdessen image/x-icon oder image/png.

Favicon einbauen ohne Code

Wenn Sie ein Favicon mit HTML einbinden möchten, gibt es allerdings auch noch eine deutlich einfachere Methode. Hierbei müssen Sie selbst keinen Code schreiben, sondern lediglich die Datei erstellen und korrekt benennen. Wenn Sie die Bildmarke im richtigen Format angelegt haben, speichern Sie sie unter dem Namen favicon.ico und legen sie dann im Hauptverzeichnis Ihrer Domain ab. Diese Methode funktioniert nur, wenn Sie den Namen korrekt angeben. Achten Sie dabei insbesondere auf die vollständige Kleinschreibung.

Das Favicon so mit HTML einzubinden, hat allerdings auch zwei Nachteile: Erstens erkennen zwar die meisten, aber nicht alle Browser diesen Weg an. Zweitens bedingt dieses Vorgehen, dass auch alle Subdomains, die unter der Hauptdomain angelegt sind, mit diesem Icon angezeigt werden. Die deutlich sicherere Methode ist daher die oben beschriebene.

Favicons in CMS wie WordPress oder TYPO3

In modernen Content-Management-Systemen wird das Favicon meist über das Backend eingebunden.

Beispiele:

  • WordPress: Sie können in WordPress ein Favicon einfügen. Dazu einfach unter Design → Website-Identität → Website-Icon hochladen. WordPress erstellt automatisch mehrere Größen und schreibt den Code in den <head>.
  • TYPO3 / Joomla / Drupal: Über die Template- oder Theme-Einstellungen.
  • Headless CMS (z. B. Strapi, Contentful): Manuell in das Frontend-Template oder die manifest.json eintragen.

Die meisten CMS speichern das Favicon in einem zentralen Pfad und sorgen selbst für die Einbindung – Sie müssen sich also nur um die Bilddateien kümmern.

Integration über manifest.json (für PWAs und Android)

Eine Progressive Web-App (PWA), ist eine Webanwendung, die mit modernen Webtechnologien wie JavaScript, HTML5 und CSS3 entwickelt wurde und ein Benutzererlebnis bietet, das dem einer nativen App ähnelt. Bekannte Beispiele dafür sind Websites von Pinterest, Google Maps oder Spotify.

Für PWAs und Android-Geräte genügt der einfache HTML-Header nicht. Stattdessen wird eine zusätzliche Datei namens manifest.json eingebunden. Sie wird im <head> der Webseite referenziert, ist im JSON-Format (JavaScript Object Notation) aufgebaut und enthält wichtige Metadaten zur Anwendung. Dazu gehören unter anderem der Name, die Version und die Icons der App. Außerdem definiert das Manifest zentrale Eigenschaften wie den Startbildschirmmodus, die Hintergrundskripte und benötigte Berechtigungen – also alles, was dem Browser hilft, die Web-App wie eine native Anwendung darzustellen.

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

Beispielinhalt der 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

Diese Datei sorgt dafür, dass Ihr Icon beim Speichern auf dem Homescreen oder Installieren der PWA korrekt angezeigt wird – sowohl auf Android als auch in modernen Browsern wie Chrome, Edge oder Firefox.

War dieser Artikel hilfreich?
Zum Hauptmenü