AAM Editor – Favicon einrichten

Im Favicon-Tab wird das kleine Website-Symbol eingerichtet, das im Browser-Tab, in Lesezeichen und auf mobilen Geräten angezeigt wird.

Zur Übersicht: AAM Editor Hosting

Favicon

Ein Favicon ist das kleine Symbol neben dem Seitentitel im Browser.

Es kann unter anderem erscheinen:

im Browser-Tab
in Lesezeichen
im Browserverlauf
in Suchergebnissen
als Verknüpfungssymbol auf mobilen Geräten
bei installierten Web-Apps

Ein gut erkennbares Favicon erleichtert die Wiedererkennung der Website.

Geeignete Bilddatei vorbereiten

Das Favicon sollte quadratisch sein.

Empfohlene Größen:

32 × 32 Pixel: grundlegende Darstellung im Browser-Tab
192 × 192 Pixel: mobile Geräte und größere Darstellungen
512 × 512 Pixel: hochwertige Ausgangsdatei für verschiedene Ausgabegrößen

Geeignete Formate:

PNG
SVG
ICO
JPG
GIF

Für Logos mit transparentem Hintergrund eignet sich PNG oder SVG besonders gut.

Gestaltungsempfehlungen

Ein Favicon wird meist sehr klein angezeigt. Deshalb sollte das Motiv:

eine einfache Form besitzen
auch bei geringer Größe erkennbar bleiben
wenige feine Details enthalten
ausreichenden Kontrast besitzen
möglichst ohne langen Text auskommen

Ein einzelnes Symbol oder Monogramm funktioniert häufig besser als ein vollständiges Firmenlogo mit Schriftzug.

Favicon hochladen

Im Editor den Favicon-Tab öffnen.
Auf Hochladen oder das vorhandene Bildfeld klicken.
Die vorbereitete Bilddatei auswählen.
Den Upload abwarten.
Die Darstellung in der Vorschau kontrollieren.
Das Projekt speichern.
Die Website vollständig exportieren.

Das neue Favicon erscheint auf der veröffentlichten Website erst nach dem Export.

Favicon ersetzen

Den Favicon-Tab öffnen.
Das vorhandene Favicon auswählen.
Eine neue Bilddatei hochladen.
Projekt speichern und erneut exportieren.

Browser können Favicons längere Zeit zwischenspeichern. Deshalb kann nach dem Austausch zunächst noch das bisherige Symbol erscheinen.

Browser-Cache aktualisieren

Wird nach dem Export weiterhin das alte Favicon angezeigt, können folgende Maßnahmen helfen:

Seite mit Strg + F5 neu laden
Browser-Tab schließen und erneut öffnen
Browser-Cache leeren
Website in einem privaten Fenster öffnen
einige Minuten warten und erneut prüfen

Der verzögerte Austausch bedeutet nicht zwangsläufig, dass der Export fehlgeschlagen ist.

Transparenter Hintergrund

Ein transparenter Hintergrund ist sinnvoll, wenn das Symbol auf hellen und dunklen Browseroberflächen funktionieren soll.

Geeignete Formate:

PNG
SVG

JPG unterstützt keine Transparenz und verwendet immer eine feste Hintergrundfläche.

Favicon und Website-Logo

Das Favicon ist nicht automatisch mit dem sichtbaren Logo innerhalb der Website identisch.

Beide Dateien können getrennt verwendet werden:

Website-Logo: größere Darstellung innerhalb der Seite oder Navigation
Favicon: stark vereinfachtes Symbol für Browser und Geräte

Für kleine Darstellungen sollte häufig eine vereinfachte Variante des Logos verwendet werden.

Darstellung prüfen

Nach dem Export sollte das Favicon in mehreren Situationen kontrolliert werden:

normaler Browser-Tab
angehefteter Tab
Lesezeichen
Desktop-Browser
Smartphone oder Tablet
helle und dunkle Browseroberfläche

Sehr dunkle oder sehr helle Symbole können abhängig vom Browserdesign schlecht sichtbar sein.

Häufige Probleme

Favicon erscheint nicht

Mögliche Ursachen:

Website wurde nach dem Upload nicht exportiert
Browser zeigt noch eine zwischengespeicherte Version
Bilddatei konnte nicht hochgeladen werden
Dateiformat wird vom Browser nicht unterstützt
die Website wird noch aus einem älteren Cache geladen

Symbol ist unscharf

Mögliche Ursachen:

Ausgangsdatei ist zu klein
das Motiv enthält zu viele feine Details
das Bild wurde aus einer ungeeigneten Größe hochskaliert

Als Ausgangsdatei sollte möglichst eine quadratische Datei mit mindestens 192 × 192 Pixeln verwendet werden.

Symbol ist kaum erkennbar

Das Motiv sollte vereinfacht und mit stärkerem Kontrast neu gestaltet werden.

Schriftzüge und filigrane Elemente sind bei einer Darstellung von 16 oder 32 Pixeln meist nicht lesbar.

Empfehlungen

Eine quadratische Datei mit 512 × 512 Pixeln als Ausgangspunkt verwenden.
PNG oder SVG mit transparentem Hintergrund bevorzugen.
Das Motiv möglichst einfach halten.
Keine langen Schriftzüge verwenden.
Darstellung in hellen und dunklen Browserdesigns prüfen.
Nach jeder Änderung speichern und vollständig exportieren.
Bei unveränderter Anzeige zunächst den Browser-Cache berücksichtigen.

Weiterführende Seiten