Ein Favicon ist ein Symbol, das in der Adresszeile Ihres Internet-Browsers angezeigt wird, um eine Website auf wiedererkennbare Weise zu kennzeichnen. Auch am Rand von geöffneten Browser-Tabs und in der Lesezeichenliste werden Favicons neben dem Namen der Website angezeigt. Dieser Artikel erklärt Ihnen die Grundlagen und wie Sie mit dem IONOS  Favicon-Generator ein eigenes Favicon erstellen.

Warum sollte ich ein Favicon verwenden?

Mit einem Favicon machen Sie Ihre Website unverwechselbar und steigern den Wiedererkennungswert. Selbst in umfangreichen Lesezeichenlisten werden Ihre Kunden oder Leser Ihre Website anhand eines einprägsamen Favicons sofort wiedererkennen. 

Um einen bestmöglichen Wiedererkennungswert zu erreichen, sollte sich das Favicon an Ihrem Logo und den Farben Ihrer Website bzw. Ihrer Corporate Identity orientieren. Favicons werden in allen Browsern unabhängig vom verwendeten Betriebssystem angezeigt

IONOS Favicon-Generator

Mit dem IONOS Favicon-Generator gelangen Sie auf drei Wegen zu Ihrem persönlichen und individuellen Favicon: 

  • Grafischer Editor: Gestalten Sie in einem Pixelraster mit verschiedenen Werkzeugen und Farben.
  • Buchstabengenerator: Tippen Sie bis zu zwei Buchstaben ein und bearbeiten Sie diese grafisch nach.
  • Bild-Upload: Laden Sie z.B. Ihr Unternehmenslogo oder eine andere Bilddatei hoch, um diese automatisch auf Favicon-Größe zu skalieren. 

Verwenden Favicon

Sie haben bereits ein Favicon im Dateiformat “.ico” vorliegen. Das Favicon hat die Pixel-Abmessungen 16x16, 32x32 oder 48x48. 

Variante 1: Ablage im Basisverzeichnis Ihrer Domain
  • Ändern Sie den Dateinamen Ihres Favicons auf die verbindliche Vorgabe "favicon.ico".
  • Laden Sie diese Datei per FTP/sFTP ins Baisverzeichnis Ihres Webspace hoch.

Wie Sie Dateien in Ihren Webspace hochladen, erklärt Ihnen der Hilfe-Center Artikel “Schritt für Schritt Dateien/Websites sicher mit FTP/SFTP übertragen”.

Variante 2: Referenzierung über HTML-Code

Fügen Sie diesen HTML-Code im <head>-Bereich Ihrer Website hinzu:

<link rel="icon" href="/favicon.ico" type="image/vnd.microsoft.icon">

Die meisten Website Builder, wie z.B. MyWebsite Now und Content-Management-Systeme, wie z.B. WordPress, haben eine eigene Funktion, um Favicons zu verwenden.