Ab WordPress 4.3 können Website-Icon direkt im Backend hinzugefügt werden. Das Website-Icon wird anschließend als Favicon sowie App-Icon genutzt. Wie dies funktioniert und was ein Website-Icon macht, erkläre ich in diesem Beitrag.
Diese WordPress Ergänzung war aus meiner Sicht schon lange überfällig. In der Vergangenheit musste man per Code oder Plugin das Website-Icon realisieren.
Inhaltsverzeichnis
Was ist ein Website-Icon?
Website-Icons sind kleine und praktische Bilder (Icons) für die Website. Der Wiedererkennungswert der Seite wird dadurch gesteigert. Im Browser sorgen diese Icons (dort Favicons genannt) dafür, dass wir schnell wissen, wo wir welche Inhalte geöffnet haben. Als Lesezeichen abgespeichert, prägen sich Besucher die Website-Icons schnell ein und wissen, welche Website, welches Icon besitzt. Es ist also sehr empfehlenswert, das eigene Logo in angepasster Form als Icon zu nutzen und so einen Wiedererkennungswert bei den Besuchern zu schaffen. Auch für mobile Benutzer, die Webseiten regelmäßig über ihr Smartphone erreichen wollen, ist das Website-Icon von Vorteil. Ein schneller Zugriff über das Website-Icon wird gewährleistet und das Aussehen professionalisiert.
Website-Icon zu WordPress hinzufügen
Das Website-Icon repräsentiert die Website im Browser-Tab, im Lesezeichen-Menü und auf dem Startbildschirm von Mobilgeräten. Im WordPress Menüpunkt <Design -Anpassen -Webseiteinformationen> fügt man dazu ein Bild (Icon) hinzu. Dieses Icon wird dann als Favicon und App-Icon genutzt. Eine Theme-Anpassung per Code entfällt.
Das Website-Icon muss quadratisch im Format JPEG, GIF oder PNG vorliegen und darf nicht kleiner als 512 x 512px sein.
Das Bild wird ganz normal in die Mediathek geladen und ausgewählt. Ist das gewählte Bild größer als 512px x 512px, bietet WordPress die Möglichkeit, einen passenden Bildausschnitt das Website-Icon aus diesem Bild auszuschneiden. Bei dieser Bearbeitung erhält man bereits eine Vorschau wie es als Favicon und als App-Icon bei erscheinen wird.
Mit wenigen Klicks ist alles erledigt.
Rückblick Favicon
In einem Rückblick möchte ich mich auch mit dem Favicon beschäftigen. Bei einem Favicon handelt es sich um ein winziges Bild, das je nach Browser neben dem Seitentitel oder der URL angezeigt wird. In den Anfängen (IE 5) gab es das Favicon nur, als kleine, 16 x 16 Pixel große Grafik im .ico Dateiformat. Wenn man auch für alte Browser den Support aufrecht erhalten möchte, muss man ein 16 x 16px großes .ico-File erstellen. Da die meisten Grafikprogramme dieses Dateiformat nicht unterstützen stellt sich die Frage: Wo bekomme ich ein Favicon her? Die Website www.favicon-generator.de ist dazu eine gute Adresse, dort kann man selbst ein Favicon erstellen.
Inzwischen werden meist 32 x 32 Pixel große Bilder als .png oder .gif Datei genutzt, diese können mit allen gängigen Fotoprogrammen erstellt werden
Wie fügte man früher ein Favicon in WordPress-Webseiten ein?
Ist das Favicon erstellt stellt sich die Frage wie bekomme ich das Bild in die Webseite. Um das Favicon in eine Seite einzubinden musste es im Header (<head> …</head>) einer HTML-Seite eingebunden werden. Laut HTML-Standard lautet die Bezeichnung hierfür icon, der Internet Explorer benötigt jedoch die Bezeichnung shortcut icon. Hierbei können auch andere Formate als .ico verwendet werden.
Den notwendigen Code des Favicon fügt man in der header.php im Themeordner ein:
<link rel="icon" href="<?php echo get_stylesheet_directory_uri(); ?>/favicon.png" type="image/png" /> <link rel="shortcut icon" href="<?php echo get_stylesheet_directory_uri(); ?>/favicon.png" type="image/png" />
oder als .ico:
<link rel="icon" href="<?php echo get_stylesheet_directory_uri(); ?>/favicon.ico" type="image/x-icon" /> <link rel="shortcut icon" href="<?php echo get_stylesheet_directory_uri(); ?>/favicon.ico" type="image/x-icon" />
Alternativ konnte man natürlich auch Plugins verwenden. Ab WP 4.3 ist dies Schnee von gestern, das Favicon ist nun Standard im WordPress Menüpunkt Website-Icon.
