Animiertes Favicon und statische ICO-Alternative

Ein animiertes Favicon ist eine Funktion der Website, die Sie in den vorgesehenen Browsern prüfen müssen. ImgConvert kann eine statische ICO-Alternative aus dem ersten Einzelbild eines GIF erstellen. Der Konverter bietet keine Option zum Beibehalten der Animation und erzeugt keine animierte ICO-Datei.

Was ist ein animiertes Favicon?

Ein Favicon (kurz für „favorite icon“, also Favoritensymbol) ist das kleine Symbol, das im Browser-Tab, in den Lesezeichen und in der Adressleiste erscheint. Ein animiertes Favicon wechselt zwischen mehreren Einzelbildern und erzeugt so sichtbare Bewegung im Browser-Tab.

Typische Einsatzmöglichkeiten sind:

• Benachrichtigungsanzeigen — Pulsieren oder Blinken als Hinweis auf neue Nachrichten
• Ladeanimationen — Ein rotierendes Symbol, während Inhalte verarbeitet werden
• Markenauftritt — Eine dezente Logoanimation, die der Marke Persönlichkeit verleiht
• Saisonale Aktionen — Vorübergehend animierte Symbole für Feiertage oder Werbeaktionen

Bereiten Sie ein aussagekräftiges erstes Einzelbild vor

Wählen Sie ein einfaches Symbol, das bei 16×16 oder 32×32 Pixeln erkennbar bleibt. Beginnt das GIF mit einem leeren Bild oder einer Einblendung, wählen Sie zuvor in einem Bildbearbeitungsprogramm ein geeigneteres Standbild aus. Der Konverter bietet keine Auswahl einzelner Animationsbilder.

Gestaltungsprinzipien für Animationen

Die folgenden Empfehlungen sind Ausgangspunkte für die Gestaltung in einem separaten Bildbearbeitungsprogramm. Sie sind keine Grenzen oder Einstellmöglichkeiten des ICO-Konverters. Passen Sie die Zeitabläufe an die tatsächliche Bewegung an und vermeiden Sie unnötiges Blinken.

Halten Sie die Animation einfach

Gute animierte Favicons setzen Bewegung sparsam ein. Bei 16×16 bis 32×32 Pixeln wirken komplexe Darstellungen schnell unübersichtlich:

• Höchstens 2–4 Einzelbilder für die meisten Effekte
• Einfache Bewegung — Pulsieren, Blinken, Drehen oder Verschieben
• Klare Silhouette in jedem Einzelbild
• Langsamer Ablauf — 500 ms oder mehr pro Animationszyklus

Passen Sie die Dauer an die Art der Animation an

Die Bedeutung des ersten Einzelbilds

Der Konverter verwendet das erste Einzelbild für die statische ICO-Ausgabe. Dieses Bild muss für sich allein funktionieren, unabhängig davon, ob eine separat umgesetzte Animation abgespielt wird:

• Ohne zusätzlichen Kontext erkennbares Markensymbol
• Klare Darstellung bei 16×16 und 32×32 Pixeln
• Guter Kontrast zur hellen und dunklen Browseroberfläche
• Kein Text, da er in Favicon-Größe nicht lesbar ist

Schritt für Schritt zur Animation

Die folgenden Empfehlungen sind Ausgangspunkte für die Gestaltung in einem separaten Bildbearbeitungsprogramm. Sie sind keine Grenzen oder Einstellmöglichkeiten des ICO-Konverters. Passen Sie die Zeitabläufe an die tatsächliche Bewegung an und vermeiden Sie unnötiges Blinken.

Schritt 1: Gestalten Sie die Einzelbilder

Erstellen Sie 2–4 unterschiedliche Einzelbilder für Ihre Animation:

Für eine pulsierende Benachrichtigung:

• Bild 1: Normales Symbol als Ausgangszustand
• Bild 2: Symbol mit dezentem Leuchten oder leicht vergrößerter Darstellung
• Bild 3: Rückkehr zum Ausgangszustand für eine flüssige Wiederholung

Für eine Ladeanimation:

• Bild 1: Symbol in der 12-Uhr-Position
• Bild 2: Symbol in der 3-Uhr-Position
• Bild 3: Symbol in der 6-Uhr-Position
• Bild 4: Symbol in der 9-Uhr-Position

