Was sind ICO und Favicon
Öffnen Sie eine beliebige Website, das kleine Symbol auf dem Browser-Tab ist das Favicon. Es ist meist eine .ico-Datei, manchmal auch PNG. Das Favicon ist das „Gesicht“ der Website, anhand dessen Nutzer Ihre Website unter vielen Tabs schnell erkennen.
Warum das ICO-Format
Obwohl moderne Browser PNG als Favicon unterstützen, hat das ICO-Format unersetzliche Vorteile:
- Beste Kompatibilität: alte Browser und Windows-Desktop-Verknüpfungen erkennen nur ICO
- Mehrfachgrößen-Paket: eine ICO-Datei kann 16x16, 32x32, 48x48 usw. enthalten, das System wählt automatisch
- Lesezeichen, PWA-Icons: in einigen Szenarien noch erforderlich
DocsAll Bild-zu-ICO-Tool
Mit dem Bild-zu-ICO-Tool schnell generieren:
- Ein quadratisches Quellbild vorbereiten (PNG 256x256 oder größer empfohlen)
- ICO-Konvertierungs-Tool öffnen, Quellbild hochladen
- Das Tool generiert automatisch ein ICO mit mehreren Größen
- .ico-Datei herunterladen
Favicon-Konfiguration
Grundkonfiguration
Platzieren Sie favicon.ico im Stammverzeichnis der Website, der Browser erkennt es automatisch. Sie können es auch im HTML-head mit einem link-Tag explizit deklarieren, mit rel-Attribut auf icon und href auf favicon.ico gesetzt.
Mehrgeräte-Anpassung
Für moderne Websites wird empfohlen, mehrere Größen gleichzeitig zu konfigurieren:
- favicon.ico: Standard, im Stammverzeichnis
- apple-touch-icon.png (180x180): für iOS-Zugriff zum Startbildschirm
- icon.png (192x192, 512x512): für PWA
Quellbild-Design-Empfehlungen
- PNG verwenden: unterstützt transparenten Hintergrund, ICO aus PNG konvertiert ist besser
- Quadratisch: 16x16, 32x32 sind Anzeigegrößen, größeres Quellbild erleichtert die Skalierung
- Einfach: bei kleinen Größen werden komplexe Muster verschwommen, verwenden Sie einfache Formen und Markenfarben
- Transparenter Hintergrund: vermeidet weiße Kacheln, fügt sich in den Browser-Tab ein
Häufige Probleme
Favicon wird nicht aktualisiert
Der Browser-Cache ist hartnäckig, wenn das Favicon nach Änderung nicht angezeigt wird, erzwingen Sie eine Aktualisierung (Strg+F5) oder fügen Sie dem Pfad einen Versionsparameter hinzu, z. B. favicon.ico?v=2.
Symbol verschwommen
Quellbild zu klein oder nicht quadratisch und verzerrt. Mit einem quadratischen PNG ab 256x256 neu generieren.
Ein klares Favicon wirkt professioneller. Mit dem ICO-Tool in wenigen Minuten erledigt – lassen Sie den Tab nicht leer.