[Tipp 13]
Favicons mit Adobe Photoshop und GoLive erstellen:

Favicon Beispiele

Abbildung 1

Möchten Sie erfahren, wie man eigene Website-Icons für die Adresszeile der Browser, wie oben zu sehen ist, erstellt? Mehr und mehr Web-Designer wollen heute solche Icons (favicons genannt) erzeugen. Adobe GoLive und Photoshop machen es wirklich einfach so etwas für die aktuellen Browser auch auf dem Mac zu erstellen.

Was wird dafür benötigt?

  1. Adobe Photoshop <http://www.adobe.com/products/photoshop/main.html> oder Photoshop Elements <http://www.adobe.com/products/photoshopel/main.html> um die Grafik für das Icon zu erstellen.
  2. Windows-Icon-Format-Plugin (ICO) für Photoshop, um diese spezielle Dateiformat zu exportieren. Dieses kostenlose Plugin kann bei Telegraphics downgeloadet werden: <http://www.telegraphics.com.au/sw/>. Einfach das Verzeichnis in das Plugin-Verzeichnis von Phototshop (Zusatzmodule, oberste Ebene) kopieren, bevor Sie dieses Tutorial nachvollziehen.
  3. Adobe GoLive <http://www.adobe.com/products/golive/main.html> zur Verwaltung und für den Upload der Datei auf den Webserver.

Was sind die Arbeitsschritte dafür?

Schritt 1: Die Photoshop-Vorlage erstellen

Die endgültige Größe des Icons ist 16x16 Pixel, aber mit so einer kleinen Ansicht zu arbeiten ist eher nervig, also legen wir das Dokument mit 64x64 Pixel an. Die Verkleinerung wird danach schon sehr klar zu sehen sein. Also jetzt Datei --> Neu... anwählen und eine Fläche von 64x64 Pixeln erstellen, wie unten zu sehen ist:

Neues Photoshop Dokument

Abbildung 2

Schritt 2: Gestalten des Icons

Die Gestaltung des Icons bitte so anlegen, dass hinterher eine gute Qualität in der Verkleinerung auf 16x16 Pixel möglich ist. Bitte beachten das sehr feine Elemente bei diesen Größen verloren gehen, genauso wie kleine Schriftgrößen und Verläufe.

Schritt 3: Verkleinerung des Icons

Wenn das Design des Icons fertig gestellt wurde sollten das Bild erstmal in der Größe 64x64 Pixel als PSD-Datei gesichert werden, danach die Bildgröße auf 16x16 Pixel ändern über Bild --> Bildgröße... so wie es in Abbildung 3 zu sehen ist. Wenn einem das Bild in dieser Größe nicht zusagt einfach über Bearbeiten --> Rückgängig in den letzten Status zurückgehen und Schritt 3 so lange wiederholen bis ein zufriedenstellendes Ergebnis in 16x16 Pixel erreicht wird.

Photoshop Dokument verkleinern

Abbildung 3

Schritt 4: Das Icon sichern
Wenn das Ergebnis den Wünschen entspricht in 16x16 Pixel Größe bitte Datei --> Speichern unter... anwählen. Dort bitte als Namen favicon.ico (Die Schreibweise des Namens muß unbedingt so sein, sonst geht es nicht!!) vergeben und als Format Windows Icon (ICO) anwählen und im Rootverzeichnis der entsprechenden Website sichern.

favicon.ico Datei sichern

Abbildung 4

Schritt 5: Hochladen der Icon-Datei
Wie schon erwähnt die Datei als favicon.ico in das Root-Verzeichnis (ganz oben) der GoLive-Site einfügen und auf den Web-Server uploaden, wie es unten zu sehen ist:

favicon.ico im Site-Fenster

Abbildung 5

Schritt 6: Das Icon testen
Nachdem die Arbeitsschritte 1–5 durchgeführt wurden kann man jetzt das Ergebnis in einem Browser der Favicons unterstützt aus dazu gehören außer dem IE, Mozilla und NS in den neueren Version (ab 6), bitte vorher unbedingt alle Browsercaches löschen:

Hinweise: Das favicon wird im IE Mac leider nicht dargestellt (obwohl es MS-Technik ist), unter Windows soll man, wenn das Icon nicht erscheint die Seite zu den Favoriten hinzufügen und dann würde es funktionieren.
Dann gibt es noch die Möglichkeit über eine Anweisung im Seitenkopf den Pfad und das Icon zu definieren: <link rel="SHORTCUT ICON" href="/favicon.ico"> so oder für ein Unterverzeichnis: <link rel="SHORTCUT ICON" href="http://www.yourdomain.com/images/favicon.ico">

Dieses Tutorial stammt von Adam Pratt und wurde von mir für die gltipps.de übersetzt und überarbeitet.

Diese Seiten wurden zuletzt aktualisiert am Dienstag, 21. Januar 2003