Ein geeignetes Favicon zu generieren, ist nicht ganz einfach. Generell stehen dabei unterschiedliche Möglichkeiten und Formate zur Verfügung (SVG, PNG, ICO usw.). Ich entschied mich für eine Kombi und konvertierte ein icon.svg in mehrere PNG-Dateien, um diese dann in einem favicon.ico zusammenzufassen. Im Detail gehst du dabei wie folgt vor:
Zunächst suchst du dir ein passendes Bildchen im Format SVG. Quadratisch sollte es in jedem Fall sein.
Dann erstellst du per Konsole und ImageMagick die gewünschten PNG-Bilder. Der folgende Schritt ist für jede Datei auszuführen. Welche Größen du benötigst, kannst du z.B. in der Wikipedia nachlesen. Hilfreich war für mich auch das Favicon-Quiz. Ich selbst wählte – jeweils im Quadrat – 16, 32, 40, 48, 60, 64, 76, 96, 120, 128, 152, 192, 256 und 512. Also zum Beispiel:
$ convert -background transparent -size 16x16 favicon.svg favicon-16.png
Schließlich fügst du die generierten Bilder in einem ICO zusammen:
$ convert -background transparent favicon-16.png favicon-24 favicon-32.png favicon-40.png favicon-48-png favicon-60.png favicon-64.png favicon-96.png favicon-120.png favicon-128.png favicon-152.png favicon-192.png favicon-256.png favicon -512.png -colors 256 favicon.ico
Das Favicon kannst du einfach im Wurzelverzeichnis deiner Website ablegen. Nahezu keinem Browser sollte die Anzeige Probleme bereiten.