Schritt 2: Exportieren Sie die Einzelbilder

Exportieren Sie jedes Einzelbild als PNG mit 32×32 Pixeln:

• Exportieren Sie das PNG mit Alphakanal, wenn das Einzelbild Transparenz benötigt.
• Behalten Sie transparente Hintergründe bei, wo sie erforderlich sind.
• Streben Sie weniger als 5 KB pro Einzelbild an.

Schritt 3: Setzen Sie das GIF zusammen

Fügen Sie die Einzelbilder zu einem animierten GIF zusammen:

Erstellen Sie das statische ICO-Paket

1. Öffnen Sie GIF in ICO und wählen Sie ein GIF mit bis zu 20 MB aus.
2. Wählen Sie die benötigten Größen: 16, 32, 48, 64, 128 oder 256 px. Vorausgewählt sind 32, 64 und 128.
3. Wandeln Sie die Datei um, laden Sie icons.zip herunter und entpacken Sie das Archiv.
4. Verwenden Sie ein einzelnes Icon oder die enthaltene Datei favicon.ico, die alle ausgewählten Größen umfasst. Dabei handelt es sich um Größenvarianten eines Standbilds, nicht um Animationsbilder.

Rechteckige Bilder werden mit transparenten Rändern in das Quadrat eingepasst. Ein undurchsichtiger Hintergrund im Ausgangsbild bleibt undurchsichtig. Für ein Website-Paket mit PNG-Icons und einem Manifest verwenden Sie den Favicon-Generator.

Binden Sie die statische Alternative auf Ihrer Website ein

Legen Sie die entpackte Datei im Stammverzeichnis Ihrer Website ab und verweisen Sie im Kopfbereich der Seite darauf:

<link rel="icon" href="/favicon.ico">

Passen Sie den Pfad an Ihre Bereitstellung an. Der Konverter installiert keine Dateien und bearbeitet Ihre Website nicht. Die MDN-Referenz zu icon erläutert die HTML-Deklaration.

Wenn sich das Favicon bewegen soll

Bewahren Sie die Originalanimation auf. Ein animiertes Bild als Favicon einzusetzen oder die Einzelbilder per JavaScript auf der Website auszutauschen, ist eine separate Implementierungsaufgabe. Gehen Sie nicht davon aus, dass eine Datei, die sich in einem Bildbetrachter bewegt, auch im Browser-Tab, in Lesezeichen oder in Verknüpfungen animiert wird. Testen Sie jeden benötigten Browser und stellen Sie eine gut erkennbare statische Alternative bereit.

JavaScript-Beispiel für die Website

Als Website-Verantwortliche können Sie versuchsweise die URL eines bestehenden Favicon-Links ändern. Dies ist separater Website-Code; das Hochladen eines GIF hier bindet es weder in eine Website ein noch richtet es eine Animation ein. Halten Sie für jedes Einzelbild eine statische Datei bereit und beginnen Sie mit einem aussagekräftigen statischen Icon.

Das folgende Beispiel wechselt alle 500 ms zwischen zwei PNG-URLs, solange die Seite sichtbar ist. Es stoppt, wenn die Seite verborgen wird oder reduzierte Bewegung gewünscht ist. Damit wird der Aktualisierungsmechanismus gezeigt; es gibt keine Garantie, dass jeder Browser-Tab, jedes Lesezeichen oder jede Betriebssystem-Verknüpfung animiert wird. Testen Sie die tatsächliche Zielumgebung, bevor Sie sich darauf verlassen.

<link id="favicon-demo" rel="icon" type="image/png" href="/icon-1.png">
<script>
  const icon = document.getElementById('favicon-demo');
  const frames = ['/icon-1.png', '/icon-2.png'];
  const motion = window.matchMedia('(prefers-reduced-motion: reduce)');
  let timer = null;
  let frameIndex = 0;

  function stopAnimation() {
    if (timer !== null) window.clearInterval(timer);
    timer = null;
    frameIndex = 0;
    icon.href = frames[0];
  }

  function syncAnimation() {
    stopAnimation();
    if (document.hidden || motion.matches) return;
    timer = window.setInterval(() => {
      frameIndex = (frameIndex + 1) % frames.length;
      icon.href = frames[frameIndex];
    }, 500);
  }

  document.addEventListener('visibilitychange', syncAnimation);
  motion.addEventListener('change', syncAnimation);
  syncAnimation();
