Favicons und Touch-Icons sind das digitale Aushängeschild Deiner Website – kleine, aber wichtige Details, die das Branding Deiner Seite stärken und für einen professionellen Eindruck sorgen. Gerade im neuen WordPress Theme TwentyTwentyFour ist die Integration dieser Icons besonders einfach, da WordPress viele Aufgaben bereits für Dich automatisiert.
In diesem Blogpost zeige ich Dir Schritt für Schritt, wie Du diese Icons einrichtest und welche Tools Dir bei der Erstellung helfen können.
Warum sind Favicons und Touch Icons wichtig?
Favicons sind die kleinen Icons, die im Browser-Tab angezeigt werden, wenn Nutzer Deine Website öffnen. Apple Touch Icons und Android Icons sind spezielle Varianten, die auf mobilen Geräten verwendet werden, wenn Nutzer Deine Website als App-Verknüpfung speichern. Diese Icons erhöhen die Wiedererkennbarkeit Deiner Marke, verbessern die Nutzererfahrung und machen Deine Website mobilfreundlicher.
Voraussetzungen und Vorbereitung
Bevor wir starten, brauchst Du folgende Dinge:
- Ein geeignetes Bild: Dein Icon sollte eine quadratische Grafik sein – idealerweise 512×512 Pixel groß.
- Einen Online-Editor, um Favicons zu erstellen: Wenn Du noch kein Icon hast, kannst Du es mit Tools wie Favicon.io oder RealFaviconGenerator.net kostenlos erstellen.
- Zugriff auf Deine WordPress-Admin-Oberfläche.
Gut zu wissen: Im Theme TwentyTwentyFour musst Du keine zusätzlichen Header-Codes oder Plugins mehr verwenden. WordPress übernimmt die Integration automatisch, wenn Du die Icons hochlädst.
Schritt-für-Schritt-Anleitung: Favicon und Touch Icons im TwentyTwentyFour Theme einrichten
1. Ein Icon erstellen oder anpassen
Falls Du noch kein Icon hast, kannst Du es mit einem der folgenden Tools erstellen:
- Favicon.io: Einfach und ideal für statische Favicons.
- RealFaviconGenerator.net: Für komplexe Anforderungen – unterstützt auch Touch Icons.
Lade Dein Icon in einer Größe von mindestens 512×512 Pixel herunter. Es sollte ein PNG-Format mit transparentem Hintergrund haben, um flexibel einsetzbar zu sein.
2. WordPress-Adminbereich öffnen
Logge Dich in das Backend Deiner WordPress-Website ein. Gehe zu Design > Customizer, um die Anpassung des Themes zu starten.
Wenn der Eintrag im Menü aus irgendeinem Grund nicht vorhanden ist, kann man auch einfach /customize.php in die URL eingeben wenn man angemeldet ist, also dass es am Ende ungefähr so aussieht: https://meine-webseite.de/wp-admin/customize.php
3. Website-Identität bearbeiten
Klicke im Customizer auf den Menüpunkt Website-Identität. Dort findest Du die Option, das Website-Icon (Favicon) hochzuladen.
- Icon hochladen:
- Klicke auf die Schaltfläche Icon auswählen.
- Lade Dein vorbereitetes Icon hoch oder wähle es aus der Medienbibliothek aus.
- Vorschau ansehen: WordPress zeigt Dir sofort eine Vorschau, wie Dein Icon im Browser und auf mobilen Geräten aussieht.
4. Änderungen speichern
Sobald Du das Icon hochgeladen hast, klicke auf Veröffentlichen, um die Änderungen zu speichern. WordPress generiert automatisch alle benötigten Icon-Versionen für verschiedene Geräte und Browser.
5. Überprüfen
Teste, ob das Favicon korrekt angezeigt wird:
- Im Browser: Öffne Deine Seite und schau, ob das Icon im Tab erscheint.
- Auf mobilen Geräten: Speichere Deine Website als Verknüpfung auf dem Home-Screen und überprüfe das Apple Touch oder Android Icon.
Zusammenfassung
Mit dem WordPress Theme TwentyTwentyFour ist das Einrichten von Favicons und Touch Icons einfacher denn je. Du brauchst keine Plugins oder zusätzliche Header-Codes – WordPress erledigt alles automatisch. Mit einem passenden Icon-Editor und ein paar Klicks im Customizer bringst Du Dein Branding schnell und unkompliziert auf das nächste Level.