Web-Favicons mit Photoshop erstellen (Plug-In)

Tutorials, Videos 17. März 2011 – 3 Kommentare

Gerade für Webdesigner ist es ein herbe Enttäuschung, dass es in Adobe Photoshop nicht möglich ist, Dateien mit der Endung *.ico zu speichern. Das Ico-Format wird unter Windows für Datei-Icons verwendet oder im Web, um in der Adressleiste des Browsers kleine Icons (auch Favicons genannt) zur aktuellen Webseite darzustellen.

In der Regel werden für diesen Zweck Online-Generatoren zur Hilfe genommen, um z. B. JPGs oder PNGs in das Ico-Format umzuwandeln.

Dieser umständliche Zwischenschritt muss allerdings nicht sein, denn es gibt die Möglichkeit, Photoshop über ein kostenloses Plug-In so zu erweitern, dass es die kleinen 16×16 Pixel-Bilder im Ico-Format speichern kann.

Wir empfehlen:
Photoshop-Video-Training - Basics & Tricks

Dazu ladet ihr euch als Erstes die Plug-In-Datei von der Telegraphics Webseite hier herunter; achtet dabei auf die passende Photoshop-Version und das richtige Betriebssystem. Dann entpackt ihr die Daten auf eurem Rechner und kopiert die Plug-In-Datei in folgendes Verzeichnis:

Unter Mac OS:
Macintosh HD > Programme > Adobe Photoshop CS* > Plug-Ins > Neuen Order erstellen > Hier das Plug-In hinein kopieren.

Unter Windows:
C:\Program Files (x86)\Adobe\Photoshop CS\Plug-Ins\File Formats

Wenn ihr diese Schritte ausgeführt habt, seid ihr auch schon fertig. Startet jetzt euer Photoshop und wählt einmal: Datei > Speichern unter… nun habt ihr in der Format-Liste den Punkt ICO.
Dort könnt ihr nun eure Dateien im entsprechenden Ico-Format speichern und in eure Webseite einbinden:

Das Favicon muss 16×16 Pixel groß sein und wird über folgenden HTML-Tag eingebunden:
<link rel=“shortcut icon“ type=“image/x-icon“ href=“favicon.ico“ />

Wir empfehlen:
Camera Raw-Video-Training

Jetzt bist du gefragt!

Dir hat das Tutorial gefallen? Hast du Kritik, eine Frage zu diesem Tutorial oder möchtest einfach nur ein Lob aussprechen? Dann freuen wir uns auf deinen Kommentar. Du kannst dieses Tutorial auch weiterempfehlen, wir sind dir für jede Unterstützung dankbar!

Unsere Empfehlung für dich

Freistellen mit Photoshop

Freistellen mit Photoshop

Du willst wissen, wie du Personen und Tiere, Haare und Felle, Gläser und Flaschen, Wolken und Feuer, Bäume und andere filigrane Objekte freistellen kannst? Dann ist das genau dein Praxis-Training!

  • 8 Stunden Video-Training - Schritt für Schritt alle Freistelltechniken ergründen
  • Geeignet für Photoshop ab CS3, komp. mit MAC, PC & Tablets (iPad)

Mit diesem Training wechselst du als Einsteiger zu den Profis!

Zum Training

Löse das Quiz und teste dein Wissen:

3 Antworten zu “Web-Favicons mit Photoshop erstellen (Plug-In)”

  1. Jana sagt:

    Vielen Dank,

    der Tipp war sehr hilfreich für mich!

    :)

  2. Ahmet sagt:

    Guter Tipp!
    Gut und kurz erklärt!
    Quiz ist fehlerhaft / falsch, denn wie schon die Frage war und auch selbst bei Corel und Gimp angegeben, ist nur bei denen ICO Standardmäßig dabei und bei PS eben NICHT! ;)

    Trotzdem amysant und nochmals danke – hatte den Link / die Adresse vergessen.

  3. […] sehr ausführlich dargestellt. Doch solltest du dich dafür interessieren, findest du unter “Web-Favicons mit Photoshop erstellen”  und “Mysteries of the favicon.ico” weitere […]

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

Folgende HTML-Elemente sind erlaubt:<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>