Warum Favicon-Abdeckung wichtig ist
Es geht längst nicht mehr nur um den Browser-Tab. Hier erfährst du, warum du das vollständige Icon-Set brauchst.
Was sind App-Icons?
App-Icons sind die Bilder, die du auf deinem Smartphone antippst, um eine Anwendung zu starten. Da neuere Handys mit höher auflösenden Displays erscheinen, werden App-Icons in höherer Auflösung nötig. Entwickler wollen weiterhin die älteren Handys mit geringerer Auflösung unterstützen – wenn du also ein App-Icon erstellst, musst du mehrere Größenvarianten desselben Bildes anlegen. Das gilt für alle Smartphones wie das iPhone und Android und sogar für Tablets wie das iPad.
Was macht dieses Tool?
Zwar unterstützen viele moderne Browser Favicons, die als GIF, PNG oder in anderen gängigen Formaten gespeichert sind, doch alle Versionen des Internet Explorer verlangen weiterhin Favicons im ICO-Format (ein Icon-Format von Microsoft). Dieses Tool bietet eine einfache Möglichkeit, jedes GIF, PNG oder JPEG in ICO umzuwandeln, das von allen modernen Browsern unterstützt wird. Außerdem kannst du damit Favicons von Grund auf in einem Online-Editor erstellen und generierte Favicons manuell anpassen, bis das Ergebnis stimmt.
Ein Favicon einbinden
Nachdem du mit diesem Tool ein Favicon generiert hast, lade es herunter und speichere es im Stammverzeichnis deiner Website. Füge dann den folgenden Code in den head deines HTML-Dokuments ein.
<link href="https://www.example.com/favicon-32x32.png" rel="shortcut icon" type="image/x-icon">
<link href="https://www.example.com/apple-touch-icon.png" rel="apple-touch-icon">Warum vollständige Abdeckung zählt
| Oberfläche | Was dir die Abdeckung bringt |
|---|---|
| Mobile Homescreens | Nutzer fügen Websites häufig ihren Homescreens auf iOS und Android hinzu. Ohne spezielle Touch-Icons sieht deine Seite aus wie ein generischer Screenshot oder ein Standard-Platzhalter, was den professionellen Auftritt deiner Marke beschädigt. |
| SEO und Suchergebnisse | Google und andere Suchmaschinen zeigen Favicons oft neben den Suchergebnissen an. Ein klares, hochwertiges Icon kann die Klickraten verbessern und Nutzern helfen, deine Marke sofort zu erkennen. |
| Markenvertrauen | Inkonsistenz zerstört Vertrauen. Wenn dein Icon in einem Tab gestochen scharf, in der Lesezeichenleiste aber verschwommen oder auf einem Tablet gar nicht sichtbar ist, signalisiert das mangelnde Sorgfalt. Vollständige Abdeckung sorgt überall für pixelgenaues Branding. |
| Plattform-Integration | Von Windows-Startmenü-Kacheln über angepinnte macOS-Tabs bis zu Safari-Leselisten nutzen verschiedene Betriebssysteme eigene Formate. Sie alle bereitzustellen sorgt dafür, dass sich deine Seite auf dem Gerät des Nutzers nativ anfühlt. |
In der Praxis
Wenn Websites eine ordentliche Favicon-Abdeckung umsetzen, erscheinen ihre Icons konsistent über alle Plattformen und Kontexte hinweg. Sieh dir an, wie die Favicons dieser großen Unternehmen ihre Links in Browser-Tabs, Lesezeichen, Suchergebnissen und beim Teilen sofort erkennbar machen. Diese visuelle Konsistenz schafft Markenwiedererkennung und Vertrauen: Nutzer erkennen deine Seite auf einen Blick, selbst in überfüllten Listen oder Suchergebnissen.
Ohne ordentliche Favicon-Abdeckung würden deine Links als generische Platzhalter oder kaputte Bilder erscheinen, was es für Nutzer schwerer macht, deine Marke zu erkennen, und die Klickraten senkt. Hier einige Beispiele für Unternehmen, die in vollständige Favicon-Abdeckung investiert haben:
netflix.com, apple.com, google.com, microsoft.com, amazon.com, meta.com, x.com, youtube.com, github.com, spotify.com, adobe.com, nvidia.com, tesla.com, uber.com, airbnb.com, stripe.com, shopify.com, notion.so, figma.com, dropbox.com, linkedin.com, instagram.com, tiktok.com, discord.com, slack.com, zoom.us, salesforce.com, oracle.com, ibm.com, intel.com, paypal.com, reddit.com und twitch.tv.
Die Icons, die wir unterstützen
Eine Aufschlüsselung jedes Dateityps, den unser Tool generiert, und wo er eingesetzt wird.
| Größen | Wo sie eingesetzt werden | Anmerkungen |
|---|---|---|
| 180x180, 120x120, 60x60 | Apple-Touch-Icons, iPhone und Retina | Werden von verschiedenen iPhone-Generationen genutzt, damit dein Icon auf hochauflösenden Retina-Displays scharf bleibt. |
| 167x167, 152x152, 76x76 | Apple-Touch-Icons, iPad und Tablet | iPad-Homescreens zeigen Icons in anderen Abmessungen als Handys. |
| 57x57, 72x72 | Apple-Touch-Icons, Legacy-iOS | Weiterhin für ältere Geräte enthalten, die noch im Umlauf sein könnten, um die Kompatibilität zu maximieren. |
| 192x192, 512x512 | Android und Chrome, über das Manifest | Android-Geräte setzen auf hochauflösende PNGs, und 192x192 ist der Standard für Homescreen-Shortcuts. Es wird nicht immer als eigenständige Datei generiert, wenn ein Manifest vorhanden ist, aber unser Tool priorisiert android-icon-192x192.png für direkte Verlinkung und Manifest-Einbindung, damit „Zum Startbildschirm hinzufügen“-Prompts und Splash-Screens funktionieren. |
| 32x32 | Standard-Favicon, moderne Desktop-Browser-Tabs | Der Goldstandard: genug Detail für Retina-Displays und trotzdem klein in der Dateigröße. |
| 16x16 | Standard-Favicon, Adressleisten und Lesezeichenlisten | Die klassische Größe. Unverzichtbar für Nicht-Retina-Displays und strikte 16px-Kontexte. |
| 96x96 | Standard-Favicon, Desktop-Shortcuts und Google TV | Wird außerdem von einigen speziellen Browser-Kontexten genutzt, die ein größeres Rasterbild verlangen. |
| 144x144 | Windows-Kacheln, ms-icon-144x144.png | Wenn ein Nutzer deine Seite ans Windows-Startmenü anpinnt, sucht Windows nach bestimmten Meta-Tags und Bildern. Wir generieren außerdem die Kachelfarben-Metadaten, damit sie zur Palette deiner Marke passen. |
Dieselbe Marke, in den Größen, die zählen
Weitere Überlegungen
| Aspekt | Detail |
|---|---|
| Web App Manifest | Moderne PWA-Funktionen (Progressive Web App) stützen sich stark auf die Datei manifest.json. Diese Datei sagt dem Browser, wie sich deine App im installierten Zustand verhalten soll, inklusive welcher Icons zu verwenden sind. Unser Tool generiert das automatisch. |
| Theme-Color | Das theme-color-Meta-Tag passt die Farbe der Browser-Symbolleiste auf Mobilgeräten an und sorgt für ein immersiveres Gefühl, das zum Design deiner Seite passt. |
| SVG-Favicons | Auch wenn wir auf breite Kompatibilität mit PNGs setzen, beginnen moderne Browser, SVG-Favicons zu unterstützen (link rel="icon" type="image/svg+xml"). Die sind großartig für die Skalierung, brauchen aber für volle Unterstützung weiterhin PNG-Fallbacks, etwa für Safari oder ältere Browser. |