Tech-SEO 15. Mai 2026

Favicon und Touch-Icons für SEO:
Die vollständige Einbindungsanleitung 2026

Ein fehlendes Favicon kostet Vertrauen — und sichtbare Glaubwürdigkeit bei Google. So bindest du Favicon, Apple-Touch-Icon und Web-App-Manifest korrekt ein und stärkst Branding sowie Mobile SEO mit wenigen Zeilen Code.

Favicon und Touch-Icons für SEO richtig einbinden

Was ist ein Favicon — und warum spielt es für SEO eine Rolle?

Ein Favicon (kurz für „Favorite Icon") ist das kleine Symbol, das im Browser-Tab, in der Lesezeichenleiste und in den Suchergebnissen neben deiner URL erscheint. Es ist oft das erste visuelle Element, das Nutzer mit deiner Marke verknüpfen.

Für SEO ist das Favicon aus mehreren Gründen relevant:

Dabei ist ein Favicon allein nicht genug. Moderne Websites brauchen ein ganzes Set an Icons — für verschiedene Betriebssysteme, Bildschirmauflösungen und Verwendungszwecke. Dieser Artikel zeigt dir, wie du alles korrekt einbindest.

Die vier Icon-Typen im Überblick

Bevor du anfängst, solltest du verstehen, welche Icon-Varianten in welchem Kontext benötigt werden:

Icon-Typ Format / Größe Kontext
Classic Favicon ICO oder PNG, 32×32 px Browser-Tab, Desktop-Lesezeichen
SVG Favicon SVG (skalierbar) Moderne Browser (Chrome, Firefox, Edge)
Apple Touch Icon PNG, 180×180 px iOS Homescreen, Safari Lesezeichen
Web App Manifest Icons PNG, 192×192 + 512×512 px Android Homescreen, PWA

Schritt 1: Die richtigen Dateiformate erstellen

Das klassische favicon.ico

Die favicon.ico-Datei ist der älteste Standard und wird von allen Browsern unterstützt. Sie enthält oft mehrere Größen in einer Datei: 16×16 px, 32×32 px und 48×48 px.

Empfehlung: Mindestens 32×32 px verwenden. Erstellen kannst du eine ICO-Datei aus deinem Logo mit kostenlosen Tools wie favicon.io, RealFaviconGenerator oder dem Kommandozeilentool ImageMagick:

convert logo.png -resize 32x32 favicon.ico

Lege die favicon.ico-Datei direkt ins Root-Verzeichnis deiner Domain (https://shift07.ai/favicon.ico). Browser suchen dort automatisch danach — auch ohne HTML-Link-Tag.

Das SVG-Favicon

Neuere Browser unterstützen SVG-Favicons. Der große Vorteil: Das Bild ist auflösungsunabhängig und immer scharf — egal ob auf einem Retina-Display oder einem alten Monitor. Außerdem kannst du SVG-Favicons mit Dark-Mode-Unterstützung ausstatten:

<!-- Beispiel: SVG-Favicon mit Dark-Mode-Anpassung -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <style>
    @media (prefers-color-scheme: dark) {
      .icon { fill: #ffffff; }
    }
  </style>
  <path class="icon" fill="#0f172a" d="M16 2L2 30h28z"/>
</svg>

PNG-Favicons für Kompatibilität

Zusätzlich solltest du PNG-Varianten in gängigen Größen bereithalten: 16×16, 32×32, 96×96 und 180×180 px. Diese decken Sonderfälle ab, in denen kein SVG unterstützt wird.

Schritt 2: Apple Touch Icon einbinden

Das Apple Touch Icon wird verwendet, wenn ein iOS-Nutzer deine Website zum Homescreen hinzufügt. Es erscheint dann wie eine App-Icon auf dem iPhone oder iPad.

Wichtige Punkte:

<!-- Apple Touch Icon -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

Lege die Datei als apple-touch-icon.png direkt ins Root-Verzeichnis. Safari und iOS suchen dort automatisch danach — auch ohne HTML-Link.

Weitere Apple-Größen (optional)

Wenn du ältere iOS-Geräte explizit unterstützen willst, kannst du mehrere Größen angeben:

<link rel="apple-touch-icon" sizes="180x180" href="/icons/apple-touch-icon-180x180.png">
<link rel="apple-touch-icon" sizes="152x152" href="/icons/apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" sizes="120x120" href="/icons/apple-touch-icon-120x120.png">

In der Praxis reicht für die meisten Websites ein einziges apple-touch-icon.png mit 180×180 px.

Schritt 3: Web App Manifest für Android

Android-Geräte und Chrome nutzen das Web App Manifest (manifest.json), um Icons für den Homescreen zu laden. Dieses Manifest ist außerdem die Grundlage für Progressive Web Apps (PWA).

manifest.json erstellen

{
  "name": "Shift07 – SEO-Analyse",
  "short_name": "Shift07",
  "description": "Kostenloses SEO-Analyse-Tool für deine Website",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#0f172a",
  "theme_color": "#3b82f6",
  "icons": [
    {
      "src": "/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "any maskable"
    },
    {
      "src": "/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "any maskable"
    }
  ]
}

Das Feld "purpose": "any maskable" ist wichtig: Android verwendet bei manchen Geräten „maskable" Icons, die innerhalb eines sicheren Bereichs (80% der Gesamtfläche) das eigentliche Logo zeigen und außerhalb eine einfarbige Füllung haben.

manifest.json im HTML einbinden

<link rel="manifest" href="/manifest.json">
<meta name="theme-color" content="#3b82f6">

Der theme-color-Meta-Tag färbt die Browser-Adressleiste auf Android in deiner Markenfarbe ein — ein kleines, aber wirkungsvolles Branding-Detail.

Schritt 4: Alle Icons im <head> zusammenführen

Hier ist der vollständige, empfohlene Block für <head>:

<!-- Klassisches Favicon -->
<link rel="icon" type="image/x-icon" href="/favicon.ico">

<!-- SVG-Favicon (moderne Browser) -->
<link rel="icon" type="image/svg+xml" href="/favicon.svg">

<!-- PNG-Fallback 32x32 -->
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">

<!-- Apple Touch Icon -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

<!-- Web App Manifest (Android / PWA) -->
<link rel="manifest" href="/manifest.json">

<!-- Theme Color (Android Browser-Leiste) -->
<meta name="theme-color" content="#3b82f6">

<!-- Microsoft Tiles (Edge, Windows) -->
<meta name="msapplication-TileColor" content="#3b82f6">
<meta name="msapplication-TileImage" content="/icons/mstile-144x144.png">

Schritt 5: Favicon-Größen auf einen Blick

Hier sind alle empfohlenen Icon-Größen — du musst nicht jede davon erstellen, aber je mehr du bereitstellst, desto besser sieht dein Icon auf unterschiedlichen Geräten aus:

Datei Größe Einsatzzweck
favicon.ico 16×16 + 32×32 Browser-Tab, alle Browser
favicon.svg skalierbar Chrome, Firefox, Edge (modern)
favicon-16x16.png 16×16 px Fallback für kleine Tabs
favicon-32x32.png 32×32 px Standard-Tab-Anzeige
apple-touch-icon.png 180×180 px iOS Homescreen, Safari
icon-192x192.png 192×192 px Android Homescreen, PWA
icon-512x512.png 512×512 px Android Splash Screen, PWA Store
mstile-144x144.png 144×144 px Windows Startmenü (Microsoft Edge)

Das Favicon und Google Suche

Google zeigt seit 2019 in den mobilen Suchergebnissen das Favicon einer Website links neben URL und Breadcrumb an. Das macht das Icon zu einem direkten Conversion-Hebel — wer es nicht hat oder ein schlecht lesbares Icon verwendet, verliert Aufmerksamkeit.

Googles offizielle Anforderungen an Favicons für die Suche:

Tipp: Überprüfe mit dem Tool Open Graph Checker, ob deine Meta-Tags und Icons korrekt erkannt werden.

Häufige Fehler bei Favicons

1. Kein Favicon im Root-Verzeichnis

Viele Websites haben zwar ein Favicon eingebunden, aber nicht als favicon.ico im Root-Verzeichnis abgelegt. Browser und Google suchen dort automatisch — und erzeugen unnötige 404-Fehler, wenn die Datei fehlt.

2. Transparenter Hintergrund beim Apple Touch Icon

iOS zeigt Touch-Icons auf weißem oder schwarzem Hintergrund an. Wenn dein Icon transparent ist und ein helles Logo hat, wird es auf weißem Untergrund unsichtbar. Nutze stattdessen einen Hintergrundblock in deiner Markenfarbe.

3. Zu niedriger Kontrast

Kleine Icons müssen auch auf 16×16 px erkennbar sein. Ein komplexes Logo mit vielen Details wird winzig unlesbar. Vereinfache das Logo für das Favicon auf den Kern — oft reicht ein Initialbuchstabe oder ein einzelnes Icon-Element.

4. Favicon im robots.txt blockiert

Wenn deine Favicon-Dateien oder der /icons/-Ordner in der robots.txt blockiert sind, kann Google das Icon nicht laden und zeigt es in den Suchergebnissen nicht an. Prüfe deine robots.txt und stelle sicher, dass der User-agent: Googlebot Zugriff hat.

5. Falscher MIME-Type

Manche Server liefern .ico-Dateien mit dem falschen Content-Type aus. Das korrekte Header-Attribut lautet Content-Type: image/x-icon. Überprüfe dies mit dem HTTP Header Checker.

6. Cache-Probleme nach Update

Browser cachen Favicons sehr aggressiv. Wenn du dein Favicon änderst, sehen Bestandsnutzer monatelang das alte. Füge der Favicon-URL einen Query-Parameter hinzu um den Cache zu brechen:

<link rel="icon" type="image/png" href="/favicon.png?v=2">

Favicons für WordPress, Shopify und andere CMS

WordPress

In WordPress lässt sich das Favicon über Design → Customizer → Website-Identität → Website-Symbol einstellen. WordPress generiert automatisch alle benötigten Größen — du brauchst nur ein quadratisches Bild mit mindestens 512×512 px hochzuladen.

Wenn du die volle Kontrolle willst: Lege favicon.ico, apple-touch-icon.png und manifest.json manuell ins Root-Verzeichnis (public_html/ oder wp-content/). Ergänze in der functions.php des Themes:

function my_custom_favicon() {
    echo '<link rel="apple-touch-icon" sizes="180x180" href="' . get_template_directory_uri() . '/icons/apple-touch-icon.png">';
}
add_action('wp_head', 'my_custom_favicon');

Shopify

Bei Shopify: Online Store → Themes → Customize → Logo → Favicon. Für weitergehende Anpassungen (manifest.json, Apple Touch Icon) kannst du im Theme-Editor in der layout/theme.liquid direkt im <head>-Bereich HTML-Tags einfügen.

Squarespace und Jimdo

Beide Systeme bieten Favicon-Upload in den Grundeinstellungen. Für Apple Touch Icons und Web App Manifests sind die Möglichkeiten jedoch begrenzt — hier ist ein selbst gehostetes HTML-Projekt mit vollem Code-Zugriff im Vorteil.

Favicons testen und überprüfen

Nachdem du die Icons eingebunden hast, solltest du sie gründlich testen:

Favicon-Generator: Automatisch alle Größen erstellen

Du willst nicht manuell 8 verschiedene PNG-Varianten erstellen? Kostenlose Tools erledigen das für dich:

Nach dem Export: Dateien in den Root-Ordner legen, HTML-Code in den <head> einfügen, fertig.

Checkliste: Favicon und Touch-Icons richtig eingebunden?

Fazit: Klein, aber wirkungsvoll

Ein korrekt eingebundenes Favicon ist in zehn Minuten erledigt — und hat einen messbaren Effekt auf die Klickrate in den Suchergebnissen. Google zeigt das Icon prominent neben jeder URL auf Mobilgeräten. Ein fehlendes oder schlecht lesbares Icon signalisiert Nutzern unbewusst: Diese Website ist nicht professionell.

Kombiniere Favicon, Apple Touch Icon und Web App Manifest zu einem vollständigen Icon-Set. Die Investition in diese wenigen Dateien zahlt sich durch stärkeres Branding, höhere Wiedererkennung und bessere Mobile-SEO aus.

Wenn du überprüfen willst, wie gut deine Seite technisch aufgestellt ist, nutze das kostenlose SEO-Analyse-Tool von Shift07. Es zeigt dir fehlende Meta-Tags, kaputte Verlinkungen und weitere technische SEO-Probleme auf einen Blick — inklusive Hinweis auf fehlendes Favicon.

Weiterführende Artikel

Passende Tools