Die Erstellung eines Favicons — das sind die klei­nen Bildchen, die jeder moderne Browser im Tab links neben dem Titel der Seite anzeigt — ist keine Hexerei. Man muss ledig­lich ein belie­bi­ges qua­dra­ti­sches Bild auf die Größe von 16x16 Pixeln her­un­ter rech­nen, im *.ico-Format unter dem Namen favicon.ico spei­chern und ins Rootverzeichnis der Seite hoch­la­den. Die meis­ten Browser zei­gen das Bildchen dann stan­dard­mä­ßig und spei­chern die Ico-Datei auch mit der Bookmark, was die Seite leich­ter auf­find­bar macht.

Verzichten sollte auf ein Favicon nie­mand — die Kunst liegt darin, ein geeig­ne­tes Motiv zu fin­den, das auch bei der win­zi­gen Größe von 16x16 Pixeln noch aus­rei­chend wie­der­er­kenn­bar ist. Photoshop unter­stützt das Ico-Format übri­gens nicht, behel­fen kann man sich unter ande­rem mit dem kos­ten Bildbetrachter Irfan View, der eine ent­spre­chende Exportfunktion besitzt. Wer sich die­sen Aufwand nicht antun will, kann statt­des­sen auch den favina­tor benut­zen: das kos­ten­lose Online-Tool kon­ver­tiert jede belie­bige Ausgangsgrafik (die natür­lich qua­dra­tisch sein sollte) zu einem 16x16 Pixel Favicon, das anschlie­ßend her­un­ter­ge­la­den und in die eigene Page ein­ge­baut wer­den kann.

Besonderheit dabei: optio­nal kann ein Text ein­ge­tra­gen wer­den, der anschlie­ßend als ani­mierte Laufschrift durchs Favicon scrollt, Schriftfarbe, –typ und –größe sind dabei aller­dings fix ein­ge­stellt. Klingt kom­pli­ziert, sieht ein­fach so aus:

Das sorgt für Staunen (oh, ico-Dateien kön­nen ani­miert sein?) und nervt unter Umständen, wenn in der Browser-Tableiste dau­ernd was blinkt, also sollte man sich den Einsatz der Laufschrift gut über­le­gen. Moderne Browser zei­gen übri­gens alle unter­stütz­ten Grafikformate (also auch png, jpg, gif) an, größt­mög­li­che Kompatibilität erreicht man aller­dings mit dem Ico-Format. Eingebunden wird das Icon mit einem Meta-Tag im Header, einige Browser zei­gen es stan­dard­mä­ßig ohne­hin an:

<link rel=“shortcut icon” href=“http://www.meine-domain.de/favicon.png” type=“image/ico” />

Ein aus­führ­li­ches Tutorial rund um das Thema gibt’s hier. Für Konsolenfreunde hab ich noch eine beson­dere Spezialität gefun­den: png2ico kon­ver­tiert PNG-Dateien via Kommandozeile (!) ins ICO-Format — Nerd-Prestige-Bonus garantiert.

Keine ähnli­chen Beiträge.