Favicon prüfen
Ein kleines Bild steht für Ihre Website in Tabs, Lesezeichen, auf Startbildschirmen von Handys und in Suchergebnissen, und jeder dieser Orte will eine andere Datei. Diese Prüfung lädt jedes Icon herunter, das Sie veröffentlichen, und misst es.
Ein Logo, vier verschiedene Anfragen
Das Wort „Favicon“ stammt aus dem Jahr 1999, als der Internet Explorer 5 anfing, nach einer Datei namens favicon.ico zu suchen, um das Favoriten-Menü zu schmücken. Dieses 16-Pixel-Quadrat wird heute noch abgefragt, aber es hat inzwischen Gesellschaft. Welche Datei geladen wird, hängt vom Gerät des Besuchers ab:
| Wo es erscheint | Verwendete Datei | Größe |
|---|---|---|
| Browser-Tab, Lesezeichen, Verlauf | favicon.ico oder ein PNG oder SVG, angegeben mit rel="icon" | 16 bis 48 px oder Vektor |
| Startbildschirm von iPhone und iPad | rel="apple-touch-icon" | 180 × 180 px |
| Android-Startbildschirm, installierte Web-App | Im Web-Manifest aufgeführte Icons | 192 und 512 px |
| Google-Ergebnisse auf Handys | Die rel="icon"-Datei | Ein Vielfaches von 48 px oder Vektor |
Fehlt die richtige Datei, greift jedes System auf etwas Schlechteres zurück. Sie bekommen ein leeres Seitensymbol im Tab, einen winzigen Screenshot Ihrer Seite unter iOS, einen Buchstaben in einem grauen Kreis unter Android, eine Weltkugel bei Google.
Was heruntergeladen und gemessen wird
Die Prüfung liest das HTML der angegebenen Seite und sammelt jedes <link>, dessen rel icon, apple-touch-icon oder mask-icon ist, dazu den manifest-Link und die Icons, die diese Datei aufführt. Dann ergänzt sie zwei Adressen, die Browser ungefragt ausprobieren: /favicon.ico und /apple-touch-icon.png.
Bis zu 16 Dateien werden geladen. Dem angegebenen Attribut sizes glauben wir nicht einfach. Eine ICO-Datei wird geöffnet, um die darin verpackten Größen aufzulisten, bei einem SVG wird die viewBox gelesen, PNG- und JPEG-Dateien werden in Pixeln gemessen. Beim Apple-Icon werden die Ecken auf Transparenz geprüft. Eine Datei, die sich als HTML-Fehlerseite entpuppt, wird als solche gemeldet, und bei /favicon.ico ist diese Überraschung häufig.
Die Checkliste lesen
- Klassisches Favicon
- Bestanden mit einer ICO-Datei oder einem PNG mit 16, 32 oder 48 px. Durchgefallen, wenn es nichts dergleichen gibt. Eine Warnung, wenn ein SVG das einzige Icon ist, denn Feedreader, ältere Browser und viele Tools fragen
/favicon.icoab und sonst nichts. - SVG-Icon
- Optional. Eine Vektordatei bleibt in jeder Größe scharf und kann im Dark Mode ihre Farben ändern.
- Apple-Icon
- Durchgefallen, wenn es fehlt. Warnungen: kleiner als 180 px, transparenter Hintergrund (iOS füllt ihn schwarz) oder eine Datei, die unter der Standardadresse existiert, ohne Tag in der Seite.
- Manifest
- Eine Warnung, wenn die Seite auf keines verweist. Verweist sie auf eines, das sich nicht laden lässt oder kein gültiges JSON ist, ist das ein Fehler. Darin führt ein fehlendes 192-px-Icon zum Fehler, ein fehlendes 512-px-Icon zu einer Warnung und ein fehlendes „maskable“-Icon zu einem Hinweis.
- Designfarbe
- Optional.
<meta name="theme-color">färbt die Browserleiste unter Android ein. - Von Google akzeptierte Größe
- Eine Warnung, sofern nicht ein quadratisches Icon ein Vielfaches von 48 px misst (48, 96, 144, 192) oder ein SVG ist.
Jeder Fehler ergibt das Urteil „Unvollständig“, jede Warnung „Fast“. Die Vorschauen über der Liste zeigen das Icon, das jedes System aus Ihren Dateien wählen würde.
Ein vollständiger Satz aus einer Zeichnung
Gehen Sie von einer quadratischen Version Ihres Logos aus, so vereinfacht, dass man es bei 16 Pixeln noch erkennt. Exportieren Sie diese Dateien:
favicon.icomit Bildern in 16, 32 und 48 px, im Stammverzeichnis der Website.icon.svg, falls Ihr Logo als Vektor vorliegt.apple-touch-icon.png, 180 × 180, auf festem Hintergrund mit etwa 20 px Rand. iOS rundet die Ecken selbst ab.icon-192.pngundicon-512.pngfür das Manifest.icon-maskable-512.png, mit dem Logo in den mittleren 80 % des Quadrats, weil Android das Bild zu einem Kreis zuschneiden kann.
Dann geben Sie sie an:
<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">Das Ergebnis enthält diesen Block und eine passende site.webmanifest mit dem Namen Ihrer Website.
Die Prüfung sagt Ihnen, dass die Dateien existieren und die richtigen Abmessungen haben. Ob die Zeichnung bei 16 px lesbar ist oder auf einer dunklen Tableiste gut aussieht, kann sie nicht sagen. Schauen Sie sich die Vorschauen an, dann ein echtes Handy.
Häufige Fragen
Welche Größe sollte ein Favicon haben?
Sie brauchen mehrere. Stellen Sie eine favicon.ico mit 16, 32 und 48 px bereit, ein 180-px-PNG für Apple-Geräte und PNGs mit 192 und 512 px in einem Web-Manifest. Ein SVG-Icon kann in aktuellen Browsern alle Tab-Größen auf einmal abdecken.
Warum zeigt Google eine Weltkugel statt meines Favicons?
Google braucht ein quadratisches Icon, das ein Vielfaches von 48 px misst oder ein SVG ist, mit rel="icon" auf der Startseite angegeben und für den Googlebot erreichbar (nicht in robots.txt gesperrt). Nach der Korrektur erscheint das neue Icon, sobald die Startseite erneut gecrawlt wird. Das kann Tage oder einige Wochen dauern.
Brauche ich noch eine favicon.ico-Datei?
Ja. Browser akzeptieren PNG und SVG, aber viele andere Programme fragen direkt /favicon.ico ab: Feedreader, Dienste für Linkvorschauen, manche Passwortmanager und ältere Browser. Ohne die Datei protokolliert Ihr Server außerdem bei jeder dieser Anfragen einen 404.
Warum hat mein Icon auf dem iPhone einen schwarzen Hintergrund?
Das apple-touch-icon hat transparente Bereiche, und iOS füllt Transparenz mit Schwarz. Exportieren Sie das PNG auf einem deckenden Hintergrund in Ihrer Markenfarbe.
Ich habe mein Favicon geändert. Warum sehe ich noch das alte?
Browser halten Favicons länger im Cache als fast jede andere Datei. Öffnen Sie die Adresse des Icons direkt und laden Sie sie neu, oder hängen Sie eine Version an den Link, etwa href="/favicon.ico?v=2". Suchmaschinen aktualisieren nach ihrem eigenen Zeitplan.
Was ist ein maskierbares Icon?
Ein Icon mit zusätzlichem Rand, damit Android es zu einem Kreis, einem abgerundeten Quadrat oder einer anderen Form zuschneiden kann, ohne ins Logo zu schneiden. Sie geben es im Manifest mit "purpose": "maskable" an. Ohne ein solches Icon verkleinert Android Ihr normales Icon und setzt es auf eine weiße Scheibe.