Ein Favicon ist das kleine Bild, das eine Website in Browser-Registerkarten und Lesezeichen identifiziert. Der Name kommt von „Lieblingssymbol“. Es bietet Lesern eine visuelle Möglichkeit, eine Website auf geöffneten Seiten zu finden, selbst wenn eine Registerkarte zu schmal ist, um den Titel anzuzeigen. Suchmaschinen können neben einem Ergebnis auch das Favicon einer Website anzeigen. MDNs Favicon-Definition beschreibt diese häufigen Browserverwendungen.
Der orange segmentierte Kreis vonSearchVector ist ein Beispiel. Das Cover-Diagramm verwendet sein eigentliches Symbol-Asset, um die Verbindung zwischen einer Bilddatei, dem HTML-Code einer Seite und dem Browser zu erläutern. Es handelt sich um ein Lehrdiagramm, nicht um einen Screenshot eines Suchergebnisses.
Bereit zur Implementierung? Gehen Sie zu „T7“, dem HTML-Setup, T8 oder „T9“, Fehlerbehebung bei fehlenden Symbolen, T10, T11.
Favicon, Logo und soziales Image: Was ist welches?
Ein Logo ist die umfassendere visuelle Identität eines Unternehmens. Es kann ein Symbol, einen vollständigen Namen und einen Slogan enthalten. Ein Favicon ist eine kleine Anwendung dieser Identität, normalerweise ein vereinfachtes Symbol, das auch in winzigen Größen erkennbar bleibt. Durch das Verkleinern einer gesamten Wortmarke sind ihre Buchstaben häufig nicht mehr zu unterscheiden.
| Asset | Main job |
|---|---|
| Favicon | Identifizieren Sie die Seite in einem Browser-Tab oder Lesezeichen |
| Header-Logo | Identifizieren Sie die Marke im Seitenlayout |
| Social Preview Bild | Veranschaulichen Sie einen freigegebenen Link mit einem größeren Bild |
| Startbildschirmsymbol | Stellen Sie eine gespeicherte Website oder eine installierte Web-App auf einem dar Gerät |
Das Ändern des Header-Logos führt nicht unbedingt zu einer Aktualisierung des Favicons. Hierbei kann es sich um separate Dateien handeln, die durch unterschiedliche Einstellungen gesteuert werden. Ebenso wird durch das Ersetzen eines sozialen Vorschaubilds kein fehlendes Tab-Symbol repariert. Identifizieren Sie zunächst die fehlerhafte Oberfläche und finden Sie dann die Einstellung, die sie liefert.
Wählen Sie ein Symbol, das kleinen Größen standhält
Beginnen Sie mit einer quadratischen Leinwand und einer einfachen Silhouette. Exportieren Sie ein großes Quellbild und zeigen Sie es dann als praktische Designüberprüfung in den Auflösungen 16×16 und 32×32 in der Vorschau an. Diese Vorschauen testen die Lesbarkeit; Sie behaupten nicht, dass jeder Browser das Symbol in einer festen Größe darstellt. Achten Sie auf verschwindende Striche, überfüllte Buchstaben und transparente Bereiche, die mit dem Tab-Hintergrund verschmelzen.
Überprüfen Sie die Markierung sowohl vor hellem als auch vor dunklem Hintergrund. Ein dünner dunkler Umriss kann auf einer dunklen Registerkarte verschwinden, während ein blasses Symbol auf einer hellen Registerkarte verschwinden kann. Eine solide Form mit bewusstem Kontrast ist oft leichter zu erkennen. Verlassen Sie sich nicht nur auf die Farbe: Eine markante Kontur hilft auch dann, wenn Symbole optisch ähnlich sind.
Behalten Sie eine Quelldatei, die Ihr Team bearbeiten kann. Durch das Exportieren einer größeren Kopie einer verschwommenen Miniaturansicht werden deren Details nicht wiederhergestellt. Genehmigen Sie für ein Rebranding das kleine Symbol neben dem Hauptlogo, damit sich die Website, Lesezeichen und gespeicherten Verknüpfungen zusammenhängend anfühlen.
Fügen Sie ein Favicon mit einem echten HTML-Beispiel hinzu
SearchVector stellt ein echtes 512×512 PNG unter seiner Favicon-Bild-URL bereit. Diese minimale Deklaration verweist auf das vorhandene Asset auf der Site SearchVector:
/favicon.png von SearchVector an; Auf Ihrer Domain fordert es diese Datei von Ihrer Domain an. Laden Sie für Ihre eigene Website Ihr eigenes Marken-Asset hoch und verwenden Sie dessen tatsächlichen Pfad. Wenn Sie das Tag kopieren, ohne das Bild hochzuladen, bleibt eine fehlerhafte Referenz zurück.
Das Attribut rel identifiziert die Ressource als Symbol. href lokalisiert es, type beschreibt sein Format und sizes beschreibt die Bildabmessungen. Durch das Schreiben von „512x512“ wird die Größe einer Datei nicht geändert. Überprüfen Sie das exportierte Bild und achten Sie darauf, dass die Deklaration korrekt ist.
SearchVector deklariert auch SVG- und ICO-Alternativen. Browser können mithilfe von Attributen wie Typ und Größe zwischen Symboldeklarationen wählen, wie in MDNs Symbol-Link-Referenz erläutert. Mehrfachdeklarationen sind daher nicht automatisch ein Problem, veraltete Alternativen können jedoch inkonsistente Erscheinungsbilder erklären.
Wenn Sie ein CMS verwenden, beginnen Sie mit dessen Site-Icon-Einstellung. Wenn Sie ein Framework verwenden, verwenden Sie dessen etablierten Metadatenmechanismus. Überprüfen Sie dann den resultierenden HTML-Code: Ein erfolgreicher Upload in einen Admin-Bildschirm ist nur ein Teil der Aufgabe. Vermeiden Sie das Hinzufügen einer zweiten konkurrierenden Einstellung, bevor Sie überprüfen, was die vorhandene Vorlage bereits ausgibt.
Was Google für das Erscheinungsbild in der Suche benötigt
Googles Favicon-Dokumentation erfordert ein quadratisches Bild mit mindestens 8×8 Pixeln und empfiehlt eine Größe von mehr als 48×48. Zu den aufgeführten Formaten gehören PNG und ICO. Gehen Sie nicht davon aus, dass eine SVG-Datei, die in einem Browser funktioniert, Unterstützung in der Suchdarstellung von Google herstellt.
Die Homepage muss das Symbol deklarieren. Googlebot benötigt Zugriff auf diese Homepage und Googlebot-Image benötigt Zugriff auf die Symboldatei. Halten Sie die Symbol-URL stabil und verwenden Sie eine für die Website repräsentative Marke. Google unterstützt ein Favicon pro Hostname: Eine Subdomain kann ihr eigenes haben, aber ein Unterverzeichnis erhält kein separates Such-Favicon.
Die Teilnahmeberechtigung garantiert keine Anzeige. Nach einer Änderung muss Google die Homepage neu crawlen und verarbeiten; In der Dokumentation heißt es, dass dies Tage bis Wochen dauern kann. Websitebesitzer können die Indexierung ihrer Homepage über die URL-Inspektion anfordern. Das wiederholte Umbenennen des Bildes ist kein sinnvoller Ersatz für die Überprüfung des Zugriffs und die Gewährung von Verarbeitungszeit.
Fehlerbehebung bei einem fehlenden oder veralteten Favicon
Trennen Sie drei Beobachtungen: was der HTML-Code deklariert, was die Bild-URL zurückgibt und was der Browser anzeigt. Eine Nichtübereinstimmung zwischen ihnen verrät Ihnen, wo Sie nachforschen müssen. Notieren Sie sich kurz die Seiten-URL, die Symbol-URL und das Ergebnis, anstatt mehrere Einstellungen gleichzeitig zu ändern.
| Symptom | Nächster check |
|---|---|
| Kein Symbol auf irgendeiner Seite | Überprüfen Sie den Kopf auf eine Symboldeklaration; Öffnen Sie die Bild-URL direkt |
| Homepage funktioniert, Artikel nicht | Vergleichen Sie Vorlagen und root-relativ mit seitenrelativ Pfade |
| Altes Symbol in einem Browser | Vergleichen Sie ein neues Browserprofil und überprüfen Sie alle deklarierten Alternativen |
| Bild-URL öffnet a Webseite | Auf Weiterleitung, Zugriffsherausforderung oder Fallback-HTML-Antwort prüfen |
| Browser funktioniert, Suche nicht | Überprüfen Sie die Homepage-Erklärung, den Crawl-Zugriff und die Suchberechtigung separat. |
Eine Antwort mit der Bezeichnung 200 reicht nicht aus, wenn der Server eine Anmeldeseite oder einen generischen HTML-Fallback sendet. Überprüfen Sie im Netzwerkfenster des Browsers die endgültige URL, den Antwortinhaltstyp und die Vorschau der Symbolanforderung. Ein PNG sollte eigentlich als PNG dekodiert werden. Überprüfen Sie außerdem, ob ein CDN nach der Aktualisierung des Ursprungs immer noch eine ältere Datei bereitstellt.
Für eine Cache-Untersuchung öffnen Sie das Bild direkt und vergleichen es mit einem neuen Browserprofil. Das Leeren eines Caches kann dabei helfen, die Ursache einzugrenzen, Benutzer sollten jedoch keinen speziellen Reset durchführen müssen, damit die Website funktioniert. Überprüfen Sie die bereitgestellte Asset- und Cache-Konfiguration, bevor Sie eine lokale Aktualisierung als dauerhafte Lösung behandeln.
Arbeitsbeispiel: Eine verschachtelte Seite verliert ihr Symbol
Stellen Sie sich eine fiktive Website vor, deren Homepage das richtige Symbol zeigt, während ein Artikel unter /blog/ nicht angezeigt wird. Beide Vorlagen enthalten href="favicon.png", ohne den führenden Schrägstrich. Vorausgesetzt, es gibt keine Überschreibung der Basis-URL, wird dieser relative Pfad neben der aktuellen Seite aufgelöst. Es funktioniert möglicherweise im Stammverzeichnis, während ein anderer Speicherort für den Artikel angefordert wird.
Der Entwickler öffnet die Symbolanforderung des Artikels und stellt fest, dass anstelle eines Bildes das HTML-Fallback der Website zurückgegeben wird. Die Lösung besteht darin, zu bestätigen, dass das Bild im Stammverzeichnis der Site vorhanden ist, und die gemeinsame Deklaration in href="/favicon.png" zu ändern. Anschließend prüfen sie noch einmal die Homepage und den Artikel. Beide fordern nun dasselbe Asset an.
Dies ist ein ausgearbeitetes Diagnosebeispiel, kein gemeldeter SearchVector Vorfall. Die Lektion besteht darin, die angeforderte URL zu überprüfen, bevor das Bild ersetzt wird. Ein vollkommen gültiges Bild kann nicht helfen, wenn eine verschachtelte Vorlage nach der falschen Datei fragt.
Eine letzte Überprüfung, bevor Sie die Aufgabe schließen
- Öffnen Sie die Startseite und eine verschachtelte Seite; Bestätigen Sie, dass beide das beabsichtigte Symbol deklarieren.
- Öffnen Sie jede deklarierte Alternative und überprüfen Sie, ob sie zur aktuellen Marke gehört.
- Bestätigen Sie, dass das beabsichtigte Bild ohne Authentifizierung oder HTML-Fallback geladen wird.
- Überprüfen Sie das kleine Symbol im hellen und dunklen Browser Erscheinungen.
- Überprüfen Sie Google Berechtigung separat, notieren Sie dann die Änderung und lassen Sie Bearbeitungszeit einplanen.
Für eine umfassendere Website-Überprüfung fahren Sie mit SearchVectors Website Checker oder dessen Web Page Crawler fort. Behalten Sie die direkten Bild- und HTML-Prüfungen oben als Favicon-Beweis bei; Eine allgemeine Seitenüberprüfung garantiert nicht, wie eine Suchmaschine Ihre Marke anzeigt.
Eine fertige Favicon-Aufgabe verfügt über ein erkennbares Bild, eine korrekte Deklaration und eine funktionierende Ressourcen-URL über alle Seitenvorlagen hinweg. Überprüfen Sie zuerst diese Betonstücke. Überwachen Sie dann das Erscheinungsbild der Suche, ohne eine verzögerte Aktualisierung mit einer fehlerhaften Browser-Implementierung zu verwechseln.
