Favoriten-Icon mit Photoshop selbst erstellen (favicon.ico)

Neben vielen Websites erscheint in deinen Favoriten erscheint ein Icon (kleines Bild oder Logo)- wie kann ich dieses “favicon ico” selbst erstellen?

Favicon selbst erstellen

Ohne viel Aufwand kann man es erreichen, dass neben Ihrer Website-Adresse ein Icon mit Grösse von 16×16 Pixeln erscheint:

1. Favicon erstellen

  • Zuerst ein beliebiges Bild oder Logo in der Größe von 16×16 Pixel erstellen
  • zwischenspeichern kann man die Grafik am besten im .PSD Photoshop Format

2. Favicon exportieren

  • zum Exportieren in .ico Format wird ein kostenloses Plugin (mac, pc) für Photoshop benötigt. Hier kostenlos downloaden. Einfach das Verzeichnis in das Plugin-Verzeichnis von Phototshop (Zusatzmodule, oberste Ebene) kopieren
  • Speichern, .ico Format auswählen und unbedigt unter dem Namen “favicon.ico” sichern, es funktioniert nur diese exakte Schreibweise

3. Favicon in die Website einbinden
In jede HTML-Seite eurer Website folgenden HTML-Code in den Head-Bereich der Seite ein:

<link rel=”SHORTCUT ICON” xhref=”/favicon.ico” mce_href=”/favicon.ico” >

Achtung: Wenn eine Datei in einem Unterverzeichnis liegt muss der href-Tag angepasst werden. Sinnvoll ist es, das Icon nur einmal im obersten Verzeichnis der Website abzuspeichern (www.deinewebsite.de/favicon.ico), damit braucht man in jede HTML Seite xhref=”/favicon.ico” mce_href=”/favicon.ico” einzufügen.

This entry was posted in Design Tutorials, Photoshop and tagged . Bookmark the permalink.

5 Responses to Favoriten-Icon mit Photoshop selbst erstellen (favicon.ico)

  1. Pingback: Bild im INTERNET eXPLORER - Seite 2 - PSP Forum

  2. Max says:

    Das PS Plugin funktioniert nicht mit CS3 auf Mac OS X.

    Wie kann ich trozdem eine ico datei erstellen?

  3. Dimitri says:

    Auch eine gute Alternative das Favicon mit einem Online Tool zu erstellen, wurde im folgenden Tutorial beschrieben: Favicon Online erstellen

  4. molronda says:

    Sehr einfaches und geniales Plugin. Funktioniert perfekt in CS 4.

  5. david3101 says:

    Ich benutze mein Photoshop eher selten. Schade, dass man damit keine ICOs speichern kann. Mit dem hier vorgestellten Verfahren und dem zugehörigen Plugin (Das war mein erstes Photoshog-Plugin) war’s dann aber eine Kleinigkeit.

    Vielen Dank für den Guten Tip

Hinterlasse eine Antwort

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

*

Du kannst folgende HTML-Tags benutzen: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>