Favicon ganz einfach online erstellen, deutsche Anleitung
Das Favicon ist ein kleines Symbol, das in dem Browser-Tab, auf dem Ihre Website geöffnet ist, eingeblendet wird (sofern vorhanden). Im Screenshot unten, grüne Markierung, sehen Sie Beispiele für Favicons:
Es kommt auch zum Einsatz, wenn Bookmarks auf Ihre Seite gesetzt werden.
Ein Favicon steigert den Wiedererkennungswert Ihrer Website.
Favicons sind 16px groß und quadratisch. Das Symbol muss in speziellem Format gespeichert werden: .ico.
Mit diesem kostenlosen Online-Tool ist die Erstellung Ihres Favicon ein Kinderspiel:
Kostenfreie Anleitung:
Sie benötigen eine Grafik im gängigen Format, z.B. .gif, .jpg, .png, laden die Grafik auf der Seite des Online-Dienstes http://www.degraeve.com/favicon/ * hoch: Button „Datei auswählen“, dann „upload image“.
Im nächsten Schritt können Sie den gewünschten Ausschnitt im Bild bestimmen, indem Sie die quadratische Markierung verschieben (mittig packen und schieben) und in der Größe anpassen (an den Ecken packen und ziehen) und schließlich über den Button „Crop picture“ den Ausschnitt bestätigen.
Über den Button „Make Favicon!“ (s. rote Markierung im Screenshot rechts) wird das Favicon erstellt und unterhalb des Buttons auf der grünen Fläche angezeigt. Über Rechtsklick auf Ihr Favicon kann es auf den eigenen PC heruntergeladen werden.
Hinweis: Bei meinen Testuploads kam es bei einigen Grafiken zu einem Fehler in der Verarbeitung. Es scheint, dass der Fehler bei zu großen Grafiken auftritt. Ist das bei Ihnen der Fall, bereiten Sie das Bild einfach vor*, indem Sie den gewünschten Bildausschnitt vorher erzeugen und die Datei dann neu abspeichern. Verwenden Sie dann für die Favicon-Generierung diese neue Datei.
* Falls Sie kein Bildbearbeitungsprogramm besitzen, können Sie die Grafik ganz einfach über einen kostenlosen Online-Dienst bearbeiten. Wie das funktioniert, lesen Sie im Blogbeitrag „Ausschnitt aus einer Grafik erstellen und speichern – online, ohne eigene Software“ >
Mit Logaster können Sie ohne Designkenntnisse und ohne Photoshop Dutzende von vorgefertigten Versionen des Favicon erzeugen. Es spart Zeit und ermöglicht die Auswahl des besten Favicon unter den vorgeschlagenen in 2 Minuten: www.logaster.de/favicon
Einbinden des Favicons in das eigene Template:
Die meisten Templates bieten eine einfache Upload-Funktion speziell für das Favicon an. Bei Jimdo ist das immer der Fall, bei vielen WordPress Themes ebenso.
Ist diese Funktion in Ihrem Wunsch-Theme nicht vorhanden, kann der folgende HTML-Code in die index.php oder header.php Ihres Themes manuell eingebunden werden. Welche php-Datei genau bearbeitet werden muss, ist abhängig von dem verwendeten Theme. Wenn Sie Unterstützung wünschen, helfe ich Ihnen gerne im Rahmen meines individuellen Coaching Angebotes >.
Hier ein Beispiel des Codes, der – nach Anpassung des Pfades zu ihrer Favicon Datei auf dem Server – manuell eingebunden werden kann:
<LINK REL=“SHORTCUT ICON“ HREF=“http://www.yourwebsite.com/favicon.ico“ />
Allerdings muss zuvor noch die erzeugte Datei Favicon.ico auf den Server hochgeladen werden. In WordPress funktioniert das im Menü „Medien“. Dort „Datei hinzufügen“ … „Datei auswählen“. Die URL / der Dateipfad zu Ihrem Favicon wird angezeigt, wenn Sie auf die hochgeladene Datei klicken. Im rechten Bereich finden Sie nun die URL, die Sie kopieren und in das Codebeispiel oben einsetzen können.