Favicon, Touch-Icon in WordPress einfügen ohne Plugin

Du möchtest deine WordPress-Website mit einem Favicon aufhübschen, das in allen gängigen Browsern und als Touch-Icon auf dem Startbildschirm von Smartphones und Tablets zu sehen ist? Super Idee! In meinem „Weihnachts-Special“ erkläre ich dir Schritt für Schritt, wie du das umsetzen kannst, ohne ein neues Plugin installieren zu müssen. Einzige Voraussetzungen: Du solltest mit WordPress.org arbeiten und über Erfahrung im Umgang mit FTP-Programmen verfügen.

Was ist der Unterschied zwischen Favicon und Touch-Icon?

Als Favicon (aus dem Englischen „favorite“ und „icon“) bezeichnet man ein winziges Bild, Symbol oder Logo, das zum Wiedererkennungswert einer Website beiträgt. Es erscheint unter anderem neben dem Titel im Internet-Browser ganz oben in der Tab-Leiste (Registerkarte). Wird eine Website bzw. ein Blog als Favorit im Browser gespeichert, erscheint das Favicon auch neben dem Titel im Lezezeichen. Die Größe eines Favicons misst standardmäßig 16 x 16 px (Pixel).

Bei einem Touch-Icon handelt es sich um das gleiche Bild, Symbol oder Logo wie beim Favicon, mit dem gravierenden Unterschied, dass es auch auf mobilen Endgeräten wie Smartphones oder Tablets mit „Touch“-Funktion funktioniert. Rufst du beispielsweise auf dem Handy mit einem Browser eine Website auf, die ein Touch-Icon integriert hat, und wählst „Website zum Startbildschirm hinzufügen“ aus, erscheint das Icon auf dem Startbildschirm deines Handys. Das Besondere daran: Berührst du das Touch-Icon auf dem Startbildschirm, gelangst du direkt zur entsprechenden Website im Browser. Der englische Begriff „touch“ bedeutet halt übersetzt „berühren“ – in diesem Fall beispielsweise mit dem Finger oder einem entsprechenden Stift auf der Bildschirmoberfläche. Da der Markt sehr viele Endgeräte mit den unterschiedlichsten Bildschirmgrößen hergibt, müssen entsprechend viele Touch-Icons in zahlreichen Abmessungen auf der Website integriert sein – angefangen von 32 x 32 px bis derzeit 310 x 310 px.

Wichtig dabei ist: Sowohl Favicons als auch Touch-Icons müssen in quadratischer Form vorliegen, sprich: alle vier Seiten die gleichen Abmessungen haben (zum Beispiel 32 x 32 x 32 x 32 px).

Hast du eine Website mit WordPress.org eingerichtet, empfehle ich dir, ein Favicon und Touch-Icons einzubinden, um unter allen Internet-Nutzer:innen einen gewissen Wiedererkennungswert zu erreichen. Los geht’s:

Wähle ein Bild für dein Favicon / Touch-Icon

Ob Buchstaben, ein (Firmen-) Logo, ein individuelles Symbol oder ein Foto – deiner Fantasie sind keine Grenzen gesetzt, was die Gestaltung eines Favicons bzw. Touch-Icons betrifft (mit Ausnahme von Urheber- und Wettbewerbskriterien).

• Kreiere selbst ein quadratisches Bild, das zu deiner Website passt, oder suche im Internet nach (kostenlosen) lizenzfreien Illustrationen. Je nach Anspruch kannst du auch einen Grafiker oder eine Grafikerin beauftragen. Diverse Internetplattformen bieten zudem online die freie Gestaltung solcher kleinen Bilder an (suche einfach nach „Favicon Generator“ und achte darauf, dass im Download-Paket auch Touch-Icons enthalten sind).
• Beachte, dass das Icon so gestaltet ist, dass man die Darstellung noch erkennen kann bei 16 x 16 px (meins ist noch in der Findungsphase 😉 orientiere dich ruhig an internationalen Portalen). Verkleinere das Icon testweise einfach mit einem Fotobearbeitungsprogramm.
• Die Mindestgröße für Icons beträgt derzeit 310 x 310 px. Künftig können aber viel größere Bildschirme zum Einsatz kommen, daher solltest du dein Icon von vornherein in deutlich größerer Abmessung erstellen (zum Beispiel 1000 x 1000 px).
• Speichere dein Icon unter einem beliebigen Namen idealerweise im PNG-Format (zum Beispiel Favicon.png) in verlustfreier, höchstmöglicher Auflösung ab.

