Individuelles Icon im Browser-Tab: So erstellen Sie ein Favicon für Ihre Webseite

Datum der VeröffentlichungAutor des Artikels4 CommentsKommentare zu diesem Artikel
favicon_blog

Mit einem Favicon ergänzen Sie Ihre Website um ein individuelles Symbol, das Ihrer Seite für Leser oder Kunden einen grafischen Wiedererkennungswert schenkt. Das Wort „Favicon“ setzt sich aus den englischen Worten „Favorite“ und „Icon“ zusammen und bedeutet in etwa „Lieblingsbild“. Das Favicon erscheint einem Internetnutzer zum einen links neben der Adresszeile der URL , zum anderen auch neben dem Titel der Seite bei mehreren geöffneten Tabs. Ausserdem markiert das Favicon eine als Favorit gespeicherte Seite in der Liste der Lesezeichen und wird als Desktop-Logo für eine verknüpfte Website verwendet.

tab

Ein Favicon wird unter anderem in jedem offenen Tab neben dem Namen der Webseite, und links neben der URL angezeigt.

Beachten Sie die quadratische Grösse und das Speicherformat beim Favicon

Damit auch Ihre Website ein unverkennbares Favicon erhält, erstellen Sie eine Icon-Datei mit der Abmessung 16×16 Pixel. Für eine etwas bessere Qualität können Sie auch die Masse 32×32 Pixel verwenden. Wichtig ist in jedem Fall, dass es sich um eine echte Icon-Datei handelt, die auch die Dateiendung „.ico“ hat. Zwar erkennen neuere Browser zunehmend auch schon andere Formate wie .png und .jpg, doch um das Bild auch für ältere Browser standardkonform darzustellen, sollten Sie auf jeden Fall das Format .ico verwenden.

Tipp für das eigene Favicon: Das Symbol ist mit grade einmal 16×16 Pixeln sehr klein. Je mehr Formen, Farben und Linien es enthält, desto schwieriger ist es zu erkennen. Für ein Favicon gilt deshalb: Wählen Sie ein klar erkennbares Symbol oder eine Grafik, die möglichst keine feinen Linien und nicht zu viele Farben beinhaltet. Hat das Logo bereits eine rechteckige Form, umso besser. Passen Sie das Logo sonst an die quadratische Vorgabe an oder speichern Sie andere Formen mit transparentem Hintergrund ab.

Doch wie erstellen Sie nun eine solche .ico-Datei? Dazu verwenden Sie entweder das kostenlose Grafikprogramm „GIMP“. Damit können Sie z.B. Ihr bestehendes Firmenlogo öffnen, ein etwaiges Symbol ausschneiden und auf die passende Grösse bringen.

Alternativ zu einem Grafikprogramm existieren im Web zwei praktische Werkzeuge, wie z.B. www.converticon.com oder www.icoconverter.com. Sie wandeln ein bestehendes Bild im .png-, .gif- oder .jpg-Format in das .ico-Format für Sie um. Die so erzeugte Grafik kann dann einfach aus dem Programm heruntergeladen und in die eigene Webseite eingefügt werden.

So binden Sie das Favicon in Ihre Internetseite ein

Nachdem Sie die Icon-Datei erzeugt haben, binden Sie diese nun in Ihre eigene Website ein. Dazu speichern Sie das Bild auf Ihrem Webserver unter dem Dateinamen „favicon.ico“. Ausserdem hinterlegen Sie in Ihrem Website-Code einen Verweis auf die Datei. Zwischen und müssen Sie dafür die folgende Zeile einfügen:. Durch die Bezeichnung “shortcut icon” wird das Bild vom Browser als Favicon identifiziert. In der href-Angabe müssen der Dateipfad und der Name Ihres Logos angegeben werden. So einfach fügen Sie Ihrer Website das eigene kleine Mini-Logo hinzu.

5 (2)

In diesem Quellcode können Sie den HTML-Link für das Favicon sehen.


 

Veröffentlicht in: Hosting News

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Kommentare (4)

  1. Ist es mittlerweile egal, wenn das Format JPG ist?

  2. Danke für den anschaulichen Tipp! Hat gleich geklappt. Die Seite iconconverter.com scheint es aber nicht mehr zu geben (= Fehlermeldung). Mit converticon.com ging es aber problemlos, man muss nicht einmal die Grafik vorher verkleinern oder konvertieren.

  3. Hallo zusammen,

    mit welchen Programmen erstellt Ihr jeweils ein Favicon. Ich hab mal mit so einem Gratisprogramm mal was versucht zu erstellen jedoch siehts wirklich unprofessionell aus. Gewisse Webseiten haben wirklich schöne Favis. Sieht mal meine an: http://www.magazin-abo.ch
    Ihr dürft mir auch was schöneres machen 🙂

    gruss Diana

    • Hallo,

      wir stellen unsere Favicons mit Photoshop. Mit dem kostenlosen Bildbearbeitungsprogramm GIMP geht das aber auch. Die Datei lässt sich direkt als .ico-Datei exportieren.

      Mit besten Grüßen

      Wolf-Dieter Fiege