kulturbanause Blog

Responsive Design, WordPress, Konzeption, HTML, CSS, JS & UX/UI â€¦

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.

Workshops und Seminare von kulturbanause

Visual Prototyping, Responsive Design, CSS Grid & Flexbox, Sketch, Adobe XD …

Jetzt Frühbucher-Rabatte sichern!

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.

Jetzt bist du gefragt!

Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freuen wir uns auf deinen Kommentar.

Du kannst diesen Beitrag natürlich auch weiterempfehlen. Wir sind dir für jede Unterstützung dankbar!

15 Kommentare

  1. Lars

    Verfasst am 20. Mai 2009 um 22:36 Uhr.

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

    • Jonas

      Verfasst am 20. Mai 2009 um 23:18 Uhr.

      Danke!! Das baut mich auf!

  2. Andre

    Verfasst am 22. Mai 2009 um 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üü

  3. Marco

    Verfasst am 25. Mai 2009 um 8: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

  4. Andre

    Verfasst am 25. Mai 2009 um 8: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é

  5. Andre

    Verfasst am 25. Mai 2009 um 9:00 Uhr.

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

  6. Stephan

    Verfasst am 25. Mai 2009 um 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

    • Jonas

      Verfasst am 25. Mai 2009 um 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…

  7. Chris

    Verfasst am 26. Mai 2009 um 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

    • Jonas

      Verfasst am 26. Mai 2009 um 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..

  8. Franz

    Verfasst am 23. Juni 2009 um 9:52 Uhr.

    Super so etwas hab ich schon gesucht.

  9. Dex

    Verfasst am 26. Juni 2009 um 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!

  10. René

    Verfasst am 25. Oktober 2009 um 0:13 Uhr.

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

  11. Nik

    Verfasst am 11. Juli 2011 um 10:41 Uhr.

    Ich hab’s auch nicht gewusst. Danke für den Hinweis und die Erklärung! *Top*

  12. Ico

    Verfasst am 9. April 2016 um 2:32 Uhr.

    Danke, dass du mich dran erinnert hast ;) Ich wollte mein Schaf schon lange als Favicon verwenden, und jetzt hab ichs endlich geschafft.

Kommentar verfassen

Dieser Blog lebt vom Feedback der Besucher! Also los, mach mit!
Bitte habe Verständnis dafür, dass Kommentare die mit dem Inhalt dieses Beitrags nichts zu tun haben, gelöscht werden.