HTML / Tipps / Favicon erstellen

von: Werner Zenk

Favoriten Icon - Ihr Logo in den Favoriten (Lesezeichen)

Das Favoriten Icon wird bei einem Bookmark in die Favoritenliste aufgenommen. Dort erscheint zukünftig die „gebookmarkte“ Webseite mit einem eigenen Symbol. Ein nicht zu unterschätzender Vorteil. Wenn Sie mit einem entsprechenden Browser (I.Explorer, Firefox, Opera) hier sind, dann probieren Sie es doch einmal aus.

Info: Favoriten Icon (auch: „Favicon“ genannt = Kunstwort aus Favoriten und Icon)


Wie erstellt man ein Favoriten Icon für den Browser ?
  1. Als erstes benötigen Sie ein geeignetes Icon (z.B.: ein Logo).
    Mit dem Programm „RSIconEditor” erstellen Sie sehr leicht ein Icon.
    Das Icon muß eine Breite von 16 Pixel und eine Höhe von 16 Pixel haben.

      Zum herunterladen: RSIconEditor.zip (Freeware).
      Favicon Generator im Web: » http://www.html-kit.com/favicon (engl.)
      Favicon Generator im Web: » http://www.favinator.de
      „IcoFX” (Programm): » http://icofx.softonic.de

  2. Nachdem das Icon fertig ist, laden Sie es auf ihre Webseite.

  3. Fügen Sie anschließend in Ihren Webseiten den folgenden Link zwischen <head> und </head> ein.

    Beispiel 1: (Relative Adresse)
    <link rel="SHORTCUT ICON" href="../icons/icon.ico" type="image/x-icon">

    Beispiel 2: (Absolute Adresse)
    <link rel="SHORTCUT ICON" href="http://www.ihreseite.de/icon.ico" type="image/x-icon">

    Geben Sie bitte die genaue Adresse an, wo das Icon auf Ihrer Webseite zu finden ist. Außerdem muss der Name des Icons auf "icon.ico" lauten*.

Damit in den Lesezeichen neben dem Favicon ein Text steht, gehört noch eine aussagekräftige Titelzeile zwischen <title> und </title>.
Nicht einfach "Seite 2" , sondern z.B.: "Fotogalerie Müller".

Anmerkung: Der Internet Explorer 6 hat teilweise Schwierigkeiten das Favicon anzuzeigen. Die neueren Versionen des Internet Explorers zeigt die Favicons hingegen immer an.

* Ein animiertes Favicon muss im Unterschied zu Standard-Favicons im GIF-Bildformat und einer Größe von 16x16 Pixel sowie max. 256 Farben (8 Bit Farbtiefe) erstellt werden. Parallel wird dazu ein statisches Favicon im ICO-Bildformat (ebenfalls 16x16 Pixel, 256 Farben) erstellt, welches in den Browsern angezeigt wird, die keine animierten Favicons unterstützen. Anmierte Favicons unterstützen folgende Browser Firefox und Safari (teilweise).
Hits: 2703 - Bewertungen: 0 
    Ihr Kommentar
      Sie vermissen auf dieser Seite wichtige Informationen oder haben Hinweise für uns?
Kommentare: 40 » aufmachen   
Volker:
Soweit nicht schlecht - nur der Designer ist alt und taugt nix.........

Werner:
Ein neuer Designer ist Online

Michael:
auf meiner Seite http://michael-hocke.de/tutorial/favicon.php befasse ich mich mit der Vermeidung von Problemen mit Favicons.

fabfel:
Schade das es nur für dem PC und nicht für dem MAC ist.

julia:
und schade, dass es nicht für linux ist