</script>

Wann animierte Favicons sinnvoll sind und wann nicht

Geeignete Einsatzmöglichkeiten

Ungeeignete Einsatzmöglichkeiten

Optimierung der Leistung

Halten Sie die Zahl der Einzelbilder klein, stoppen Sie eine Animation, sobald die zugehörige Benachrichtigung nicht mehr relevant ist, und testen Sie die Seite mit und ohne Animation. Ein schnellerer Timer ergibt nicht zwangsläufig ein besseres Favicon. Vermeiden Sie mehrere Timer für dasselbe Icon. Wenn Sie dies in eine Komponente integrieren, entfernen Sie beim Entfernen der Komponente die Ereignis-Listener und stoppen Sie den Timer. Das Beispiel ist eigenständiger Seitencode.

Der MDN-Leitfaden zur Page Visibility API erläutert das hier verwendete Sichtbarkeitssignal. Eine visuelle Animation sollte eine barrierefreie Statusmeldung auf der Seite ergänzen, da ein Icon allein möglicherweise weder wahrgenommen noch von Hilfstechnologien ausgegeben wird.

Prüfen Sie das Ergebnis

• Öffnen Sie die URL des bereitgestellten Icons und prüfen Sie die kleinen Größen.
• Prüfen Sie bestehende Icon-Deklarationen und den Browser-Cache, falls weiterhin das alte Icon erscheint.
• Testen Sie die Animation unabhängig vom Download der statischen ICO-Datei.

Prüfen Sie alle tatsächlich unterstützten Browser und Geräte, jeweils mit einer neuen Sitzung und einer Sitzung mit vorhandenen Cache-Daten. Testen Sie das erste Einzelbild, separat umgesetzte Bewegungen, die Einstellung für reduzierte Bewegung und die Rückkehr zu einem zuvor verborgenen Tab. Prüfen Sie das Symbol bei 16×16 und 32×32 Pixeln auf heller und dunkler Browseroberfläche. Funktioniert die Animation nicht zuverlässig, behalten Sie die statische Alternative bei. Zielwerte für Dateigrößen sind projektspezifische Vorgaben, keine allgemeingültigen Browsergrenzen.

Häufig gestellte Fragen

Bleibt die GIF-Animation erhalten, wenn Sie mehrere ICO-Größen auswählen?

Nein. Alle Größen basieren auf dem ersten Einzelbild. Es gibt keinen Schalter zum Beibehalten der Animation.

Können Sie hier ein anderes Einzelbild auswählen?

Nein. Bereiten Sie das gewünschte Standbild in einem anderen Programm vor. Wenn Sie es als PNG gespeichert haben, verwenden Sie anschließend PNG in ICO.

Warum erscheint weiterhin ein altes Favicon?

Prüfen Sie, ob sich die URL der bereitgestellten Datei aufrufen lässt, untersuchen Sie konkurrierende Icon-Deklarationen und vergleichen Sie eine neue Browsersitzung mit einer Sitzung mit vorhandenen Cache-Daten. Tab-Symbole, Lesezeichen und installierte Verknüpfungen können unterschiedliche Dateien oder Caches verwenden. Das Aktualisieren eines Links auf einer Seite ersetzt nicht alle gespeicherten Icons.

Kann CSS allein das Tab-Symbol animieren?

Eine CSS-Animation eines Bildes innerhalb einer Webseite animiert nicht das Tab-Symbol des Browsers. Behandeln Sie eine direkt verlinkte animierte Datei oder einen versuchsweisen URL-Wechsel per JavaScript als separate Implementierungen und prüfen Sie das benötigte Browserverhalten.

Wie viel Bewegung sollten Sie verwenden?

Setzen Sie nur so viel Bewegung ein, wie zur Vermittlung des gewünschten Status nötig ist. Ein statisches Benachrichtigungssymbol kann diesen manchmal klarer vermitteln. Vermeiden Sie schnelles Blinken, behalten Sie ein erkennbares Standbild bei und prüfen Sie das Verhalten bei reduzierter Bewegung. Beurteilen Sie die Geschwindigkeit in der tatsächlichen kleinen Darstellungsgröße statt anhand einer großen Vorschau.