Abonniere die Beiträge von PinkPearl Info

EMail Adresse hinzufügen

Teile dich mit!

Verwende den Hashtag #ppiupdate in den Sozialen Medien (wie zum Beispiel Twitter), um Besucher auf deine Updates aufmerksam zu machen.
Mehr Infos...

Dienstag, 6. August 2013

Photoshop: Favicon erstellen

lulu
Habt ihr euch schon mal gefragt, wie ihr einen Favicon erstellen könnt? Mit Photoshop ist das gar nicht so schwer.



Was ist ein Favicon?
Ein Favicon (kurz für favorite icon, engl. für Favoriten-Symbol) ist ein kleines, 16×16 oder 32×32 Pixel großes Icon, Symbol oder Logo, das unter anderem in der Adresszeile eines Browsers links von der URL angezeigt wird und meist dazu dient, die zugehörige Website auf wiedererkennbare Weise zu kennzeichnen. Quelle: Wikipedia


Ein Favicon hat die Dateiendung .ico, weswegen man es nicht so einfach ohne ein extra Programm erstellen kann. Doch mit folgendem Photoshop Plugin ist es möglich.


Windows (32bit): Download
Windows (64bit):  Download
Den Download für Mac findet ihr auf Telegraphics
Dateigröße: 48 kB
Quelle: Telegraphics



So gehts!

Ladet euch einfach die Datei runter und entpackt diese. Nun müsst ihr die Datei in euren Photoshop Ordner verschieben und zwar in den Unterordner "Plug Ins". Erstellt dort am Besten einen neuen Ordner namens "File-Formate".
 Zum Beispiel:

C:\Program Files\Adobe\Adobe Photoshop CS4\Plug-Ins\File-Formate

Oder auf englisch:
C:\Program Files\Adobe\Adobe Photoshop CS4\Plug-Ins\File-Formats

Nun könnt ihr in Photoshop eine Datei auch als .ico abspeichern. Dazu einfach ein 16x16 oder 32x32 Bild erstellen und mit "Speichern unter" das .ico Format auswählen.


Übrigens gibt es auch kostenlose Konverter im Internet, bei denen ihr eure Bilder in .ico Bilder verwandeln könnt. Ein solcher Konverter ist zum Beispiel Ico Converter.com.


Favicon einfügen

Nun ladet ihr euren erstellen Favicon auf eurem Server hoch und fügt folgende Zeile in euren Homepage Quelltext ein (hinter <head>):

<link href="deinfavicon.ico" rel="icon" type="image/x-icon"></link>
"deinfavicon.ico" müsst ihr natürlich mit der URL eures Favicons ersetzen ;)

6 Kommentare:

  1. Toller Post aber ein Plugin ist nicht immer nötig Lulu, z.b mein Photoshop der hat keine weiteren Plugins (hatte ich noch nie benötigt) und er kann problem .icos erstellen. aber für die Photshops die das nicht haben ist das ein spitzen Post ^.^

    AntwortenLöschen
  2. Wow danke *Q*
    Wusste gar nicht das es sowas gibt O__O
    Mein Photoshop zu Hause (OKAAAY es ist CS2 ! XDDD Na und ? OLD FASHION ROCKT ! XD)
    sowie meins auf der Arbeit (und das das CC O_o) können keine ico speichern. ! Öffnen ja, bearbeiten, ja aber speichern net !

    Du hast mir echt das Leben gerettet *Q*

    AntwortenLöschen
  3. Lulu?? brauche Hilfe. Ich bekomme es einfach net hin, dass er mir mein Favicon auf Shojo Sénshu anzeigt. :<
    Aso und die runterlade Datei funktioniert bei Photoshop CS6 net, da wird mir diese Möglichkeit als .ico zu speichern nach wie vor net angezeigt habe jetzt einen Online-Converter dafür verwendet & alles Schritt für Schritt wie hier beschrieben eingefügt. Aber irgendwie will er das Favi einfach net anzeigen :(

    AntwortenLöschen
  4. Es geht auch ganz einfach mit GIMP. Man erstellt einfach ein Bild in der jeweiligen Größe (16x16 oder 32x32) und wenn man es speichern möchte, ändert man beim Speichervorgang einfach die Endung zu .ico. Daraufhin fragt das Programm, mit welcher Palette man es speichern möchte - je nach Palette hat das Icon dann eine unterschiedliche Qualität.
    Lädt man das Favicon im Hauptverzeichnis/root hoch, so ist eine Verlinkung im Header außerdem nicht zwingend notwendig, da die meisten Browser das Favicon von alleine finden und anzeigen.

    AntwortenLöschen
  5. Habs schon hinbekommen. Bei mir lang es einfach an Firefox, dass es mir net angezeigt wurde. Habs jetzt mit mehreren Browsern und an nem anderen PC probiert und dann festgestellt, dass doch alles funktioniert hat nur mein PC mir das net angezeigt hatte. ^^ Vielen Dank für das super Tutorial hier & weiter so ich liebe deine Tutorials <3

    AntwortenLöschen

Coprights @ 2016, Blogger Templates Designed By Templateism | Distributed By Gooyaabi Templates