Bruno:
hallo wie kann ich meine favicon am ende umbenennen in /favicon.ico, die */* wird nicht eingenommen. Meine generierte favicon endet mit *.zip* .

Werner:
Erstelle ein Favicon mit dem Programm " RSIconEditor.zip" das du auf Seite findest. *.zip* ist ein offenes Format zur komprimierten Archivierung von Dateien. zum öffnen benötigst du ein Programm z.B. Winzip oder 7-Zip.

Markus:
mit gimp kann man auch grafiken als ico speichern damit, also klappt es auch mit linux?

Hendrik:
Bei mir funzt das nicht. Ich kann das Programm nicht einmal starten!

Rolf:
Wo genau muss ich *Beispiel 2:* einfügen?

Werner:
In jeder HTML-Seite im Head-Bereich!

Thomas:
*favicon* wird aber nur online angezeigt, oder??In der Browservorschau kann er es nicht anzeigen!!??

Werner:
Das kommt darauf an, wenn eine absolute Adresse angegeben wurde, dann wird es nur "Online" angezeigt.

Moritz:
Darf man die Icons die man oben runterladen kann auf seiner Hp einbauen?

Werner:
Nur eines davon; als Favicon!

ichhier:
Beim Versuch des Programmm zu öffnen kommt eine Fehlermeldung und es lässt sich NICHT öfnnen - nur als Anmerkung!

Gerald:
mit diesem Tool kann man Favicons auch ONLINE generieren: http://www.webmaster-elite.de/online-tool....html

Duda:
Hallo!Das Programm wäre echt super, wenn ich dann auch meine gespeicherten Icons öffnen könnte!Voran liegt das, dass es nicht geht?

ichiu:
das is dumm, ich kann keine icons hochladen, was tun?

mama2:
@ ichiu:ich würd nene neuen Anbieter suchen, soetwas bieten selbst Freewebhoster an und Duda... Deine gespeicherten Icons kannst du eigentlich mit fast jedem Bildbetrachter öffnen (z.B.: IrfanView)

uschi:
super diese Anleitung sogar ich habs geschafft Danke

Claus:
Obwohl bei mir im Head von jeder Html Datei der Beispiel 2 Code drin ist und auch im root verzeichnis ein Favicon.ico existiert, zeigt es mir das trotzdem nicht an. Was tun?

Werner:
Funktioniert nicht immer beim I.Explorer 6, oder wenn das Icon zu groß ist.

Hannes Brugger:
also wenn man ein favicon einbauen will geht das so brauch kein ico datei für kann auch gif sein alo einfach so machen in denn header oder ins design
</head>
<link rel="SHORTCUT ICON" href="http://meine homepage.de/animated_favicon.gif" type="image/x-icon">
</head>


blogfeuer:
Hi, habe da ganze auch mal zusammengefasst. Den Tipp habe ich auch hier gefunden und einen kleine Bericht geschrieben. http://www.blogfeuer.de/?p=29

Rüdiger:
es geht auch einfacher. Einfach mit einem Grafikprogramm ein Bild der Wahl auf 16 X 16 Pixel ändern und auf den Server kopieren. Anschließend das Bild auf favicon.ico ändern und <link rel=*SHORTCUT ICON* href=*http://www.ihreseite.de/icon.ico* type=*image/x-icon*> unter head eintragen. Gruß von http://preismuli.de

Harald:
Und hier ist ein genialer kostenloser Icon Editor: http://icofx.softonic.de/

Simone:
Hallo, bei meiner Suche bin ich auf den Favinator gestoßen. Liefert auch ganz positive Icons aus. Vielleicht für jemand anderes auch noch hilfreich. Hier die Adresse: » http://www.favinator.de

Conny:
» http://www.favicon-maker.de sollte auch nicht in der Lister der Online Favicon Generatoren fehlen

Matthias:
Ich sehe das Favion nur wenn ich die Seite direkt anwähle. http://home.arcor.de/mupmueller2/index.htm Wenn ich aber über die Weiterleitung www.rollerfreunde-braunschweig.de diese Seite aufrufe, bekomme ich nur das komische *E*. Habt ihr einen Rat für mich?

Werner:
Füge link rel="shortcut icon" href="favicon.ico" auch in deinem Frameset ein, den Pfad zum Icon musst du dann aber anpassen.

Das funktioniert nicht:
Ich hab´s jetzt bei 3 verschiedenen Anbietern von Webspace versucht aber keiner hat mein Favicon angezeigt. Woran kann das liegen?

Hugh:
Hallo Werner,Du bist ein Genie! Es hat bei mir funktioniert! Danke für den Tipp, Grüß Hugh

Thomas:
Auf einer anderen Seite habe ich gelesen, dass das Favicon keine .ico Datei sein muss. Es kann auch eine animierte Gif-Datei sein!

Werner:
Ja, das stimmt. Aber man kann nicht jedes .GIF-Bild verwenden (größere Bilder werden nicht angezeigt (abhängig vom Browser)) es können auch animierte GIF´s verwendet werden. Hier gibts einen einfachen schnellen Generator im Web: http://www.html-kit.com/favicon

Jonathan Zielke:
Klappt echt gut. Ein großes Dankeschön.

Jenny:
Klasse Tipp, hat super geklappt. Vielen Dank an Euch!!!

Erich:
Hallo, bei mir scheint es als einziger nicht zu funktionieren.Gut muss auch dazu sagen das ich einAnfänger in sachen HP und Pc bin. Mein Webspace ist bei 1und1. Meine Hp bearbeite ich mit MVU und FileZilla.Vieleicht kann mir jedand behilflich sein.Meine HP: www.clownerico.de

Werner:
Du hast da einen Fehler:
<link rel="SHORTCUT ICON" href="http://www.clownerico.de/index.html/icon.ico" type="image/x-icon">
Richtig:
<link rel="SHORTCUT ICON" href="http://www.clownerico.de/icon.ico" type="image/x-icon">


Hanna:
VIELEN DANK,Sie haben mir sehr geholfen.Lieben Gruß aus Köln Hanna 07.03.2010



Hilfe finden Sie im » netzgemein.de - Forum. Auch als „Gast” können Sie dort Fragen stellen!
 Das könnte Sie interessieren:
Bildlaufleisten (Scrollbar) ausschalten  Datum und Zeitfunktionen - Ausgabe von Datum, Uhrzeit und anderen Datumsformatierungen.  Vokabeltrainer - Ein kleiner Vokabeltrainer. Funktioniert im Zusammenspiel von JavaScript und PHP. Die Vokabeln können wahlweise in deutsch oder englisch abgefragt werden.  Eingabefeld mit Schatten  Barrierefreie Homepageseiten   KommentarMaker - Erstellt Kommentare für HTML, JavaScript, PHP, MySQL und VB-Script.  Elfenschilder-Generator - Dieser Generator erstellt Schilder mit individuellen Text-Inhalt. Zudem lassen sich noch die Textfarbe, Hintergrundfarbe, Rahmenfarbe und die Schriftgröße einstellen.  Serverausfall  …mehr
© 2000-2010 Homepage-Total.de         KontaktImpressumBanner
Besucher Online: 10   Heute: 275   Gestern: 4.788   Gesamt: 301.656