Favicons, Touch-Icons, Tiles

|
Posted on

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.

Für das Site-Icon-Feature in WordPress 4.3 hat Florian Brinkmann ein Plugin geschrieben, dass die Icon-Größen um die vom Real Favicon Generator berücksichtigten Werte erweitert.

Bilder und HTML generieren

Real Favicon Generator 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.

Real Favicon Generator
1. Los geht’s: Quelldatei auswählen.

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.

Real Favicon Generator
2. Einstellungen: Hintergründe für iOS und Windows, sowie Ausgabe-URL

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.

Real Favicon Generator
3. Fein-Tuning: Mit einer vernünftigen PNG-Datei reicht die Qualität bei maximaler Kompression.

Fertiger Quelltext und ZIP-Datei herunterladen

ZIP herunterladen und generierten Quelltext kopieren – dieses war der erste Streich!

Real Favicon Generator
4. Ausgabe: Die URLs werden noch angepasst.

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:

Fertig!

Ein Blick in den Quelltext dieses Beitrags zeigt: alle Favicons, Touch-Icons und Tiles sind richtig eingebunden. Viel Spaß mit dem Plugin!

8 reactions on “Favicons, Touch-Icons, Tiles”

  1. 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.

    🙂

  3. Total genial diese Anleitung!
    Warum konnte es diesen Guide nicht schon früher geben? 🙁 Was man jetzt an Zeit spart.

  4. 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.

  5. 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

  6. 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?

Reactions are closed.