Was ist ein Favicon und wie macht man eines aus seinem Logo (2026)

Ein Favicon ist das winzige Symbol, das Ihre Website in einem Browser-Tab, Lesezeichen oder auf dem Handy-Startbildschirm repräsentiert. Machen Sie es aus dem Symbol Ihres Logos, vereinfachen Sie es, damit es bei 16–32 Pixeln lesbar ist, und liefern Sie den minimalen 2026-Dateisatz: ein SVG, ein ICO-Fallback und ein 180×180-apple-touch-icon.

Von LogoSagaVeröffentlicht
Auf dieser Seite
  1. Was ist ein Favicon?
  2. Warum ist ein Favicon wichtig?
  3. Die Favicon-Größen und -Formate, die Sie brauchen
  4. Wie man aus seinem Logo ein Favicon macht
  5. Ein Favicon in Ihrem HTML einbinden
  6. Bonus: ein Favicon, das sich an den Dark Mode anpasst
  7. Ihr Favicon testen
Dasselbe Zeichen in Favicon-Größen, inklusive einer Version in Browser-Tab-Größe.
Ein Favicon ist das Zeichen Ihres Logos, vereinfacht, damit es in winzigen Größen klar bleibt.

Was ist ein Favicon?

Ein Favicon (kurz für „favorite icon”) ist das kleine quadratische Bild, das eine Website in einem Browser-Tab, einem Lesezeichen, einem Verlaufseintrag und auf einem Handy-Startbildschirm repräsentiert. Es ist fast immer eine vereinfachte Version des Logos einer Marke — konkret das Zeichen, da bei dieser Größe kein Platz für den vollen Namen ist.

Warum ist ein Favicon wichtig?

Ein Favicon ist ein kleines, aber konstantes Stück Branding. Bei einem Dutzend offener Tabs ist es oft die einzige Möglichkeit, Ihre Seite auf einen Blick zu erkennen, und ein auf dem Startbildschirm gespeichertes Symbol sitzt neben polierten App-Symbolen. Ein scharfes, markengerechtes Favicon wirkt durchdacht; ein fehlendes oder unscharfes wirkt unfertig.

Die Favicon-Größen und -Formate, die Sie brauchen

Sie brauchen nicht das Dutzend Icons, das alte Anleitungen auflisten. 2026 ist der minimale, verlässliche Satz klein:

DateiGrößeZweck
favicon.svgbeliebigmoderne Browser; kann sich an Dark Mode anpassen
favicon.ico16 + 32Legacy-Fallback (ältere Browser)
apple-touch-icon.png180×180iOS-Startbildschirm
PWA-Icons (optional)192, 512installierbare Web-Apps

Größen wie 64×64, 96×96 und 128×128, die ältere Ratgeber empfehlen, sind obsolet — lassen Sie sie weg. Das .ico ist ein Fallback, nicht die Hauptdatei: Browser, die SVG unterstützen, bevorzugen es.

Wie man aus seinem Logo ein Favicon macht

  1. Beginnen Sie mit dem Zeichen, nicht dem ganzen Logo — der Name wird in Tab-Größe nicht lesbar sein.
  2. Vereinfachen Sie für winzige Größen. Lassen Sie feine Details, dünne Linien und subtile Verläufe weg, die bei 16–32 Pixeln verschwinden. Bevorzugen Sie kräftige Formen und hohen Kontrast.
  3. Halten Sie es quadratisch mit etwas Abstand, damit es nicht an die Tab-Ränder gedrängt wird.
  4. Exportieren Sie den Satz — SVG, ICO und das 180×180-PNG — aus dem Vektor-Master Ihres Logos.
Der Export-Schritt im LogoSaga-Editor zeigt favicon.svg zusammen mit den Logo-Dateien.
Der Export aus dem Vektor-Master liefert ein Favicon, das exakt zum Logo passt.

Weil SVG das ideale Master-Format ist, lohnt es sich, SVG vs. PNG für Logos zu verstehen, bevor Sie exportieren.

Ein Favicon in Ihrem HTML einbinden

Verweisen Sie im <head> Ihrer Seiten auf die Dateien. Ein moderner, minimaler Satz sieht so aus:

<link rel="icon" href="/favicon.ico" sizes="32x32" />
<link rel="icon" href="/favicon.svg" type="image/svg+xml" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />

Browser, die SVG unterstützen, nutzen es; die übrigen greifen auf das ICO zurück.

Bonus: ein Favicon, das sich an den Dark Mode anpasst

Ein SVG-Favicon kann sein eigenes Dark-Mode-Styling mitbringen. Betten Sie eine Media-Query ins SVG ein, sodass das Zeichen die Farben mit dem Browser-Theme wechselt:

<style>
  path {
    fill: #18231d;
  }
  @media (prefers-color-scheme: dark) {
    path {
      fill: #eef1ea;
    }
  }
</style>

Chrome, Firefox und Edge berücksichtigen dies; Safari noch nicht, wählen Sie also Farben, die auf beiden Themes als Fallback lesbar bleiben.

Ihr Favicon testen

Prüfen Sie es in einem echten Browser-Tab, hell und dunkel, und auf einem Handy-Startbildschirm. Weil Browser Favicons stark cachen, laden Sie nach jeder Änderung hart neu — oder umgehen Sie den Cache, indem Sie die Datei umbenennen oder ?v=2 anhängen. Wenn es in Tab-Größe matschig aussieht, vereinfachen Sie das Zeichen weiter: Das Favicon ist der ehrliche Test dafür, wie gut sich ein Logo verkleinern lässt.

Wenn Sie Ihr Logo mit LogoSaga bauen, enthält der Export bereits ein favicon.svg neben dem Logo-SVG und -PNG, sodass das Favicon immer exakt zum Zeichen passt.

Erstellen Sie ein Logo mit passendem Favicon

Häufige Fragen

Welche Größe sollte ein Favicon haben?

Liefern Sie ein skalierbares SVG plus PNG-Rastergrößen: 32×32 ist der moderne Tab-Standard, 16×16 ist die klassische kleine Größe und 180×180 ist das Apple-Touch-Icon. PWAs brauchen zudem 192×192 und 512×512.

Welches Format sollte ein Favicon haben — SVG, PNG oder ICO?

Nutzen Sie ein SVG für moderne Browser, ein ICO als Legacy-Fallback und PNGs für das apple-touch-icon und die PWA-Größen. SVG ist skalierbar und kann sich sogar an den Dark Mode anpassen; ICO deckt ältere Browser ab.

Kann sich ein Favicon im Dark Mode ändern?

Ja, mit einem SVG-Favicon. Betten Sie eine prefers-color-scheme-Media-Query ins SVG ein, um helle und dunkle Farben zu definieren. Safari berücksichtigt sie noch nicht, wählen Sie also eine neutrale Farbe, die auf beiden lesbar ist.

Warum wird mein Favicon nicht angezeigt oder aktualisiert?

Browser cachen Favicons aggressiv. Nach einer Änderung hart neu laden oder den Cache umgehen, indem Sie die Datei umbenennen oder einen Query-String wie favicon.svg?v=2 anhängen, und prüfen, dass die Link-Tags im Seiten-Head korrekt sind.

Quellen