Wenn Sie ein Favicon in Ihre Website in­te­grie­ren möchten, haben Sie zwei Mög­lich­kei­ten: Entweder binden Sie die Bilddatei direkt über HTML ein oder Sie nutzen au­to­ma­ti­sier­te CMS- oder Manifest-Lösungen. Am sinn­volls­ten ist eine HTML-Referenz im <head> Ihrer Seite plus die In­te­gra­ti­on über eine manifest.json.

Was sind Favicons und wofür werden sie genutzt?

Ein Favicon (Kof­fer­wort 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 Wie­der­erken­nungs­wert in den Tab-Reitern, sondern wird u. a. auch in der Toolbar, bei den Le­se­zei­chen, in einer App-Liste oder bei den Such­ergeb­nis­sen Ihrer Such­ma­schi­ne angezeigt.

Profi-Website in Sekunden dank KI.
  • Profi-Website in Sekunden dank KI
  • Aus tausenden Vorlagen auswählen
  • 30 Tage kostenlos testen

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 funk­tio­niert und sofort als Teil Ihrer Marke zu erkennen ist. Deshalb ori­en­tie­ren sich viele Favicons an Regeln, die auch für das Erstellen von Logos gelten. Für beste Kom­pa­ti­bi­li­tät sollten Sie außerdem mehrere Versionen ge­ne­rie­ren:

Ein­satz­zweck Format Emp­foh­le­ne Größe Hinweis
Klas­si­sche 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 Trans­pa­renz möglich, ver­lust­freie Dar­stel­lung
Apple Touch Icon .png 180×180 px Wird beim Hin­zu­fü­gen zum Ho­me­screen auf iOS verwendet
Android Manifest Icon .png 192×192 px oder 512×512 px In manifest.json ein­ge­bun­den, für PWAs und Android-Shortcuts er­for­der­lich

Favicon mit HTML einbinden

Am si­chers­ten können Sie Ihr Favicon einbauen, indem Sie es über HTML re­fe­ren­zie­ren. Dafür laden Sie das Bild in das Haupt­ver­zeich­nis Ihrer Domain oder in einen Un­ter­ord­ner (z. B. /assets/icons/). An­schlie­ß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 statt­des­sen image/x-icon oder image/png.

Favicon einbauen ohne Code

Wenn Sie ein Favicon mit HTML einbinden möchten, gibt es al­ler­dings auch noch eine deutlich ein­fa­che­re 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 Haupt­ver­zeich­nis Ihrer Domain ab. Diese Methode funk­tio­niert nur, wenn Sie den Namen korrekt angeben. Achten Sie dabei ins­be­son­de­re auf die voll­stän­di­ge Klein­schrei­bung.

Das Favicon so mit HTML ein­zu­bin­den, hat al­ler­dings auch zwei Nachteile: Erstens erkennen zwar die meisten, aber nicht alle Browser diesen Weg an. Zweitens bedingt dieses Vorgehen, dass auch alle Sub­do­mains, die unter der Haupt­do­main angelegt sind, mit diesem Icon angezeigt werden. Die deutlich sicherere Methode ist daher die oben be­schrie­be­ne.

Favicons in CMS wie WordPress oder TYPO3

In modernen Content-Ma­nage­ment-Systemen wird das Favicon meist über das Backend ein­ge­bun­den.

Beispiele:

  • WordPress: Sie können in WordPress ein Favicon einfügen. Dazu einfach unter Design → Website-Identität → Website-Icon hochladen. WordPress erstellt au­to­ma­tisch mehrere Größen und schreibt den Code in den <head>.
  • TYPO3 / Joomla / Drupal: Über die Template- oder Theme-Ein­stel­lun­gen.
  • Headless CMS (z. B. Strapi, Con­tentful): 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 Ein­bin­dung – Sie müssen sich also nur um die Bild­da­tei­en kümmern.

In­te­gra­ti­on über manifest.json (für PWAs und Android)

Eine Pro­gres­si­ve Web-App (PWA), ist eine Web­an­wen­dung, die mit modernen Web­tech­no­lo­gien wie Ja­va­Script, HTML5 und CSS3 ent­wi­ckelt wurde und ein Be­nut­zer­er­leb­nis 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. Statt­des­sen wird eine zu­sätz­li­che Datei namens manifest.json ein­ge­bun­den. Sie wird im <head> der Webseite re­fe­ren­ziert, ist im JSON-Format (Ja­va­Script 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 Ei­gen­schaf­ten wie den Start­bild­schirm­mo­dus, die Hin­ter­grund­skrip­te und benötigte Be­rech­ti­gun­gen – also alles, was dem Browser hilft, die Web-App wie eine native Anwendung dar­zu­stel­len.

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

Bei­spiel­in­halt 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 Ho­me­screen oder In­stal­lie­ren der PWA korrekt angezeigt wird – sowohl auf Android als auch in modernen Browsern wie Chrome, Edge oder Firefox.

Zum Hauptmenü