Eigene Favicons erstellen

Was ist ein Favicon?

Ein Favicon (Kurzform für favourite icon) ist ein kleines 16×16 oder 32×32 Pixel großes Bild, das in der Adresszeile des Browsers links neben der URL angezeigt wird und dazu dient, die dazugehörige Webseite  zu kennzeichnen, um sie besser wiederzuerkennen. Desweiteren ist das Favicon auch in der Lesezeichenleiste (Favoriten) zu sehen und bei den Registerkarten bzw.  Tabs ebenso.

Beispiel: links neben der URL erscheint ein Kreis, der eine 16×16 Pixel große Grafik ist.

favicon_beispiel

Favicons werden durch die Speicherung eines Icons mit dem Namen favicon.ico auf dem Server festgelegt. Aber es  ist auch möglich, Favicons im <head>-Element einer Seite einzubinden, was durchaus mehr Möglichkeiten bietet, wie zb. die Nutzung von PNG und GIF (animiert) Bildern  in den neueren Browsern.

Es gibt zwei Möglichkeiten ein Favicon in eine Seite einzubinden:

  1. Man gibt dem Favicon den festen Namen  „favicon.ico“ im Hauptverzeichnis der Domain. Beispiel bei http://www.netz-online.com/favicon.ico
  2. Einbindung über den <head> -Bereich einer HTML-Seite. Vor dem End-tag </head> bindet man einen der folgenden Codes ein:

<link rel="shortcut icon" href="http://www.beispiel.de/favicon.ico" type="image/x-icon">
<link rel="icon" href="http://www.beispiel.de/favicon.ico" type="image/x-icon">

Benötig wird eigentlich nur das erste <link>-Element, das zweite <link>-Element ist nötig, wenn man andere Formate als .ico verwenden möchte. Ganz Wichtig ist, dass sich beide Elemente im <head>-Bereich befinden und dass die Codes für <link type> richtig gesetzt werden:

  • Für ICO: „image/x-icon“
  • Für GIF: „image/gif“
  • Für PNG: „image/png“

Wie bekomme ich ein eigenes Favicon:

Entweder man benutzt ein Programm (zb. Irfanview) oder man verwendet einen der Online-Generatoren (siehe Liste unten). Der Vorteil von Online-Generatoren: Man muss nicht erst lange nach einem passenden Programm  suchen und kann innerhalb von wenigen Minuten  sein eigenes Favicon erstellen, ohne besondere grafische Kenntnisse.

Wie erstelle ich ein eigenes Favicon?

Man nimmt sich ein Bild oder erstellt sich selber eine Grafik zb. mit Paint, Photoshop ect. und verkleinert es auf 16×16 oder 32×32 Pixel. Folgende Eigenschaften sind zu beachten:

  • Für ICO: 16×16 oder 32×32 mit bis zu 16 Millionen Farben.
  • Für GIF: 16×16 und 256 Farben
  • Für PNG: 16×16 und 256 Farben (8 Bit)

Mit Irfanview kann man Bilder als .ico abspeichern. Ihr wählt „Speichern unter“ un dann wählt ihr das Fomat  „ICO – Windows ICON“. Oder ihr benutzt einen der folgenden Onlinegeneratoren mit denen ihr euer ganz persönliches Favicon erstellen könnt.

Online Favicon Generatoren:

favicon_generator

http://www.favicon-generator.de/ – Es kann entweder eine Bilddatei hochgeladen werden oder man erstellt sein Favicon Pixel für Pixel.  Man kann sein erstelltes Favicon in der Galerie präsentieren, um so einen zusätzlichen Link zu seiner Seite einzutragen.

favicon

http://www.favicon.cc/ -Mit dem Favicon-Editor und Generator von Favicon.cc kann man online ein eigenes Favicon entwerfen.  Neben dem Erstellen und Importieren hat man bei Favicon.cc die Möglichkeit, sein Favicon anderen Benutzern zur Verfügungung zu stellen und zu tauschen.

Wer kein eigens Favicon erstellen möchte, kann sich auch aus der Sammlung ein passendes Favicon aussuchen, dieses frei benutzen und auch umgestalten. Dazu  muss  man sich allerdings vorher registrieren.
dynamicdrive

http://tools.dynamicdrive.com/favicon/ -Unterstützte Formate: gif, jpg, png, and bmp.

favinator

http://www.favinator.de/ – Einfach ein Bild im Format jpg, jpeg, png, gif hochladen

http://www.favicon-maker.de/ – Bild hochladen und Favicon erstellen (auf Wunsch sogar animiert, mit individuellem Lauftext)

Über Susi

Moin, ich bin Susi. Hier auf www.netz-online.com veröffentliche ich Themen aller Art. Die Palette reicht von Shop-Vorstellungen, Produkttests, E-Commerce, Geld verdienen, Onlinehandel, Sparen, Technik und B2B.

1 Kommentar zu Eigene Favicons erstellen

1 Trackbacks & Pingbacks

  1. Favicon erstellen & in die Webseite einbinden

Kommentar hinterlassen

E-Mail Adresse wird nicht veröffentlicht.


*


Durch das Fortsetzen der Benutzung dieser Seite, stimmst du der Benutzung von Cookies zu. Weitere Informationen

Die Cookie-Einstellungen auf dieser Website sind auf "Cookies zulassen", um Ihnen das beste Surferlebnis möglich zu geben. Wenn Sie diese Website ohne Änderung Ihrer Cookie-Einstellungen zu verwenden fortzufahren, oder klicken Sie auf "Akzeptieren" unten, dann erklären Sie sich mit diesen.

Schließen