Favicon erstellen und Favicon in Safari aktualisieren

von Jul 17, 2022Tipps & Tricks › Webdesign, Tipps & Tricks › Apple Mac Computer-Support

Erinnere ich mich an frühere Zeiten, war das Erstellen eines Favicon, weniger das Problem. Statt dessen war es mit einigem technischen Know How und Aufwand verbunden, dieses in seine Webseite zu integrieren. Die Favicon-Bilddateien waren winzig klein und die Verknüpfung mit der Webseite fand im HTML-Quellcode im <head>-Teil der Seite statt. Es gab etliche Versionen an Favicons – für die verschiedensten Arten und Auflösungen der Displays.

Safari Favicon Size

Heutzutage ist es hingegen spielend einfach, eine Favicon-Bilddatei zu seiner Webseite hinzu zu fügen. Wir erstellen dazu eine Bilddatei in der Größe 600×600 Pixel und speichern diese vorzugsweise als .jpg-Datei lokal ab. Sinnvollerweise sollte diese Datei mit drei bis vier passenden Keywords benannt werden, die den Inhalt der Webseite widerspiegeln.

In unserem Fall haben wir die Favicon-Bilddatei webdesign-agentur-dienstleistungen-plauen-seo-services-favicon.jpg benannt. Der Zusatz favicon wurde angehangen, dass sich der Dateiname von dem der Website-Logo-Bilddatei unterscheidet.

Erstellen lässt sich eine solche Favicon-Bilddatei mit zahlreichen Grafik-Programmen. Eurer Phantasie seien hier keine Grenzen gesetzt. Wichtig ist, dass diese Favicon-Bilddatei zum Abschluss bezüglich der Dateigröße optimiert wird.

Weiß jemand nicht wie, dann kann ich aus jahrelangen und eigenen Erfahrung www.tinypng.com empfehlen. Der Dienst ist in den wesentlichen Grundzügen kostenlos und eignet sich perfekt. Wir nutzen deren Plugin, bei uns innerhalb Photoshop, gefühlt seit 10 Jahren.

Unser fertiges Favicon liegt lokal auf unserem Computer und wartet noch darauf, in unsere Webseite eingebunden zu werden. Diesen Vorgang beschreibe ich am Beispiel von WordPress, dem am weitest verbreiteten CRM-System für Webseiten.

WordPress Favicon ändern

Hierzu gehen wir im Backend von WordPress zuerst auf die linke Seitenleiste unter Medien und fügen unsere zuvor erstellte Favicon-Bilddatei hinzu.

Vergeben einen aussagekräftigen Alt-Text, einen Titel sowie eine Beschreibung und sind an dieser Stelle fertig.

Ist das erledigt, binden wir diese Favicon-Bilddatei in unserem Theme, in unserer Webseite als neues Favicon ein.

Wir befinden uns noch im Backend von WordPress und wechseln zu Design ›› Customizer ›› Allgemeine Einstellungen ›› Website-Identität und wählen mit dem dort vorhandenen Button unsere zuvor hinzugefügte Favicon-Bilddatei aus.

Klicken zum Abschluss oben auf Veröffentlichen und wir sind fertig und können uns über unser neues Favicon unserer Webseite freuen.

Favicon erstellen. Favicon in WordPress einbinden. Favicon in Safari aktualisieren| YXDesign

Safari Favicon Probleme beim Aktualisieren

Sollten wir kein neues, im Sinne von erstmals, Favicon hinzu gefügt haben und statt dessen ein Favicon aktualisiert haben, dann macht uns an dieser Stelle Safari auf dem Mac mit hoher Wahrscheinlichkeit einen Strich durch unsere Rechnung. Safari zeigt auf dem Mac weiterhin und das hartnäckig das alte, das bisherige Favicon an.

Sämtliche meiner Versuche, Safari auf dem Mac dazu zu bewegen, das Favicon zu aktualisieren, haben nichts gebracht. Diese hier alle aufzuzählen, erspare ich uns, sie waren allesamt erfolglos.

Wenn macOS nicht läuft, wie es soll und ich es gerade gern hätte, dann laufe ich regelmäßig und automatisch jeweils zur Höchstform auf. Probleme und an deren Lösung zu arbeiten, motivieren mich ordentlich und das so lange, bis eine passende Lösung gefunden ist.

Safari Favicon Aktualisierung

Die Lösung findet sich in diesem Fall, in den Tiefen des Finder und ist eher simpel und kann von jedem IT-Laien umgesetzt werden.

Wir wechseln im geöffneten Finder Fenster in den Ordner ~/Library/Safari/Favicon Cache/.

Dorthin gelangen wir, indem wir oben im Finder-Menü: Gehe zu mit gedrückter Option-Taste, den Eintrag Library auswählen.

Favicon erstellen - Favicon Einbindung in WordPress und in Safari aktualisieren| YXDesign
Favicon erstellen - Favicon Einbindung in WordPress und in Safari aktualisieren| YXDesign

Im Ordner ~/Library/Safari/Favicon Cache/ angelangt, löschen wir alle darin befindlichen Verzeichnisse und Dateien und leeren im Anschluss den Papierkorb. Zum Abschluss des Vorgangs ist der Neustart unseres Mac eine gute Option.

Nachdem der Mac neu gestartet ist, öffnen wir Safari und sämtliche Favicons werden neu erstellt. Dies geschieht nach und nach, sobald die betreffende Webseite besucht wird. Das war an dieser Stelle alles und unser neues Favicon sollte uns entgegen strahlen.

Schreiben Sie mir, wenn Sie Fragen haben oder selbst auf der Suche nach Lösungen sind.

Würden Sie gern mit mir persönlich sprechen, so senden Sie mir bitte ebenfalls eine Nachricht und teilen mir darin Ihre Rückrufnummer mit.

Bild-Lizenz: Header · Graphic Grid · 1890110377 · shutterstock.com

ICT & WebDesign

ICT-Computer-Support in Plauen für
Sachsen · Bayern · Thüringen

Nachricht an uns