Favicon-Generator adé. Favicons mit Photoshop

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.

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 16×16 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.

Photoshop CS4 für Webdesigner

Themenverwandte Artikel:

Folgende Beiträge könnten dich ebenfalls interessieren.


Dieser Beitrag wurde am 20. Mai 2009 in der Kategorie Resources, Tips 'n' Tricks, Webdesign veröffentlicht. Es wurden folgende Tags vergeben: , , ,

13 Reaktionen auf diesen Beitrag

  1. Lars
    20. Mai 2009, 22:36 Uhr

    Ich habe das auch nicht gewusst. Ist ja super das es da ein plugin für *.ico gibt :-)

  2. Jonas
    20. Mai 2009, 23:18 Uhr

    Danke!! Das baut mich auf!

  3. Andre
    22. Mai 2009, 12:41 Uhr

    Rock ‘n’ Roll, Jonas!

    BTW ich wusste es auch nicht, dass es für PS ein Plug-In dafür gibt… tüdelüü

  4. Marco
    25. Mai 2009, 08:16 Uhr

    Hallo

    Bei mir funzt dieses Plugin unter Windows XP mit PS CS3 nicht…
    Hab es in diesen Ordner kopiert, aber geht trozdem nicht xD
    C:\Programme\Adobe\Adobe Photoshop CS3\Required\plug_ins3d
    Naja solls geben ^^

    Greets
    Marco

  5. Andre
    25. Mai 2009, 08:58 Uhr

    Hallo Marc,

    ich habe die selben Vorraussetzungen, bei mir funktioniert es allerdings einwandfrei!
    Ich habe die Datei “ICOFormat.8bi” in den Ordner “C:\Programme\Adobe\Adobe Photoshop CS3\Zusatzmodule\Dateiformat” reinkopiert und nun kann ich sowohl über “Öffnen” .ICO-Dateien öffenen als auch über “Speichern” Bilder als .ICO abspeichern.

    Wichtig! Nicht über über “Für Web und Geräte speichern” gehen, sondern über normal “Speichern unter…”!

    Grüße
    André

  6. Andre
    25. Mai 2009, 09:00 Uhr

    Hab ein paar Tippfehler in meinem vorherigen Kommentar versteckt ;D Hups…

  7. Stephan
    25. Mai 2009, 11:58 Uhr

    Danke für den Tip und die ausführliche Beschreibung.

    Hab Deinen Feed gleich mal abonniert und will in diesem Zusammenhang auch mal Danke dafür sagen (schreiben ;-) ), dass der Feed vollständig angezeigt wird. Leider ist dies heutzutage nicht unbedingt selbstverständlich.

    Und noch zum Schluss -> Hammerdesign … sieht wirklich toll aus.

    Gruß Stephan

  8. Jonas
    25. Mai 2009, 12:13 Uhr

    @Stephan: Danke für die Blumen! Was den Feed angeht, so finde ich selbst gekürzte Feed absolut zum kotzen weshalb du diese hier niemals finden wirst. Ich lese selbst viele Feeds übers Handy, dort will ich die Seite gar nicht laden müssen. Wenn mich was interessiert, klick ich die Seite eh an und speichere sie anschließend bei delicious oder so…

  9. Chris
    26. Mai 2009, 14:39 Uhr

    Man Jonas, du hättest mich einfach nur mal fragen müssen ;)

    Hab sogar noch eins mit etwas mehr Funktionen http://www.sibcode.com/icon-plugin/index.htm

  10. Jonas
    26. Mai 2009, 15:00 Uhr

    @Chris: Ohman.. Welch Schmach. Das nächste mal frag ich vorher.. bzw. ich bin ja gar nicht auf die Idee gekommen, dass es sowas gibt..

  11. Franz
    23. Juni 2009, 09:52 Uhr

    Super so etwas hab ich schon gesucht.

  12. Dex
    26. Juni 2009, 13:54 Uhr

    Besten Dank! Endlich erspart man sich als Photoshoppler den Umweg über die ‘image-to-icon’-seiten. Tolle Sache! Nett dass Du uns an Deiner Entdeckung teilhaben lässt!

  13. René
    25. Oktober 2009, 00:13 Uhr

    Hi Jonas!
    Ohne jetzt deine Illusionen zu zertören, diese Plug_in gibt es schon seit etwa 5 Jahren ;)

Bitte kommentiere diesen Eintrag!

Dir hat dieser Eintrag gefallen, du hast Fragen, Anregungen oder Kritik? Hier ist Platz dafür. Jeder Kommentar wird ernst genommen und trägt zum Informationsgehalt meiner Seite bei. Also los!