Note: Content might be outdated!
Mit dem Real Favicon Generator kannst du Favicons, Touch und Tile Icons in allen erforderlichen Größen für Desktop-Browser, sowie Vorschau-Icons für iOS, Android und Windows in 3 einfachen Schritten generieren. HTML-Code und Bilddateien lassen sich über ein Mini-Plugin flexibel in WordPress einbinden, unabhängig vom verwendeten Theme.
Bilder und HTML generieren
Was die heutigen Browser und Betriebssysteme so an Bildern haben möchten, um ein Favicon oder Vorschau-Icon für eine Website darzustellen, ist schon bald eine Wissenschaft für sich. Praktisch, dass es Online-Tools gibt, von denen du dir im Handumdrehen sämtliche Bildgrößen inklusive des nötigen HTML-Quelltextes zum Einbinden generieren lassen kannst.
Favicons, Touch-Icons und Tiles sind mit dem Real Favicon Generator in drei einfachen Schritten schnell online erstellt. Jetzt fehlt dir nur noch ein schlankes WordPress-Plugin dazu? Bitte sehr! 😉
1. Quelldatei
Groß genug sollte sie sein, lieber ein wenig größer als zu klein. Meine war eine PNG-Datei mit 600x600px.
2. Einstellungen
Hintergründe für die Icons unter iOS und Windows einstellen: Meins bleibt in iOS transparent; für Windows lade ich eine spezielle Datei mit rein weißem Logo hoch und setze den Hintergrund der Kachel auf Blau.
Die URL für die Ausgabe passen wir später im Plugin noch an, sie kann erstmal unberührt bleiben.
3. Kompression
Hier kannst du Ladezeiten sparen! Es wird je eine Vorschau für die verfügbaren Kompressionsstufen angezeigt. Mir reichte die Qualität bei maximaler Kompression.
Fertiger Quelltext und ZIP-Datei herunterladen
ZIP herunterladen und generierten Quelltext kopieren – dieses war der erste Streich!
Plugin anlegen
Den unten stehenden Plugin-Code einfach in eine PHP-Datei packen, und die in einen Ordner. Beide, PHP-Datei und Ordner, bekommen den Namen real-favicons (die PHP-Datei natürlich mit entsprechender Endung).
In den Ordner gehört noch ein Unterordner namens img, in den alle generierten Bilddateien aus deinem entpackten ZIP kommen. Das Plugin sieht dann als Baum so aus:
┣ real-favicons/
┣ img/
┃ ┗ (Bilddateien hierhin)
┗ real-favicons.php
Plugin-Code
Der Code für die Datei real-favicons.php:
Hallo Caspar,
nochmals Danke für diesen wertvollen Tipp! Den Generator kannte ich noch nicht. Und wie es der Teufel will, konnte ich ihn gleich heute bei einem Projekt verwenden. Genial!!!
Auch die Diskussion auf Twitter war sehr erhellend für mich. Ich habe zum ersten Mal ein Favicon nicht im Theme eingesetzt, sondern im Plugin. Mit Deiner hervorragenden Anleitung ein Kinderspiel. 🙂
Eine Besonderheit ist mir noch bei der Verwendung mit Multisites aufgefallen:
Das Plugin kommt bei mir auf einer Multisite-Installation zum Einsatz. Es gibt dort mehrere Websites mit jeweils eigenen Favicons. Da ist mir aufgefallen, dass man bei Multisite darauf achten muss, dass man mehrere Favicon-Plugins anlegt und diese dann nur für die jeweils gewünschte Website aktiviert, falls man dort eigene Favicons haben möchte. Aber das ist ja kein Problem: Man legt jedes Favicon-Plugin in einen eigenen Ordner und bennent den „Plugin Name“ individuell. z.B.:
– plugins/
— real-favicons-website-a
— img/
— real-favicons.php ( * Plugin Name: Real Favicons für Website A )
— real-favicons-website-b
— img/
— real-favicons.php ( * Plugin Name: Real Favicons für Website B )
–real-favicons-website-c
—img/
—real-favicons.php ( * Plugin Name: Real Favicons für Website C )
…usw.
🙂
Cool, das lässt sich sogar noch weiter spinnen: aktive Themes abfragen, ob Favicon-Ordner vorhanden sind? 😉 Danke für die Ergänzung!
Hallo Caspar,
danke, für die Anleitung. Hab´s direkt mal ausprobiert und bin begeistert 🙂
Total genial diese Anleitung!
Warum konnte es diesen Guide nicht schon früher geben? 🙁 Was man jetzt an Zeit spart.
Diese Anleitung ist wirklich sehr nützlich! Ein Favicon ist heutzutage für jede Webseite nötig und der detaillierte Plugin-Code hilft auch Anfängern.
Coole Sache hab ich heute gleich mal umgesetzt. Funktioniert prima. Die Iconseite kannte ich schon. Aber mir war noch nicht klar, wie die ganzen Icons auf die Website kommen. Andere Plugins waren da sehr eingeschränkt, mit 1 ico und 1 Apple Touch-Icon. Jetzt nimmt sich jeder Browser unter Android seine Lieblingsgröße Vielen Dank
Hallihallo,
ich bin WordPress-Anfänger und habe eine Multisite erstellen lassen bzw. ein bisschen daran mitgebastelt.
Ich frage mich gerade, wie ich den Quellcode in die HTML-Dateien bekomme?
Eigentlich kann ich doch nur die php-Dateien bearbeiten…oder nicht?
Hallo Sabine, für derlei grundsätzliche Fragen empfehle ich ein gutes WordPress-Lehrbuch, oder ein Video-Training. Wie oben im Artikel angemerkt, gibt es eine aktuellere Lösung für das mittlerweile im WordPress-Kern verfügbare Favicon-Feature hier: https://florianbrinkmann.de/1187/website-icon-in-wordpress-eigene-bildgroessen-hinzufuegen/