Favicon für WordPress
Für die Vielzahl an Endgeräten mit denen User eure Seite besuchen, reicht das Standard-Favicon eurer WordPress-Seite nicht aus. Mit optimierten Icons legt ihr fest, wie die Seite bei euren Usern angezeigt wird. So erstellt ihr in wenigen Schritten Icons für Android, iOS, Win8 und natürlich die Browser.
Bei Pressengers gibt’s noch Verbesserungspotential: Die Darstellung auf Android-Geräten und Windows 8 ist nicht optimal.
Favicon by RealFaviconGenerator
Das Plugin Favicon by RealFaviconGenerator ist eine Anbindung des Webdienstes von RealFaviconGenerator.net an WordPress. Vorteile des Plugins: Ihr habt direkten Zugriff auf die in eurer Mediathek hinterlegten Bilder und die fertigen Icons werden direkt auf eurem Server gespeichert. Und so funktioniert es:
- Im Bereich Design eurer Seite gebt ihr die URL eures Logos ein oder wählt das passende Element aus eurer Mediathek (empfohlen sind 260×260 Pixel).
- Bei Logos mit weniger Pixeln bestätigt ihr, dass ihr trotzdem fortfahren wollt, oder wählt eine andere Datei aus.
- Die Webseite zeigt euch nun eine erste Darstellung der Icons für Win8 und iOS. Hier legt ihr per HEX-Code die Hintergrundfarbe fest. Den HEX-Code ermittelt ihr entweder über ein Grafikprogramm oder Adobe Color CC, indem ihr dort das Logo hochladet.
- Weiter unten auf der Seite legt ihr die Komprimierungsart und je nach Bedarf einen vom Seitentitel abweichenden Titel fest.
- Die Seite zeigt euch nun die Übersicht eurer Icons auf unterschiedlichen Geräten an. Sind die Kacheln grün eingefärbt, ist alles perfekt. Da unser Logo im Test eine zu niedrige Auflösung hatte, sind einige Kacheln nur gelb hinterlegt.
- Zufrieden mit dem Ergebnis? Dann bestätigt ihr das Ergebnis und gelangt zurück zu eurer WordPress-Seite.
Alternative 1: Wenn ihr bereits optimierte Icons für die unterschiedlichen Geräte habt, könnt ihr die entsprechenden Felder eures Themes nutzen, um die Icons einzubinden.
Alternative 2: Nachdem ihr die Icons per FTP auf euren Webserver geladen habt, bindet ihr folgenden Code manuell in den <head> Bereich eurer Seite ein:
<link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png"> <link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png"> <link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png"> <link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144.png"> <link rel="apple-touch-icon" sizes="60x60" href="/apple-touch-icon-60x60.png"> <link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png"> <link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon-76x76.png"> <link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png"> <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png"> <link rel="icon" type="image/png" href="/favicon-192x192.png" sizes="192x192"> <link rel="icon" type="image/png" href="/favicon-160x160.png" sizes="160x160"> <link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96"> <link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16"> <link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32"> <meta name="msapplication-TileColor" content="#da532c"> <meta name="msapplication-TileImage" content="/mstile-144x144.png">
Komfortabler geht es aber mit dem Plugin.
Fazit: Mit dem WordPress-Plugin Favicon by RealFaviconGenerator erstellt ihr in wenigen Schritten ansehnliche Favicons und Icons und eure Seite sieht auf allen Geräten gut aus. Einfacher geht’s nicht.
Sehr sinnvoll, Hans. Habe da noch eine Frage. Sollte ich das Plugin nutzen wollen, um für die verschiedenen Mobilen Geräte die Favicons einzubinden: kann ich das Plugin nach der Implementierung in den Header wieder deaktivieren? Natürlich nur bis zum nächsten Update des Themes – oder?
Hallo Ann Sophie,
wenn du das Plugin deaktivierst verschwinden leider auch die Favicons. Entweder du lässt das Plugin aktiv, oder du erstellst dir mit dem Plugin nur die Favicons und schreibst den Code dann manuell in den head-Bereich deiner Seite.
Danke dir, Hans, für die schnelle Antwort.
Ihr seid genial, danke für die vielen tollen Tipps! Favicon habe ich bisher nur für den PC integriert gehabt, jetzt auch Android/iOS und Win8 😀