Asphyx: Die Seite wurde neu angelegt: „''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ü…“

2026-07-13T11:50:43Z

Die Seite wurde neu angelegt: „''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: <ul> <li>im Browser-Tab</li> <li>in Lesezeichen</li> <li>im Browserverlauf</li> <li>in Suchergebnissen</li> <li>als Verknü…“

Neue Seite

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

Zur Übersicht: [[:Kategorie:AAM Editor Hosting|AAM Editor Hosting]]

== Favicon ==

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

Es kann unter anderem erscheinen:

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

Ein gut erkennbares Favicon erleichtert die Wiedererkennung der Website.

== Geeignete Bilddatei vorbereiten ==

Das Favicon sollte quadratisch sein.

Empfohlene Größen:

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

Geeignete Formate:

<ul>
<li>PNG</li>
<li>SVG</li>
<li>ICO</li>
<li>JPG</li>
<li>GIF</li>
</ul>

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:

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

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

== Favicon hochladen ==

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

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

== Favicon ersetzen ==

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

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:

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

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:

<pre>
PNG
SVG
</pre>

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:

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

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:

<ul>
<li>normaler Browser-Tab</li>
<li>angehefteter Tab</li>
<li>Lesezeichen</li>
<li>Desktop-Browser</li>
<li>Smartphone oder Tablet</li>
<li>helle und dunkle Browseroberfläche</li>
</ul>

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

== Häufige Probleme ==

=== Favicon erscheint nicht ===

Mögliche Ursachen:

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

=== Symbol ist unscharf ===

Mögliche Ursachen:

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

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 ==

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

== Weiterführende Seiten ==

<ul>
<li>[[AAM Editor – Medien verwalten|Medien verwalten]]</li>
<li>[[AAM Editor – Farben einstellen|Farben einstellen]]</li>
<li>[[AAM Editor – Themes verwenden|Themes verwenden]]</li>
<li>[[AAM Editor – Speichern und Exportieren|Speichern und Exportieren]]</li>
</ul>

[[Kategorie:AAM Editor – Gestaltung und Medien|Favicon einrichten]]

AAM Editor – Favicon einrichten - Versionsgeschichte