Kurzum: Erstelle zuerst ein großes Icon (verkleinern kann man immer), speichere es als PNG-Datei und beachte dabei, dass die Darstellung auch als Favicon in der winzigen Bildgröße 16 x 16 px erkennbar ist.

Als Beispiel habe ich passend zur Weihnachtszeit einen schlichten grünen Tannenbaum auf gelbem Hintergrund gewählt (siehe Titelbild). Mit einem Fotobearbeitungsprogramm habe ich um die Tanne eine weiße Kantenlinie gesetzt und zum Schluss das Bild mit einem Spot-Beleuchtungs-Effekt versehen. So sticht die Tanne aus dem dezent glänzenden Hintergrund deutlich hervor und ist selbst in Favicon-Größe noch gut zu erkennen – das erklärte Ziel.

Aus deinem Bild ein Favicon und Touch-Icons erstellen

Du hast wie beschrieben ein großartiges Bild, Symbol oder Logo erstellt? Gut gemacht! 🙂 Jetzt muss daraus ein Paket geschnürt werden, das mindestens ein Favicon und jede Menge Icons in zahlreichen Abmessungen enthält, die alle kompatibel mit den gängigen Webbrowsern und mobilen Endgeräten sind.

Aber keine Bange, du brauchst nichts händisch vorzunehmen. Diese Arbeit kann dir ein Favicon-Generator schnell und einfach online abnehmen. Ich habe mich für den IONOS Favicon-Generator entschieden, weil mir die Webseite vertrauensvoll erscheint, der Generator kostenlos ist und keine versteckte Werbung enthält. Der Generator erstellt automatisch ein Favicon (favicon.ico) und Touch-Icons für alle gängigen Browser sowie App-Icons für Android, iOS und Windows.

1. Navigiere auf der Webseite von IONOS zu Bild Upload (klicke auf die Registerkarte).
2. Lade deine Bilddatei (zum Beispiel Favicon.png) hoch (indem du auf die Zeile „Hier laden Sie Ihre Bilddatei hoch“ klickst).
3. Klicke auf Upload und schon werden die Dateien automatisch generiert.
4. Nachdem die Favicondateien erfolgreich erstellt wurden, erscheint ein Button Download. Klicke auf den Button und speichere die ZIP-Datei auf deinem Computer.
5. Entpacke die ZIP-Datei mit einem ZIP-Programm (zum Beispiel 7-Zip), am besten mit der Funktion „entpacken nach (…)“, dann wird automatisch ein neuer Ordner erstellt, in dem sich alle Dateien befinden.
6. Öffne den entpackten Ordner.

Du hast nun 18 Icons im PNG-Format und eine favicon.ico zur Verfügung. Beigefügt sind außerdem folgende drei Dateien: browserconfig.xml, manifest.json und anleitung.txt. Das sieht ungefähr so aus:

Da kommt doch schon ein bisschen Weihnachtsstimmung auf, wie ich finde. 😉

• Öffne nun die Datei anleitung.txt. Unter Punkt 1) wird bereits erläutert, dass du alle Bilddateien in das Root Verzeichnis deiner Domain laden sollst.

Genau das machst du jetzt. Denn irgendwie müssen die Icons ja auf deine Website kommen.

Favicon und Touch-Icons nach WordPress hochladen

