Eine kurze Geschichte des Favicon
Das Favicon (kurz für „Lieblingssymbol“) wurde 1999 von Internet Explorer 5 als 16×16 große ICO-Datei eingeführt, die in der Adressleiste angezeigt wird. Das W3C hat es im Jahr 2000 mit dem HTML-Element standardisiert.
In den folgenden zwei Jahrzehnten weitete sich der Bedarf dramatisch aus:
- 2007: Apple hat das Apple Touch Icon (57×57 PNG) für iOS-Lesezeichen eingeführt
- 2010: Android Chrome hat Unterstützung für Web-Apps hinzugefügt Symbole
- 2012: Windows 8 führte Kachelsymbole für angeheftete Metro-Apps ein
- 2019: SVG-Favicons erhielten Browserunterstützung und ermöglichten auflösungsunabhängige und Dark-Mode-fähige Favoriten
- 2023: PWA-Installationsanforderungen standardisiert auf 192×192 und 512×512
Alle erforderlichen Favicon-Größen im Jahr 2026
| Datei | Größe | Zweck |
|---|---|---|
| favicon.ico | 16×16, 32×32, 48×48 (mehrere Auflösungen) | Browser-Registerkarte, IE/Legacy Fallback |
| favicon-16x16.png | 16×16 | Kleiner Browser Tab |
| favicon-32x32.png | 32×32 | Browser-Tab, Browser Symbolleiste |
| apple-touch-icon.png | 180×180 | iOS/macOS Safari-Lesezeichen und Startseite Bildschirm |
| android-chrome-192x192.png | 192×192 | Android Chrome-Startseite Bildschirm |
| android-chrome-512x512.png | 512×512 | Android PWA Splash Bildschirm |
| mstile-150x150.png | 150×150 | Startmenü von Windows 8/10 Kachel |
| safari-pinned-tab.svg | SVG | Safari angeheftete Tabs (schwarz und weiß). SVG) |
| favicon.svg | SVG | Moderne Browser, dunkler Modus adaptiv |
SVG-Favoriten: Adaptive Dark Mode-Unterstützung
SVG-Favicons unterstützen CSS-Medienabfragen und ermöglichen responsive Symbole im Hell-/Dunkelmodus:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<style>
@media (prefers-color-scheme: dark) {
path { fill: white; }
}
</style>
<path fill="black" d="M10,10 L90,10 L90,90 L10,90 Z"/>
</svg>Dieses SVG zeigt automatisch ein helles Symbol im hellen Modus und ein dunkles Symbol im dunklen Modus an – perfekt für Logos, die an Systemthemen angepasst werden müssen.
Generieren Sie ein komplettes Favicon-Set auf ToolDolfen
- Öffnen Sie den ToolDolfen Favicon Generator.
- Laden Sie ein hochauflösendes quadratisches PNG hoch (512×512 oder 1024×1024 empfohlen – größere Quelle = überhaupt bessere Qualität). Größen).
- Der Generator erzeugt ein vollständiges ZIP-Paket mit:
– Alle erforderlichen PNG-Größen – ICO-Datei (mehrere Auflösung) – Web-Manifest-JSON-Vorlage – HTML-Code-Snippets für die -Implementierung
- Entpacken Sie die ZIP-Datei und legen Sie die Dateien im öffentlichen Verzeichnis Ihres Projekts ab.
- Fügen Sie die bereitgestellten HTML-Snippets zu Ihrem
hinzu.
Empfohlene Begleithandbücher
Entdecken Sie ergänzende Tutorials und Dienstprogramme aus diesem Themencluster, um Ihren digitalen Workflow zu verbessern: