Perfekt auf allen Geräten

Favicon für WordPress

Share on Facebook0Tweet 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.


Hans Jung

Hans Jung

Hans ist Datenschutzbeauftragter und bekennender WordPress-Fan – und versucht beides unter einen Hut zu bekommen.
Hans Jung
Share on Facebook0Tweet about this on Twitter12Share on Google+0Share on LinkedIn0Email this to someone
Kommentare zu "Favicon für WordPress"
  1. Ann Sophie schrieb am 11. November 2014, um 13:42 Uhr:

    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?

    1. Hans Jung schrieb am 11. November 2014, um 14:28 Uhr:

      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.

      1. Ann Sophie schrieb am 13. November 2014, um 12:01 Uhr:

        Danke dir, Hans, für die schnelle Antwort.

  2. gamesart schrieb am 11. November 2014, um 21:14 Uhr:

    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

Pressengers lebt von der Wordpress Community, beteilige dich mit einem Kommentar!
Deine E-Mail Adresse wird nicht veröffentlicht.

Achtung: Mit dem Absenden eines Kommentars erklärst du dich damit einverstanden, dass alle eingegebenen Daten und deine IP-Adresse zum Zweck der Spamvermeidung durch das Programm Akismet in den USA überprüft und gespeichert werden. Weitere Informationen zu Akismet und Möglichkeiten des Widerrufs..