Die sogenannten Favicons dienen dazu, um z.B. Bookmarks zu Ihrer Site individueller zu gestalten. Ihr Logo wird beim Aufruf der Seite auch in der Adresszeile angezeigt. Dies zu realisieren ist leichter, als Sie glauben.
Warum braucht man ein Favicon?
Das Favicon wird beim setzen eines Lesezeichens, auch “Bookmark” oder “Favorite” genannt, gespeichert und im Browser neben dem jeweiligen Bookmark angezeigt.
So hebt sich das Lesezeichen zu Ihrer Site wesentlich von den übrigen ab und ist schneller zu finden oder wiederzuerkennen.
Wenn Sie ein sogenanntes Favicon angelegt haben, erscheint es auch in der Adressleiste der aktuellen Browser. So findet der User Ihr Logo an den verschiedensten Orten wieder.
Dies ist für die Marken- und Imagebildung hilfreich, da sich das Logo mehrfach einprägt und immer wieder im Browser auftaucht, auch wenn der Nutzer nicht auf Ihrer Site ist.
Anlegen eines Favicon
Zunächst müssen Sie mit einem beliebigen Bildbearbeitungsprogramm eine 16×16 Pixel große Grafik erstellen, die Sie im BMP-Format speichern. Diese muss dann in das ICO-Format konvertiert werden, z.B. mit Hilfe von InfranView, einer populären Bildbetrachtungssoftware.
Noch einfacher geht es mit speziellen Tools zum Erstellen von Icons, wie der kostenlosen Trialversion von Microangelo.
Das Favicon muss “favicon.ico” benannt werden und auf das Hauptverzeichnis (Root) Ihrer Website, zum Beispiel “http://www.all4homepages.de/favicon.ico” hochgeladen werden.
Möchten Sie Ihr Favicon unter einem anderen Pfad oder Dateinamen ablegen, dann müssen Sie lediglich in jeder Webseite folgenden “Codeschnipsel” zwischen den <HEAD>-Tags mit dem entsprechenden Pfad einfügen:
<link rel=”shortcut icon” href=”http://www.all4homepages.de.de/bilder/logo.ico”>
Einschränkungen
Leider ist das Favicon noch verhältnismäßig “jung”, daher unterstützen nur aktuellere Versionen der gängigen Browser dieses Feature.
Jeder Browser behandelt diese Favicons anders, daher kann es vorkommen, das das Icon nicht immer angezeigt wird.
Link zum Thema:
Microangelo – Download der kostenlosen Trialversion
(CBS | 27.05.02)
Es tut mir leid, ich kann noch so oft den Code einfügen, löschen, einfügen, nochmal testen usw. – das funktioniert bei mir nicht.
Weder auf meinem Laptop (IE 6.0) noch hier auf meinem “großen” PC (IE 5.5).
Keine meiner Testseiten wird – auch und besonders nach Hinzufügen zu den Bookmarks – mit einem Favicon versehen / angezeigt.
Jonas
Die Favicon-Datei hast Du aber hochgeladen ja? ;-)
Leider funktioniert das nicht immer so toll mit dem Favicon. Ich habe es auch schonmal ausprobiert, da kam auch kein Icon in der Adresszeile. :-(
Eigentlich sollte aber auf jeden Fall das gewünschte Symbol in den Favoriten bzw. Bookmarks erscheinen. Probier mal, ob es bei “Verknüpfung an den Desktop senden” geht.
Zuerst habe ich es nur lokal getestet (file://C:/Files usw.).
Danach habe ich es auf meinen Lokalen Server geladen (http://localhost/).
Und bei beiden Pfaden funktionierte es nicht.
Jonas
Versuch es doch mal online. Ich weiß nicht genau, wie das technisch gelöst wurde, aber evtl. geht es nur im “richtigen” Internet. ;-)
Das kann sein.
Ich mach’s gleich und werde dann berichten, wobei ich jedoch glaube, dass das auch nicht klappt, da es kaum einen Unterschied zwischen menier Localhost und der Internet-Variante gibt.
Es ist beides mal eine Client-Server-Kommunikation.
Jonas
Das ist schon richtig, aber da diese Sache eh etwas eigenwillig ist bzw. nur funktioniert, wann sie will, würde ich es trotzdem versuchen. Dann kann man wenigstens das auch ausschließen… ;D
Ich benutze auch IE 6 und habe bemerkt, dass das Icon immer dann sofort erscheint, wenn ich die Seite vorher zu den Favoriten hinzugefügt habe oder eine Verknüpfung auf dem Desktop erzeugt habe.
Ja, das kann gut möglich sein. Wie ich schon angemerkt habe, erkenne ich noch kein System dahinter, wann man das Favicon nun sieht und wann nicht. :-(
Ich bin bisher schon auch davon ausgegangen, dass die Page erst zu den Favoriten hinzugefügt werden muss, bevor das Favicon angezeigt wird.
Allerdings geht es bei mir auch nach dem Hinzufügen nicht
Jonas
Bei mir hat alles nach Anleitung funktioniert. Nachdem ich die Seiten zu den Favoriten hinzugefügt hatte, erschienen die Icons. Seit ich meinen Rechner neugestartet habe sind Sie aber verschwunden und bis jetzt nicht mehr erschienen. Das einzigste Icon das immer auftaucht ist das bei Google.de. Meine eigenen sind alle nicht mehr erschienen. Kennt jemand das Problem ?
Hallo,
erst mal: bei mir wird bei Google kein Icon angezeigt, obwohls bei den Favoriten ist. Aber das Thema habe ich ja schon erklärt.
Eine Frage: ist die betreffende Site noch immer (auch nach dem Neustart) bei den Favoriten?
Jonas
Wie sieht es denn aus, wenn Sie die entsprechende Seite nocheinmal aufrufen, ist dann das Icon vielleicht wieder da?
Ja, nach dem Neustart ist die Site noch in den Favoriten. Auch dort wird das Icon nicht mehr angezeigt.
Jetzt ware ich vorher bei einem Bekannten. Habe zuerst Google aufgerufen (und es stand schon in den Favoriten) erschien aber kein Icon. Dann habe ich meine Seite aufgerufen, diese in den Favoriten abgelegt und nochmals neu aufgerufen. Icon war da.
An meinem rechner bekomme ich die Icons nicht mehr hin. Habe auch schon den Cache geleert.
Hmmm…
Leider kenn ich mich mit dem Favicon nicht so gut aus. Auch aus dem Grund, weil es eine recht eigenwillige Sache ist und scheinbar bei jedem anders “funktioniert”.. :-8
Wie ich schon des öfteren anmerkte, ist das mit dem Favicon so eine Sache. Mal geht’s mal nicht. Daher sollte man auch nicht allzu großen Wert darauf legen. Ich habe die Erfahrung gemacht, wenn ich Internet-Verknüpfungen auf dem Desktop spreichere, dass dort das Icons ggf. recht zuverlässig erscheint. :-|
Bei mir geht das irgendwie net… der ziegt dann
<link rel=”shortcut icon” href=”http://www.localhost.defilename.ico“>
an… was tun?
Bei welchen Browser (Version) tritt dies denn auf? :-)
Das tritt bei dem Internet Explorer 5.5 auf …
Hast du das in irgendeinen anderen Code integriert, PHP z. B.? Ansonsten fällt mir mometan nichts konkretes dazu ein.
Jonas
Gibt der Browser also den Quellcode aus? Nicht ganz richtig ist dabei, der Backslash, aber dies sollte nicht der Auslöser sein…;D
Nööö….. der zeigt auch so den Quellentext an… :-|
und ich habe das im HTML-Code gemacht….
Letzte Änderung von Eugen Kuksa am 09.12.02, 16:41.
Hmm, welchen Server hast du für den Localhost laufen?
Ich denke mal, das wird nämlich dann die einzige Sachen bleiben und sein, woran’s liegen kann.
Jonas
der server ist http://www.tripod.lycos.de und der kann das ja alles (glaub ich)
MfG:
Eugen
Letzte Änderung von Eugen Kuksa am 09.12.02, 16:55.
Also dann kann er mit den oben genannten Daten eh nicht viel anfangen. Du musst den Pfad (bei Lycos) zu dem Favicon angeben, dies sollte jedoch auch nicht der Grund dafür sein, dass er einfach diese Zeile Code ausgibt…:-(
Ich glaube, ich weiß, woran es liegt. Mit welchem Programm hast du es erstellt? Ich glaube nämlich, dass es etwas mit < und > zu tun hat -> in Dreamweaver z. B. muss man es in das richtige Fenster eingeben, damit es auch wirklich einen Tag kreiert und nicht zu & gt; usw. umgewandelt wird.
Jonas
Ich habe jetzt noch gelesen, dass das Favicon nur angezeigt wird, wenn man die Seite zuvor als Favorit bzw. Bookmark gespeichert hat. Ganz sicher bin ich mir diesbezüglich jedoch noch nicht. :-)
@ Jonas Hahn:
Ich habe die page mit dem standard Texteditor (Notepad), manchmal MS Frontpage und manchmal auch mit dem CuteFTPpro-HTML-Editor erstellt.
die Sache mit dem Favicon habe ich mit dem Texteditor gemacht…
@Christian Boris Schmidt:
dabei ist es aber auch komisch, dass der browser den quellcode anzeigt…
@all:
ich habe einfach den quellcode für das favicon vom artikel kopiert, im html-code eingegeben und da habe ich dann den pfad zum icon geändert/angepasst.
In welchem Teil des Quellcodes befindet sich den die Angabe zum Favicon jetzt? Unter Umständen muss diese nämlich vor dem BODY kommen. Vielleicht würde es uns auch weiterbringen, wenn wir alle mal in den gesamsten Quellcode der betreffenden Page reinschauen könnten. Aber bitte nicht komplett ins Forum kopieren! Ein Link genugt…;D
Der code vom favicon befindet sich lose im html-code.
im artikel stand nix vom body-tag…
ich habe den code aus der datei gelöscht, weil das auf meiner page nicht so gut aussah… ich habe noch eine zweite datei angelegt, in der das genau so aussieht:
http://mitglied.lycos.de/bmxtrix/index2.htm
komisch… jetzt zeigt er den quellcode nicht mehr an, aber nachdem ich die page zu meinen favoriten hizugefügt habe, kam kein logo…
Also derzeit ist die Seite nicht erreichbar, das kann jedoch an Lycos liegen. Ich habe den Artikel ergänzt, so dass nun ersichtlich ist, dass der Codeschnipsel in den HEAD-Teil muss.
Ich würde trotzdem nochmal die normale Variante (ohne zusätzlichen Code) versuchen, also einfach “favicon.ico” in das Hauptverzeichnis laden. :-)
diese variante ist bei mir ein bisschen schierig, weil ich ja meine website bei tripod.lycos.de baue… also ich habe nur eine subdomain…
http://mitglied.lycos.de/bmxtrix/
aber der zeigt das icon unter den favoriten nicht mal mit dem code an…
auch nicht, wenn ich den in den head-teil einfüge
Auf Sub-Domain oder nicht sollte es nicht ankommen… Mal sehen, was das Studium des Quellcodes bringt. Vielleicht gehts auch einfach bei Tripod nicht. ;D
Zu den Icons kann ich noch einiges anmerken:
Die Icons müssen nicht ico Format vorliegen, es ist auch das .png Format möglich, das vor allem den Vorteil bietet, das es einen Alphakanal besitzt, Halbdurchsichtigkeit ist dadurch z.B. möglich. Abgesehen davon hat das PNG Format Zukunftsfähigkeit, da es vieles vereint, was der Webdesigner braucht. (an die Operauser, die Bilder da oben in der Iconleiste sind alles PNGs)
Als weiteres kann das Bild da hochladen, wo man will, selbst ein anderer Server wäre möglich. Bsp.: <link rel=”icon” href=”http://ihre.homepage.de/ver/zeichnis/icon.png” /> .
Siehe auch den Code der Homepage des CCC (http://www.ccc.de) oder die aktuelle HTML Spec. des W3C ;D .
Das mit PNG ist interessant. Was mich noch verwirrt: Muss es nun rel=”shortcut icon” oder rel=”icon” heißen bzw. wo liegt der Unterschied, falls es einen gibt? ;D
Um gleich beim Thema zu bleiben, bei der Homepage vom CCC sieht der Code wie folgt aus:
<link rel=”icon” href=”/images/logos/chaosknoten-icon-trans-16.png” type=”image/png”>
Es wird also am Ende noch der Dateityp definiert. Allerdings wurde bei mir (mit IE 6) das Favicon weder in der Browserzeile, noch auf dem Desktop oder in den Favoriten angezeigt… :-(
Letzte Änderung von Christian Boris Schmidt am 18.12.02, 10:07.
Dann probiere mal Opera 7 und Mozilla aus, die gelten wohl aus die “HTML Standard Erfüller”. Vielleicht ist auch ein Unterschied zwischen den beiden Varianten “shortcut icon” und “icon”, wobei ich es merkwürdig finde, dass ein Parameter mit Freizeichen am Start ist. Oder es handelt sich dabei mal wieder um eine typische “IE muss es anders machen”-Geschichte. Das würde bedeuten, dass der ohnehin schon genug genervte Webmaster beides angeben muss.
Den Bildertyp zu definieren ist freiwillig. Du kannst auch bei deinem .ICOs type=”image/ico” oder bei den .GIFs type=”image/gif” schreiben.
Wie, da komme ich jetzt nicht mehr ganz mit… wo ist “ein Parameter mit Freizeichen am Start”??? ;D
“shortcut icon” <= Parameter mit Frei- bzw. Leerzeichen…! ;D
Ach, hab ich mich mal wieder verlesen… sorry! ;D
Oh …
Ihr müsst zwischen <Head> und </Head>
folgendes eingeben:
<LINK rel=”SHORTCUT ICON” href=”URL zum Favicon”>
Ersetzt URL zum Favicon durch die URL des icons und es funzt;D
@ Sebastian Lenz,
Das ist genau das Ding, worum’s hier ging, es sind zwei verschiedene Icons möglich, siehe z.B. http://www.ccc.de, aber aktuellen Mozilla oder Opera 7 benutzen.
Ich verstehe den Unterschied noch nicht. Was ist denn nach W3C richtig – oder gehe ich recht in der Annahme, dass das so eine Microsoft-Erfindung ist?!? :-8
Ich werde jetzt nicht die Specification durchsuchen, aber anhand der Post würde ich sagen, dass das “shortcut icon” nur für IE ist und beim Bookmarken ein Symbol erzeugt, während “icon” ein Teil der aktuellsten W3C Spec. sind, da Mozilla und Opera 7 (wohl die beiden, die sich am meisten an die Standards halten) die Funktion bieten, das Icon wird bei Mozilla vor die URL gesetzt, bei Opera kommt es in die Registerkarte für die einzelnen Fenster.
Hallöchen,
Da der Name Favicon setzt sich ja zusammen aus »Favoriten« und »Icon«, was soviel wie Symbol oder Bild bedeutet. Auch die Symbole auf dem Desktop bezeichnet man als Icons, und auch sie sind Dateien des Formats .ico. Da es auch eine Erfindung von Microsoft ist. :-(
Noch etwas habe ich dazu, man muss nicht unbedingt den <LINK REL=…. benutzen, da das fertige Favicon mit dem Dateinamen »favicon.ico« lädt man nur in das Stammverzeichnis der Website. Wenn sich ein Besucher in einem Unterverzeichnis befindet (z.B. http://www.dername.de/verzeichnis/) suchen die Browser standardmäßig zuerst in dem Unterverzeichnis nach dem Bildchen und wandern dann in das nächst höhere.
Doch da Browser sich nicht immer völlig vorhersehbar verhalten und sich mit neuen Versionen immer wieder leicht verändern, ist es sicherer, das Favicon in jedes Unterverzeichnis hochzuladen denn viel Speicherplatz braucht es ja nicht.
So kann man außerdem bei Bedarf mehrere verschiedene Icons verwenden.
Aber es empfiehlt, sich halt eine HTML-Angabe zu machen, da sich einerseits wenn man mehrere .ico-Dateien verwendet, und andererseits auch die Anzeige bei nicht ganz aktuellen Browsern sicher zu stellen, wo wir dann wieder bei A sind.
Diese wird im Dateikopf (<head>) notiert und sieht so aus:
<LINK REL=”SHORTCUT ICON” HREF=”favicon.ico”>
Dabei gelten die für seiten-internes Referenzieren üblichen Regeln, wie etwa auch bei Grafiken. Wenn ihr also z.B. in Eurem Stammverzeichnis ein Unterverzeichnis »dateien« und darin ein weiteres Verzeichnis »grafiken« habt, in dem ihr das Favicon ablegen wollt, dann muss der Verweis im Quelltext der Startseite so aussehen:
<LINK REL=”SHORTCUT ICON” HREF=”dateien/grafiken/favicon.ico”>
Wahlweise können ihr auch die absolute Adresse angeben:
<LINK REL=”SHORTCUT ICON” HREF=”http://www.dername.de/dateien/grafiken/favicon.ico“>
Erstellen und Einbauen eines Favicons:
Ein Favicon für die eigene Website zu erstellen und einzubauen ist kein allzu großer Aufwand. Mit Grafikprogrammen wie IrfanView (kostenlos für Privatanwender http://www.irfanview.com/), Microangelo und Icon Forge lassen sich gewöhnliche Grafik-Dateien in das .ico-Format konvertieren. Noch schneller geht es mit dem ebenfalls kostenlosen Online-Editor von Favicon.co.uk (http://www.favicon.co.uk/). Hier arbeitet man mit den 16 Farben, die das Format erlaubt, an einer stark vergrößerten Fassung des entstehenden Icons, während man rechts daneben ständig eine Vorschau in Originalgröße sieht. Ist das Icon fertig, lässt man es sich einfach per Email zuschicken.
Aber ich glaube, da die Browserlogos (Icon) doch etwas empfindlich sind (im eigene Sinne nicht) aber in der Auflösung ja, das heisst 16×16 aber dann kommst x 4 laufen (oder besser gesagt) angezeigt werden als in der Auflösung 16×16x8 oder 16×16x16. (probiere es doch mal aus ;D)
mike
Letzte Änderung von Mike Schmitz am 16.02.03, 19:11.
Bei mir geht das auch nicht. Ich habs echt tausendm,al versucht. Das ist echt komisch =( Naja, wieso braucht man das eigentlich auch??? Ich kann auch gut ohnne Leben !!! *grins*
Eigentlich ist dem letzten Beitrag von Mike Schmitz nichts mehr hinzuzufügen. Letztendlich sind alle Probleme, das Favicon betreffend, Browser-Probleme.
Ich wollte an dieser Stelle eigentlich nur darauf hinweisen, daß der “Konqueror” unter Linux/KDE das Favicon bei Aufruf einer Seite in der Address-Leiste darstellt, OHNE das diese Seite zu den Favoriten hinzugefügt wurde.
Auch der Crazybrowser unter Windows ( http://www.crazybrowser.com ) macht weniger Probleme im Umgang mit Favicons.
Letztendlich sind diese Favicons aber nur ein Gimmick, das Niemand wirklich braucht, oder?
;-)
Brauchen vielleicht nicht, aber nur der Vollständigkeit halber
und ein kleines Dankeschön an dieses Thema:
Ich habs bei uns eingebaut
<link rel=”shortcut icon” href=”favicon.ico”>
und es hat nach dem einfügen der Seite in die Favoriten
sofort funktioniert.
Vielen Dank hier noch mal.
lg
Stefan