Das Favicon ist ein kleines Symbol, das unter anderem in der Statusleiste des Browsers, bei Bookmarks, ja sogar innerhalb der Google Webmastertools angezeigt wird.

Warum braucht man das Favicion?

Viele Systeme suchen dabei automatisch nach einer Datei Namens favicon.ico auf der Rootebene, z.B. www.example.com/favicon.ico. Ist diese Datei nicht vorhanden, so stellen alle Möglichen Browser, Bots etc ständig Anfragen an den Server, um diese Datei zu bekommen und kriegen 404 zurückgeliefert. Es empfiehlt sich daher immer irgendeine Favicon Datei anzulegen, selbst wenn diese nur einfarbig o.ä. ist.

Favicon als .ico erzeugen (online / offline)

Ein Favicon ist eine .ico Datei. Diese kann man zum Beispiel mit dem Open Source Bildbearbeitungsprogramm GIMP erzeugen. Mein Favorit ist jedoch der http://www.favicon-generator.de/  (auch zu sehen rechts im Bild). Leider kann der Favicon Generator derzeit noch nicht mit Transparenz umgehen.

Das Favicon auf der TYPO3 Webseite einbinden

Einige Browser suchen das Favicon immer unter www.example.com/favicon.ico daher  sollte man das Favicon an keinem anderen Ort ablegen.

Andere Browser folgen jedoch der Angabe im Header des HTML Dokuments. Dort kann der Ablageort des Favicons so kenntlich gemacht werden:

<link rel="shortcut icon" href="http://example.com/favicon.ico" type="image/x-icon" /> 

* Das Favicon sollte immer komplett mit Domainname angegeben werden, da es sonst vom Internetexplorer falsch interpretiert wird.

Diesen Link kann man entweder direkt in den Header Bereich zwischen <header> und <header> schreiben oder per TypoScript hinzufügen:

page.headerData.600 = TEXT
page.headerData.600.value (
    <link rel="shortcut icon" href="http://example.com/ favicon.ico" type="image/x-icon" />
) 

Außerdem kann das Favicon auch so eingebunden werden:

page.shortcutIcon = fileadmin/favicon.ico

Es fehlt jedoch die empfohlene Angabe type="image/x-icon" und das Favicon darf nicht auf der Rootebene liegen sondern muss im Fileadmin liegen. Deswegen würde ich page.headerData empfehlen.

Bug dazu: 0015226: page.shortcutIcon does not create favicon on root Level 

Das Favicon und Templa Voila

Verwendet man templa Voila und hat man das Favicon in den Header Bereich des Templates geschrieben, so muss man in der Editieransicht des Templates bei "Header Parts" den Favicon Link hinzufügen, ähnlich wie man dies auch bei CSS und JavaScript Dateien macht.

Das Favicon und TYPO3 4.4 mit Introduction Package

Im Introduction Package von TYPO3 4.4 ist bereits ein TYPO3 Favicon mitgeliefert, das leider nur nicht an der empfohlenen Stelle liegt. Um dieses zu ändern legt man ein Favicon auf die unterste Ebene in den TYPO3 Pfad (also neben fileadmin, da wo auch die index.php liegt) und ändert dann im Sysordner "page_configuration" im Template "page" die Angabe

  shortcutIcon = {$filepaths.images}favicon.ico 

durch

  headerData.600 = TEXT
  headerData.600.value (
      <link rel="shortcut icon" href="http://example.com/favicon.ico" type="image/x-icon" />
  )  

ersetzen.