ICO & Favicon, Browser-Icons für Websites und Apps

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:

Modernes Favicon-Ökosystem:

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.png
• favicon-16x16.png
• apple-touch-icon.png (180×180)
• android-chrome-192x192.png
• android-chrome-512x512.png
• safari-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

1. Website-Branding im Browser: Das Favicon erscheint im Browser-Tab und in der Lesezeichenleiste, ein kleines, aber für den Wiedererkennungswert wichtiges Markenelement.
2. 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.
3. 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.
4. Browser-Lesezeichen und Verlauf: In Lesezeichen-Managern, Verlaufslisten und Startseiten (Chrome, Firefox) erscheinen Favicons als visuelle Orientierungshilfe.
5. 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

• PNG-Format
• SVG-Format
• WebP-Format
• Bildformate für Social Media

Weiterführend

• Online: RealFaviconGenerator, Vollständiges Favicon-Set erstellen,
• Online: MDN Web Docs, favicon,
• Online: Web App Manifest,
• Online: Can I Use, SVG Favicons,