Favicon erstellen mit Adobe Photoshop

Donnerstag, 05. November 2009
Kategorie: videotutorials

In dem heutigen Tutorial zeige ich euch, wie ihr mit Adobe Photoshop ganz einfach ein Favicon erstellen könnt.


Das Favicon ist ein 16×16 oder 32×32 Pixel großes Symbol, Icon oder Logo, welches in der Adresszeile eures Internet Explorers neben der URL angezeigt wird. Das Favicon dient dazu, die zugehörige Website auf wieder erkennbare Weise zu markieren. Das Favicon taucht ebenso bei den Registerkarten (Tabs) unter Windows beim Speichern oder in der Lesezeichenleiste auf.

Mit dieser Codezeile
<link rel=“shortcut icon“ href=“favicon.ico“ type=“image/x-icon“ />
wird das Favicon direkt im Head-Bereich eures Quelltextes eingefügt. Die erstellte Grafik muss den Namen „favicon.ico“ tragen, um im Browsern richtig erkannt zu werden.

Wenn ihr selbst kein Photoshop zur Verfügung habt, könnt ihr auch einen Favicon Generator verwenden, welchen ihr beispielsweise kostenlos auf http://www.favicon-generator.de/ findet. Hier könnt ihr ein HTML Favicon aus einem Bild oder eigenen Zeichnungen generieren lassen.

Ich wünsche euch viel Spaß beim Ausprobieren und Anfertigen eures eigenen Favicons!

  1. November 18th, 2009 um 19:06 | #1

    Sehr schön, aber mit welchen Einstellungen ich das favicon speicher wird nicht erklärt 🙁

  2. Anonymous
    Dezember 21st, 2009 um 22:25 | #2

    Ja, das mit dem Speichern ist auch mein Problem -.-

  3. admin
    Dezember 22nd, 2009 um 13:33 | #3

    es genügt, das Favicon als bmp-Datei mit der Endung .ico zu versehen. Für
    Fotos und Logos ohne Adobe Photoshop kannst du ein Konvertierungsprogramm
    aus der Liste http://www.favicons.de/#tools auswählen, um das Icon-Format zu
    erzeugen. Hier noch die Größen für die Farbtiefe.

    Defaultgröße und -Farbtiefe:

    Für ICO: 16×16 oder 32×32 und 16 bis 16 Millionen Farben.

  1. No trackbacks yet.

Einen Kommentar dazu schreiben: