Ruprecht-Karls-Universitaet Heidelberg

Computer
Erstellen und Einbinden von Favicons

Inhalt

  1. Vorbemerkung
  2. Erstellen eines Favicons
  3. Einbinden eines Favicons
 
  1. Vorbemerkung
  • Favicons (ausgesprochen: fav-eye-con) sind kleine Grafikdateien mit einem Format von 16 x 16 Pixel und der Dateiendung .ico. Sie können dazu verwendet werden, den Bookmark einer Internetseite mit einem individuellen Logo zu versehen.
  • Favicons erscheinen:
    - im Favoritenverzeichnis des Webbrowsers
    - im Windows Startmenü
    - in der Adresszeile des Browsers
    - als Verknüpfung auf dem Desktop
    - in der Task- und Linkleiste
    - in der Titelseite des Browsers (nur bei einigen Browsern, nicht beim Internet Explorer)
 
  1. Erstellen eines Favicons
  • Prinzipiell benötigt man ein normales Grafikprogramm und ein Programm zur Konvertierung der Grafik in das Icon-format ".ico". Dieses Vorgehen ist auch angezeigt, wenn man von einer bestehenden Grafik (z.B. ein Logo) ein Favicon erstellen will.
  • Zur Erstellung von einfachen Grafiken geht es schneller mit der Webseite https://www.favicon.co.uk/, wo man sich ein Favicon erstellen und per Mail zuschicken kann:
    - auf die genannte Webseite gehen
    - auf die gewünschte Farbe klicken
    - per Mausklick die gewünschte Form im grau gerasterten Kästchen anklicken
    - unter dem Bild im Fenster Email-Icon die E-Mail-Adresse angeben und anschließend den Email-Icon anklicken
    - das Icon wird einem zugeschickt und kann auf dem Rechner lokal gespeichert werden
    Anmerkung
    Will man eine neue Grafik erstellen, klickt man auf den Start again-Button. Automatisch wird der Untergrund mit der Farbe abgebildet, mit der man das letzte Icon erstellt hat. Um das graue Raster wieder zu bekommen, geht man auf Neu laden.
  • Wichtig
    Es genügt nicht, einfach eine .bmp-Datei mit der Endung .ico zu versehen. Die Datei muß entweder konvertiert oder auf der entsprechenden Webseite erstellt werden!
 
  1. Einbinden eines Favicons
  • Sobald eine Internetseite aufgerufen wird, wird die Datei nach einem verfügbaren Favicon angesucht und zwar in der Reihenfolge:
    - Head-Bereich der aufgerufenen Datei
    - Verzeichnis, in dem sich die aufgerufene Datei befindet
    - Hauptverzeichnis der Internetadresse, unterhalb der diese Datei gespeichert ist (= root-Verzeichnis)
  • Wird das Favicon mit dem Namen favicon.ico in das Hauptverzeichnis (= root) gestellt, wird es auf allen Seiten dieser Website angezeigt
  • Alternativ kann im html-Code ein sogenannter Metatag in den Headbereich (zwischen <head> und </head>) gestellt werden. Dieser muß folgendermaßen aussehen:
    <link rel="shortcut icon" href="/pfad/dateiname.ico">
    Bei der Pfadangabe kann es sich dabei um einen relativen bzw. einen absoluten Link handeln, d.h. man kann hier auch auf ein Favicon verweisen, das auf einer anderen WWW-Adresse liegt!
  • Beispiel für das "Psi"-Zeichen auf den Seiten des Psychologischen Instituts:
    <link rel="shortcut icon" href="favicon.ico">
    Die Datei favicon.ico steht hier im root-Verzeichnis des Psychologie-Baums.
 

Fragen / Probleme
Wenden Sie sich bitte an Marion Lammarsch.

 

Zur Übersicht 

Seitenbearbeiter: E-Mail
Letzte Änderung: 17.6.2010