Davon ausgehend, dass du bereits Erfahrung mit FTP-Programmen (in meinem Beispiel FileZilla) gemacht hast, weil du mit WordPress.org arbeitest, fahre bitte mit folgenden Schritten fort:

1. Schließe die Datei anleitung.txt wieder und lasse die Dateien browserconfig.xml und manifest.json sowie sämtliche Icons so wie sie sind (nehme keine Veränderungen an den Dateien vor!)
2. Öffne FileZilla (oder ein anderes FTP-Programm, das du nutzt).
3. Logge dich auf dem Server deiner WordPress.org-Website ein.
4. Lade alle Dateien aus dem entpackten ZIP-Ordner (mit Ausnahme der anleitung.txt und dem Ordner selbst) in das Hauptverzeichnis deiner WordPress.org-Website hoch.
5. Melde dich vom Server ab und schließe FileZilla.

Und schon sind sie drin! 🙂 Okay, nicht ganz, ein letzter Schritt ist noch erforderlich:

Favicon-/Touch-Icons-Code in den Header einfügen

Damit die hochgeladenen Icons beim Aufruf deiner WordPress-Website sichtbar werden, musst du jetzt noch den Code aus der anleitung.txt in den Header deiner Website einfügen.

• Logge dich im Browser in deine WordPress-Website ein (sollte kein Login möglich sein, kann dir mein Artikel WordPress Passwort zurücksetzen ohne E-Mail oder Benutzername weiterhelfen).
• Navigiere in WordPress zur Header.php deines Child-Themes über Design / Theme-Editor.
  TIPP: Solltest du über kein Child-Theme verfügen, kannst du den Code auch in die Header.php deines Haupt-Themes einfügen – allerdings können die Angaben beim nächsten Theme-Update verloren gehen und du müsstest den Code erneut einfügen.
• Öffne die anleitung.txt im entpackten Icon-Ordner auf deinem Computer.
• Kopiere die darin befindlichen Code-Zeilen (ohne die Angaben „2) HTML Codes einfügen“ und „Fügen Sie den folgenden HTML Code zwischen den beiden <head> </head> Tags ein:“).
• Füge den Code zwischen die Zeilen <head> und </head> in die Header.php ein, am besten direkt vor dem abschließenden </head>-Tag.
• Klicke unter der Header.php auf den Button Datei aktualisieren, um die Änderungen zu speichern.
  TIPP: Alternativ, sollte der Zugang zur Header.php nicht möglich bzw. gesperrt sein, kannst du sie über dein FTP-Programm oder den Webhoster-Account auf dem Server öffnen, den Code einfügen und speichern.

In meinem Beispiel sah es so aus (nicht übernehmen!). Die orangefarbenen Zeilen stellen einen Auszug aus dem Code der anleitung.txt dar, die blauen die in der Header.php bereits vorhandenen head-Tags.

<head>
<link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png">
(...)
<link rel="icon" type="image/png" sizes="192x192" href="/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
(...)
<link rel="manifest" href="/manifest.json">
(...)
<meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">
</head>

Fertig. 🙂 Zur Überprüfung logge dich aus WordPress aus, rufe deine WordPress-Website im Browser auf und schau ganz oben in die Tab-Zeile (Registerkarte), ob dein Favicon sichtbar ist. Des Weiteren überprüfe die Sichtbarkeit auf deinem Handy oder Tablet (beachte die Ausführungen zum Touch-Icon oben im ersten Abschnitt).

Hat alles geklappt, Gratulation! Deine WordPress-Website verfügt jetzt über ein Favicon und Touch-Icons!

Wenn dir mein Weihnachts-Favicon (440 x 440 px) gefällt, kannst du es gerne downloaden (Rechtsklick mit der Maustaste / Bild speichern unter) und verwenden, wann immer du magst.

Nun denn wünsche ich dir Frohe Weihnachten Mit meinem Blog ROCK DEINEN PC mache ich nach den Feiertagen weiter und freue mich jederzeit über deinen Besuch!