Photoshop, Tutorials, Video-Trainings, Workshops, Bildbearbeitung, Fotobearbeitung, Webdesign, Effekte, Downloads

Web-Favicons mit Photoshop erstellen (Plug-In)

17. März 2011 in Tutorials, Video-Trainings von Pascal Bajorat

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.

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” />

 

 

Löse das Quiz und teste dein Wissen:

Unsere Empfehlung für dich: