ICO (Icon File Format) ist das native Windows-Icon-Format mit mehreren Größen in einer Datei; Favicons sind die im Browser-Tab, Lesezeichen und Startbildschirm angezeigten Website-Icons – implementiert als ICO, PNG oder SVG.
Rubrik: Ausgabeformate & Technische Standards · Unterrubrik: Bild-Dateiformate · Niveau: Fortgeschritten Synonyme / Auch bekannt als: .ico, favicon.ico, .png-Icon, Apple Touch Icon, Web App Manifest Icon
Was sind ICO und Favicon?
ICO ist ein von Microsoft entwickeltes Container-Format, das mehrere Bild-Versionen desselben Icons in verschiedenen Auflösungen und Farbtiefen in einer einzelnen Datei vereint. Windows-Anwendungen nutzen ICO-Dateien für Programmicons, Ordneransichten und Datei-Verknüpfungen.
Favicon (kurz für „Favorites Icon") bezeichnet das kleine Symbol, das Browser im Tab, in der Adressleiste, in Lesezeichen und auf Startbildschirmen anzeigen. Der Begriff stammt aus der frühen Internet Explorer-Ära (1999), als Microsoft das Feature einführte. Favicons können als favicon.ico (klassisch), als PNG oder als SVG implementiert werden.
Moderne Websites benötigen nicht mehr nur das klassische favicon.ico – ein umfassendes Icon-Set umfasst heute Versionen für alle Plattformen: Browser-Tab, Android-Home-Screen, Apple Touch Icon (iOS), Windows-Live-Tiles und mehr.
Technische Eigenschaften
ICO-Format:
| Eigenschaft | Wert |
|---|---|
| Dateiformat | Container mit mehreren Bitmaps |
| Enthaltene Formate | BMP und PNG (innerhalb des ICO-Containers) |
| Farbtiefe | 1, 4, 8, 24, 32 Bit |
| Transparenz | Ja (32-Bit-ICO mit Alpha-Kanal, 1-Bit-Maske bei älteren Versionen) |
| Übliche Größen | 16×16, 32×32, 48×48, 64×64, 128×128, 256×256 px |
| Animation | Nein (nur CUR-Format für animierte Cursor) |
| Browser-Support | Alle Browser (aus favicon.ico) |
Modernes Favicon-Ökosystem:
| Plattform | Format | Größe | Implementierung |
|---|---|---|---|
| Browser-Tab (klassisch) | ICO | 16×16, 32×32 | favicon.ico im Root |
| Browser-Tab (modern) | PNG oder SVG | 32×32, 48×48 | <link rel="icon"> |
| Apple Touch Icon (iOS) | PNG | 180×180 px | <link rel="apple-touch-icon"> |
| Android Home Screen | PNG | 192×192, 512×512 | Web App Manifest |
| Windows Live Tiles | PNG | 150×150, 310×310 | msapplication-TileImage |
| macOS Safari Pinned Tab | SVG | Skalierbar | <link rel="mask-icon"> |
| PWA (Progressive Web App) | PNG | 192×192, 512×512 | Manifest.json |
Das komplette Favicon-Setup (Best Practice 2024)
Ein professionelles Favicon-Setup besteht aus folgenden Dateien:
Minimal (für einfache Websites):
favicon.ico(16×16 + 32×32 in einer Datei)apple-touch-icon.png(180×180 px)
Vollständig (für Web-Apps und professionelle Websites):
favicon.ico(16×16 + 32×32)favicon-32x32.pngfavicon-16x16.pngapple-touch-icon.png(180×180)android-chrome-192x192.pngandroid-chrome-512x512.pngsafari-pinned-tab.svg(monochromes SVG)site.webmanifest(JSON-Datei mit Icon-Referenzen)browserconfig.xml(für Windows-Tiles, optional)
HTML-Implementierung: ``html <link rel="icon" href="/favicon.ico" sizes="any"> <link rel="icon" href="/favicon.svg" type="image/svg+xml"> <link rel="apple-touch-icon" href="/apple-touch-icon.png"> <link rel="manifest" href="/site.webmanifest"> ``
Web App Manifest (site.webmanifest): ``json { "name": "Meine Website", "icons": [ { "src": "/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" }, { "src": "/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png" } ] } ``
Einsatzgebiete
- Website-Branding im Browser: Das Favicon erscheint im Browser-Tab und in der Lesezeichenleiste – ein kleines, aber für den Wiedererkennungswert wichtiges Markenelement.
- Progressive Web Apps (PWA): PWAs benötigen ein vollständiges Icon-Set, um als echte App auf dem Home-Screen von iOS und Android zu erscheinen. Ohne korrekte Icons wird ein Screenshot der Website als Icon verwendet.
- Startbildschirm-Icons (iOS/Android): Wenn Nutzer eine Website auf dem iPhone-Homescreen hinzufügen, wird das Apple Touch Icon (180×180 px PNG) verwendet. Ohne dieses Icon wird ein automatischer Screenshot erzeugt.
- Browser-Lesezeichen und Verlauf: In Lesezeichen-Managern, Verlaufslisten und Startseiten (Chrome, Firefox) erscheinen Favicons als visuelle Orientierungshilfe.
- E-Mail-Clients und Messaging: Einige E-Mail-Clients zeigen das Favicon der verlinkten Website als Vorschau neben Links an.
In der Praxis
Erstellen eines vollständigen Favicon-Sets:
Schritt 1 – Ausgangsgrafik erstellen:
- Logo als SVG oder hochauflösendes PNG (mindestens 512×512 px)
- Einfache, erkennbare Form wählen (bei 16×16 px sind Details nicht sichtbar)
- Testen: Wie sieht das Logo als 16×16 px-Quadrat aus?
Schritt 2 – Automatische Generierung (empfohlen):
- RealFaviconGenerator (https://realfavicongenerator.net): Upload des Logos, automatische Erzeugung aller Größen und Formate, fertiger HTML-Code
- Favicon.io (https://favicon.io): Einfachere Alternative
Schritt 3 – Manuelle Erstellung in Photoshop/Illustrator:
- Exportgrößen: 512×512, 192×192, 180×180, 48×48, 32×32, 16×16 px
- Format: PNG-32 für alle (außer favicon.ico)
- ICO-Erstellung: Windows-Programm „IcoFX" oder Online-Konverter
Adobe Photoshop – ICO-Export:
- Plugin benötigt: „ICOFormat" von telegraphics.com.au (kostenlos)
- Datei > Speichern als > ICO: Alle Größen in einer Datei
Figma:
- Frames in den korrekten Größen anlegen
- Als PNG exportieren
- Für ICO: PNG zu ICO mit Konverter konvertieren
Häufige Fragen (FAQ)
Warum erscheint mein neues Favicon nicht? Browser cachen Favicons aggressiv. Lösung: Cache leeren (Strg+Shift+R bzw. Cmd+Shift+R), oder einen privaten/inkognito Browser-Tab öffnen. Alternativ: In den Entwicklertools (F12) unter „Network > Disable Cache" das Favicon neu laden. Manchmal hilft es auch, die Favicon-URL direkt aufzurufen und den Browser zur Aktualisierung zu zwingen.
Reicht eine einzige favicon.ico-Datei für alle Browser? Für einfache Websites: Ja. favicon.ico im Root-Verzeichnis wird von allen Browsern automatisch erkannt und geladen. Für professionelle Web-Apps und optimale Darstellung auf iOS-Geräten und als PWA sind jedoch Apple Touch Icons und Web-App-Manifest-Icons unverzichtbar. Die empfohlene Mindestausstattung ist favicon.ico + apple-touch-icon.png (180×180 px).
Sollte man SVG als Favicon verwenden? Ja, als Ergänzung – nicht als alleinige Lösung. SVG-Favicons (<link rel="icon" type="image/svg+xml">) werden von modernen Browsern (Chrome, Firefox) unterstützt und sehen auf Retina-Displays perfekt aus. Als Fallback sollte immer favicon.ico vorhanden sein, da Safari und ältere Browser SVG-Favicons nicht vollständig unterstützen.
Verwandte Einträge
Weiterführend
- Online: RealFaviconGenerator – Vollständiges Favicon-Set erstellen –
- Online: MDN Web Docs – favicon –
- Online: Web App Manifest –
- Online: Can I Use – SVG Favicons –
