Favicon Erstellen

Montag, 08.02.2010

Da ich mich sowiso gerade wieder mit einem Favicon herumgeschlagen habe, möchte ich euch nun Zeigen, wie ihr Favicons richtg erstellt.

Was ist überhaupt ein Favicon ?!

Ein Favicon ist ein kleines Icon, dass links von der Adressleiste des Browsers angezeigt wird. Es ist sozusagen ein kleines identifizierungssymbol der Webseite. Es wird auch bei den Favoriten mit Abgespeichert.

Natürlich gibt es viele Wege, jedoch wird meist das Favicon nur bei alternatien Browsern wie z.B. den Mozilla Firefox oder Opera angezeigt. Mit meiner Methode funktioniert es in allen Browsern. Es gibt auch viele online Favicon ersteller, jedoch ist hier das Problem, dass sie entweder nicht Angezeigt werden oder nur mit 256 Farben generiert werden.

Zuerst Erstellen wir uns ein Bild mit den Maßen 16px X 16px.

Das könnt ihr in Photoshop, Paint.NET oder Gimp machen. Als nächsten Schritt solltet ihr Bedenken, dass euer Icon auch gut zu Erkennen sein sollte.

Wenn ihr das Favicon fertig gestaltet habt, speichert Ihr es unter dem Dateiformat .PNG ab.

Anschließen braucht ihr das Bildbearbeitungs Programm “IrfanView“. Jetzt Öffnet ihr die das Icon mit IrfanView und Speichert es anschließend (Datei/Speicher unter) unter den Dateityp .ICO (Windows Icondatei) ab. Vorteilhaft wäre es, wenn ihr es direkt favicon nennen würdet.

Nun müsst ihr das Favicon auf eueren Webspace Hochladen (rootverzeichniss in dem die “index-Seite” liegt) und richtig in die Webseite Einbinden.

Dazu müsst ihr folgenden code in den “head” – bereich kopieren

<head>
<link rel=”shortcut icon” href=”favicon.ico“/>
</head>

Wenn Ihr es richtig nach dieser Anleitung gemacht habt, dann wird nun euer Favicon in jedem Browser richtig dargestellt ;)

, , , ,

Programmierung, Tweaks

Lesermeinungen:

Peppie
9. Februar 2010

hmm also irgendwie wird deins hier aber nicht angezeigt xD

Maysi2k
9. Februar 2010

http://blog.maysi2k.de/fav2.ico – da machste mal ein “strg + f5″ …

Peppie
9. Februar 2010

Kann ich da euch ein jpg oder gif erstellen und dieses dann in Örfanview als ico wandeln? Wieso png? xD

Maysi2k
9. Februar 2010

Klar kann man auch .jpg oder .gif verwenden, aber gerade für einen Farbverlauf oder Transparens ist .png “the shit” :D

Peppie
9. Februar 2010

Ich kann aber auch transparente Gifs machen :P

Maysi2k
9. Februar 2010

Du kannst jedes X-Beliebige Format nehmen… aber .PNG ist für mich das beste :)

Sag mir Deine Meinung! ;)


Trackback URL



Ähnliche Artikel

Meinungen