Favicon-Generator adé. Favicons mit Photoshop

photoshop-plugin-favicon-icon

Ich habe bisher zum Erstellen von Favicons immer Online-Favicon-Generatoren benutzt. Heute habe ich, sowohl erfreut als auch peinlich berührt, zur Kenntnis genommen, dass es dafür ein Photoshop-Plugin gibt.
In der Hoffnung nicht der Einzige zu sein an dem diese Tatsache vorbeigegangen ist, erkläre ich Euch kurz wie das Ganze funktioniert.

Modernes Webdesign

Neue Workflows, Techniken und Designideen – inkl. Rapid Prototyping, Responsive Design und Sass.

In unserem Shop kaufen
Signierte DVD, keine Versandkosten

Bei Amazon bestellen
Standard-Version

Plugin herunterladen und aktivieren

Zunächst ladet Ihr Euch das entsprechende Plugin herunter und aktiviert es. Die "Installation" sieht folgendermaßen aus: Unter OSX entpackt ihr das dmg-File und verschiebt anschließend die Datei "ICOformat.plugin" in den Plugin-Ordner von Photoshop. Standardmäßig lautet dieser: Macintosh HD > Programme > Adobe Photoshop CS4 > Plug-Ins > Neuen Order erstellen > Hier das Plugin einfügen. Das wars auch schon.
Unter Windows lautet der Pfad wie folgt: C:Program Files (x86)AdobeAdobe Photoshop CS3Requiredplug_ins3d. (Danke an Matthias für diese Info.)

Plugin nutzen

Sobald das Plugin in den Photoshop-Ordner kopiert wurde ist es voll funktionsfähig. Startet Photoshop nun einmal neu, anschließend habt über "Datei > Öffnen/Speichern unter..." die Möglichkeit Dokumente im ICO-Format zu öffnen und ebenso abzuspeichern.

Favicon erstellen

Wenn Ihr ein Favicon für Eure Website erstellen möchtet so öffnet zunächst eine neue Datei mit den Abmessungen 16x16 Pixeln. Anschließend gestaltet Ihr dort das Favicon. Achtet auf einen transparenten Hintergrund, da ansonsten hässliche weiße Stellen je nach Hintergrund sichtbar werden können. Über "Datei > Speichern unter > ICO-Format" speichert Ihr nun die Grafik unter dem Dateinamen "favicon.ico" ab.
Anschließend kopiert Ihr die Datei in den Root (oberste Hierarchieebene Eurer Website) und verlinkt das Favicon mit folgendem Code-Snippet im HEAD der Seite. Achtet darauf evtl. den Pfad zum Favicon anpassen zu müssen.

<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />

Unter WordPress verschiebt Ihr das Favicon in Euren Theme-Ordner und verlinkt es mit folgendem Snippet. In diesem Fall muss kein Pfad angepasst werden.

<link rel="shortcut icon" type="image/x-icon" href="<?php bloginfo('template_url'); ?>/favicon.ico" />

Danke an Matej für die Info über dieses Plugin.