11. November 2014

Perfekt auf allen Geräten Favicon für WordPress

   4 Kommentare

Share on Facebook13Tweet about this on Twitter12Share on Google+0Share on LinkedIn0Email this to someone

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.

Favicon-test

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:

  1. 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).
    Favicon-backend2
  2. Bei Logos mit weniger Pixeln bestätigt ihr, dass ihr trotzdem fortfahren wollt, oder wählt eine andere Datei aus.
    Favicon-warnung
  3. 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.
    Favicon-Schritt 3
  4. Weiter unten auf der Seite legt ihr die Komprimierungsart und je nach Bedarf einen vom Seitentitel abweichenden Titel fest.
    Favicon-Schritt4
  5. 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.
    Favicon-Simuliert
  6. Zufrieden mit dem Ergebnis? Dann bestätigt ihr das Ergebnis und gelangt zurück zu eurer WordPress-Seite.
    Favicon-Fertig

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.

Share on Facebook13Tweet about this on Twitter12Share on Google+0Share on LinkedIn0Email this to someone
Hans Jung

Hans Jung

Hans ist Datenschutzbeauftragter und bekennender WordPress-Fan – und versucht beides unter einen Hut zu bekommen.
Hans Jung

Du willst up-to-date bleiben?

Trage dich jetzt in unseren kostenlosen Newsletter ein, um stets die aktuellsten Neuigkeiten rund um Wordpress zu erhalten.

Wir geben deine Daten nicht weiter! Wir hassen Spam genauso wie du!

4 Kommentare

Reaktionen auf diesen Beitrag

    • 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?

    • 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 😀

    Schreibe einen Kommentar

    Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.