Favicon - ICO-Datei in Photoshop erstellen

Die kleinen Icons neben dem Websitetitel im Browser-Tab oder in den Favoriten können auch leicht aus dem Photoshop heraus gespeichert werden.

Favicons sind kleine Icons, die der Nutzer für gewöhnlich in den Browser-Tabs oder unter den Favoriten vorfindet.

Daher auch der Name FavIcon - Favorite Icon. Wenn eine Website kein solches Icon anbietet, wird ein Standard-Icon genutzt. Das FavIcon ist also eine gute Methode um sich wieder ein kleines Stück von den anderen Bookmarks etc abzuheben.

Um ein sogenanntes Favicon zu erstellen, benötigt ihr ein Grafikprogramm. Ich zeige euch auf diesem Wege auch, wie ihr ICO-Dateien mit Adobe Photoshop auf dem Mac erstellen könnt - es gibt aber zahlreiche andere Tools die die gleiche Funktionalität bieten - natürlich auch Freeware. Auf dem PC sei zum Beispiel Irfan View zu nennen.

Das Plugin

Dazu lädt man sich ein kleines Plugin herunter, welches ihr auf der Website Telegraphics bekommt.

Da ich Adobe Cloud Nutzer bin und mit Photoshop CC arbeite, wähle ich den entsprechend neuesten Download für CS5/CS6.

Wenn ihr die Datei habt, müsst ihr sie entpacken. Es kommen drei Dateien zum Vorschein. Nehmt die Datei ICOFormat.plugin und kopiert sie in den Plugin Ordner von Photoshop.

Ihr findet diesen in eurem Photoshop-Ordner unter Plug-Ins.

Mac
Programme -> Adobe Photoshop CC -> Plug-Ins

PC
Programme -> Adobe Photoshop CC (64bit) -> Required -> Plug-Ins -> File Formats

Nach dem Neustart von Photoshop sollte das Plugin verfügbar sein und ihr könnt mit dem "Speichern unter" Dialog ICO (Windows Icon) speichern.

Die Erstellung

Ein Favicon hatte immer die Größe 16 x 16 Pixel - nicht viel Platz also um sich künstlerisch völlig zu entfalten. Heutzutage gibt es die Möglichkeit für höher auflösende Geräte auch 32 x 32 Pixel und mehr zu hinterlegen. Manche Tools bieten sogar die Möglichkeit multiple Auflösungen in einer Datei zu hinterlegen z.B. IcoFX.

Trotzdem wenig Platz - überlegt also, was z.B. an eurem Logo sehr markant ist, oder was ihr ggf. weglassen könnt.

In meinem Fall ist mein quadratisches Logo relativ brauchbar. Häufig kann man aber mit bestehenden Grafiken, Logos etc. in dieser Größe gar nichts anfangen und sollte das Logo "nachpixeln". Stark verkleinerte Logos werden durch das Antialiasing oft zu einem Einheitsbrei. Wenn euer Icon nicht gerade die komplette Fläche ausfüllt, könnt ihr auch eine transparente Farbe definieren, wie bei einem GIF.

Wenn ihr ein schönes Icon erstellt habt, müsst ihr es als ICO-Datei abspeichern. Viele Browser akzeptieren übrigens auch andere Dateiformate. Um aber die maximal höchste Kompatibilität zu haben, sollte man auf ICO setzen.

Einbindung in HTML

Um die Datei einzubinden müsst ihr folgende Zeile in den HEAD-Bereich euerer Website einbinden. Achtet natürlich auf den korrekten Pfad zum ICO.

<link rel="shortcut icon" href="images/icons/favicon.ico" />
ICO-Datei in Photoshop erstellen
ICO-Datei in Photoshop erstellen