HTML ändern · Anleitung

HTML Favicon einbauen und ändern

Die zwei Zeilen für den Kopf der Datei

<head>
  <link rel="icon" type="image/svg+xml" href="/favicon.svg">
  <link rel="apple-touch-icon" href="/favicon-180.png">
</head>

Das ist alles. Die langen Listen mit acht verschiedenen Größen, die in älteren Anleitungen stehen, brauchst du nicht mehr — moderne Browser skalieren eine SVG-Datei selbst auf jede benötigte Größe.

Welches Format wofür

Der Sonderfall favicon.ico: Browser fragen diese Datei im Wurzelverzeichnis automatisch ab, auch ohne <link>-Zeile. Legst du sie nicht hin, erscheint im Server-Protokoll bei jedem Besuch ein Fehler 404. Das ist harmlos, macht aber die Protokolle unübersichtlich. Eine kleine Datei dort abzulegen ist der einfachste Weg, das abzustellen.

Das Motiv: weniger ist Pflicht

Dargestellt wird das Favicon mit etwa 16 × 16 Pixeln. Das ist kleiner als ein Buchstabe in diesem Text. Daraus folgt fast alles:

• Ein Zeichen, nicht ein Logo. Der erste Buchstabe deines Namens, ein einfaches Symbol. Ein Logo mit Schriftzug ist bei dieser Größe ein grauer Fleck.
• Quadratisch. Alles andere wird beschnitten oder verzerrt.
• Starker Kontrast. Feine Linien verschwinden.
• Randabstand einplanen. Manche Browser runden die Ecken ab — was ganz außen liegt, wird abgeschnitten.

Prüfe es bei echter Größe: Öffne die Datei und verkleinere sie auf 16 Pixel Breite. Erkennst du es dann noch? Wenn nicht, ist das Motiv zu komplex. Dieser Test spart mehr Zeit als jede Anleitung.

Ein Favicon aus einem Buchstaben — ohne Grafikprogramm

Eine SVG-Datei ist Text. Du kannst sie in einem Texteditor schreiben und als favicon.svg speichern:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <rect width="100" height="100" rx="20" fill="#7c5cff"/>
  <text x="50" y="70" font-size="64" font-family="sans-serif"
        fill="#ffffff" text-anchor="middle">K</text>
</svg>

Farbe und Buchstabe austauschen, fertig. Für den Anfang reicht das vollkommen — und es ist in jeder Größe scharf.

Es erscheint nicht — die fünf Ursachen

Das ist die eigentliche Frage bei diesem Thema. In dieser Häufigkeit:

1. Der Browser zeigt den gemerkten Stand. Favicons werden besonders hartnäckig zwischengespeichert — teils tagelang und unabhängig vom normalen Zwischenspeicher. Lade mit gedrückter Umschalttaste neu, probiere ein privates Fenster oder einen anderen Browser.
2. Die Datei wurde nicht mit hochgeladen. Die HTML-Datei ist oben, das Symbol nicht. Sehr häufig.
3. Der Pfad stimmt nicht. Prüfe es direkt: Rufe deinedomain.de/favicon.svg im Browser auf. Erscheint das Symbol dort nicht, ist der Pfad das Problem und nicht die <link>-Zeile.
4. Groß- und Kleinschreibung weicht ab. Favicon.SVG und favicon.svg sind auf einem Webserver zwei verschiedene Dateien — lokal auf Windows fällt das nicht auf.
5. Die Zeile steht nicht im <head>. Im <body> wirkt sie nicht.

Der schnellste Test: Ruf die Symboldatei direkt als Adresse auf. Damit trennst du in fünf Sekunden die beiden Fälle „Datei ist nicht da" und „Datei ist da, aber nicht eingebunden". Die meisten suchen stattdessen zuerst in der HTML-Zeile — und die ist meist richtig.

Ein Detail, das kaum jemand nutzt: helles und dunkles Design

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <style>
    .sym { fill: #1a1a2e; }
    @media (prefers-color-scheme: dark) {
      .sym { fill: #ffffff; }
    }
  </style>
  <text class="sym" x="50" y="70" font-size="64"
        text-anchor="middle" font-family="sans-serif">K</text>
</svg>

Weil eine SVG-Datei CSS enthalten kann, lässt sich das Symbol an den Modus des Systems anpassen. Damit verschwindet ein dunkles Symbol nicht im dunklen Tab. Das geht nur mit SVG — ein weiterer Grund, dieses Format zu nehmen.

Und ohne Code?

Hier ist die ehrliche Antwort: Das Favicon ist einer der wenigen Fälle, die PageFix nicht abdeckt. Es steckt im <head> der Datei, also im unsichtbaren Teil — und PageFix arbeitet auf dem sichtbaren Teil der Seite. Du klickst dort Texte, Farben, Bilder, Links und Videos an; das Favicon ist nichts davon.

Für dieses eine Thema führt der Weg über den Code — oder über die Person, die deine Seite hochlädt. Es ist dafür auch eine Einmal-Aufgabe: Ein Favicon setzt man einmal und ändert es fast nie wieder.

Für alles, was auf der Seite sichtbar ist, gilt weiterhin der Klick-Weg: PageFix ist ein deutschsprachiger Web-Editor für KI-gebaute HTML-Seiten — Datei reinziehen, anklicken, ändern, herunterladen. Einmalzahlung von 49 €, kein Abo. Was genau geht und was nicht, steht im Nachschlagewerk.

Häufige Fragen

Zuletzt aktualisiert: 12. September 2026

← Zurück zur Startseite und PageFix ansehen