Favicon erstellen und einbinden

Dezember 09, 2009 1 Kommentar , , , ,

Ein Favicon gehört heute zu jeder Webseite dazu. Es wird nicht nur in der Adresszeile oder Tab des Browsers angezeigt, sondern auch als Bildchen für Favoriten, Lesezeichen oder Bookmarks verwendet. Außerdem erhöht es den Wiedererkennungswert der Webseite.

> QUICKIE:   page.shortcutIcon = fileadmin/favicon.ico

Zur Erstellung eines Favicons stehen mehrere Online-Tools / Generatoren zur Verfügung. Grundsätzlich werden die Icons in dem Format 16×16 Pixel angezeigt. Allerdings kann man es dem Browser überlassen, das Icon zu skalieren (verkleinern). Somit sind auch Formate in 32×32 | 64×64 | 128×128 möglich. Das Icon kann als *.ico Datei oder in den gängigen Webbilderformaten vorliegen (also z.B. auch als *.gif oder *.png mit transparenten Verläufen). Nun einige Hilfen zur Erstellung:

  • Web Script Lab – Generator, Icon erstellen durch hochladen eines Bildes
  • Dragon Design – Generator, ebenfalls durch upload eines Bildes
  • Favicon Creator – Editor, zum selbst erstellen von Icons
  • GeoVid - Generator, um Videos in Icons zu konvertieren
  • oder per Grafikprogramm selbst erstellen, z.B. mit dem Photoshop-AddOn: Icon-Plugin

Favicons aus Icon-Galerien herunterladen, hier einige zu empfehlende Portale:

Einbinden des Favicons in die Webseite:

  • per handgemachtem HTML (zwei Varianten, da eine speziell für den IE), zuvor bitte die Datei auf den Webserver speichern.
    • <head>
    ...
    <link rel="shortcut icon" href="http://www.seo-typo3.org/favicon.ico" />
    <link rel="icon" href="http://www.seo-typo3.org/favicon.ico" />
    ...
</head>
  • oder per TypoScript ins Root-Template (TYPO3 erzeugt selbstständig die zwei HTML Anweisungen)
    • page.shortcutIcon = fileadmin/favicon.ico

Validieren eingebauter Favicons: tatsächlich gibt es auch hierfür einen Validator, der die Quellcode-Platzierung sowie weitere Eigenschaften überprüft. Zum Favicon Validator

Und wer’s noch geneuer wissen will, schaut hier beim WebDesignBlog.

..gutes Gelingen..

rss feed.or trackback

One Response to “Favicon erstellen und einbinden”

  1. René said:

    Feb 28, 11 at 13:49

    Einbindung der Favicons per TYPOSCRIPT (page.shortcutIcon = …) leider nur möglich, wenn das Icon im “fileadmin” Verzeicnis liegt und auch darauf verwiesen wird..

Hinterlasse einen Kommentar