Favicon-Generator

Minimaler Aufwand, maximaler Wiedererkennungswert: Mit dem Favicon-Generator können Sie ganz einfach und kostenlos ein Favicon erstellen und auf Ihrer Website einbinden. Sie wollen stattdessen ein Logo aus Buchstaben? Dank dem Buchstaben-Generator ebenfalls kein Problem!

Da dieser Browser veraltet ist, funktioniert der Favicon-Generator nicht
Der Favicon-Generator funktioniert nicht auf Internet Explorer, da dieser Browser zu alt ist. Sie können ihn jedoch ohne Weiteres auf Browsern wie Edge, Chrome oder Firefox benutzen. Wenn Sie keinen dieser Browser auf ihrem Computer installiert haben, können Sie diese hier herunterladen:

Edge herunterladen | Chrome herunterladen | Firefox herunterladen
Bild-Upload
Buchstabengenerator

Vorschau

Icon

Icon im Browser

Seitenname

iPhone

Seitenname

Android

Seitenname

Windows

Die maximale Grösse ist 2MB. Unterstützte Dateien sind JPG, JPEG und PNG. Um das optimale Resultat zu erhalten, sollte das Bild quadratisch sein und eine Mindestgrösse von 310x310px haben.

iPhone

Android

Vorschau

Icon

Icon im Browser

Seitenname

iPhone

Seitenname

Android

Seitenname

Windows

Wie funktioniert unser Favicon-Generator?

Unser Favicon-Generator ist denkbar einfach zu bedienen: einmal die Bilddatei hochladen, bearbeiten, Vorschau ansehen, herunterladen – und schon ist Ihr ICO-Icon einsatzbereit! So müssen Sie sich nicht lange mit einer Bildbearbeitungssoftware beschäftigen, sondern können alles direkt online erledigen.

  1. Laden Sie Ihr Bild für das Favicon hoch, sofern Sie bereits eines haben. Alternativ können Sie im Buchstaben-Generator ein Logo nach Ihren Vorlieben gestalten. Bitte beachten Sie: Das Bild sollte zum Upload quadratisch und mindestens 310 x 310 Pixel groß sein.
  2. Der Favicon-Generator wandelt das Bild in ICO- und PNG-Dateien um. Ihr Icon hat dann ein Format, das alle Browser unterstützen. Mit der Vorschau-Funktion sehen Sie, wie das Ergebnis im Browser und in der App-Version aussehen wird.
  3. Fehlt nur noch der Download! Sie können das Favicon als ZIP-Datei herunterladen und dann jederzeit auf Ihrer Website einbinden.

Wenn Sie das Favicon auf Ihrer Website eingebunden haben, erscheint die kleine Grafik nun neben der URL in der Browser-Adressleiste und seit neuestem auch direkt in den Google-Suchergebnissen.

In 3 Schritten zum eigenen Favicon, ganz ohne Grafik­software: Mit dem Generator erstellen Sie in wenigen Minuten ein Wieder­erkennungs­merkmal für Ihre Marke.

Was ist eigentlich eine ICO-Datei?

ICO ist eine Windows-Icon-Datei und gewissermaßen ein »Gesamtpaket«: Die Datei besteht aus mehreren Ebenen und enthält auf diesen Ebenen PNG-Bilddateien in verschiedenen Größen. Je nachdem, wo das Favicon angezeigt wird, verwendet der Browser eine andere Bilddatei aus der ICO-Datei. Gängige ICO-Größen sind 16 x 16 Pixel, 32 x 32 Pixel und 48 x 48 Pixel. Theoretisch können auch andere Dateiformate (PNG, GIF) als Favicons verwendet werden – allerdings nur bei aktuelleren Browserversionen. Die sichere Lösung für Internet Explorer & Co. ist nach wie vor ICO.

Das perfekte Favicon

Wie soll eigentlich so ein Favicon aussehen? In erster Linie nicht zu überladen! Denn je nachdem, auf welchem Endgerät und in welchem Browser das Favicon aufscheint, wird ein sehr detailreiches Icon möglicherweise nicht korrekt anzeigt. Google verwendet zum Beispiel ein simples „G“ in den charakteristischen Google-Farben. Mit Buchstaben, einem Logo oder einem Emoji sind Sie auf der sicheren Seite!

Kann ich das Favicon auch für Apps nutzen?

Ja, das ist möglich. App Icons sind die kleinen Symbole, die man antippt, wen man auf dem Smartphone eine App öffnen möchte (sog. Touch Icons). Diese können Sie mit unserem Generator ebenfalls erstellen. Das bedeutet, dass das ZIP-File u. a. alle Icon-Formate enthält, die für die korrekte Anzeige auf Mobilgeräten benötigt werden. Dazu zählen 57 x 57, 72 x 72 oder 144 x 144.

Browser suchen automatisch nach Favicons und zeigen eine Fehlermeldung an, wenn sie kein Icon finden. Warum also darauf verzichten, wenn das Erstellen so leicht geht – legen Sie gleich los!

Warum Sie nicht auf Favicons verzichten sollten

Ein guter Grund für Favicons ist die Tatsache, dass sie einen hohen Wiedererkennungswert haben. Bilder sprechen nun mal stärker an als reiner Text – höchste Zeit also für das Icon-Feature auf der eigenen Website! Darüber hinaus kann es sich sogar negativ auf das Google-Ranking auswirken, wenn das Favicon fehlt. Denn der Browser sucht automatisch nach dieser Grafik und schickt die Fehlermeldung Error 404, wenn kein Icon gefunden wird. Das verlängert die Ladezeit der Seite.

Das Favicon ist fertig und – jetzt?

Sie können das fertige Favicon mit einem simplen Befehl in das Hauptverzeichnis Ihrer Domain einbinden. Dazu brauchen Sie nur ein FTP-Programm wie etwa FileZilla und folgende HTML-Befehlen. Diese Befehle müssen in der HTML-Datei im <head>-Teil eingefügt werden.

<html>
    <head>
        <!-- Für Apple-Geräte -->
        <link rel="apple-touch-icon" sizes="180x180" href="[PFAD ZUM ICON]/apple-touch-icon-180x180.png">
        <!-- Für Browser -->
        <link rel="shortcut icon" type="image/x-icon" href="[PFAD ZUM ICON]/favicon-32x32.ico">
        <link rel="icon" type="image/png" sizes="96x96" href="[PFAD ZUM ICON]/favicon-96x96.png">
        <!-- Für Windows Metro -->
        <meta name="msapplication-square310x310logo" content="[PFAD ZUM ICON]/mstile-310x310.png">
        <meta name="msapplication-TileColor" content="[HEXFARBE (z.B. #000000)]">
    </head>
    <body>
        <h1>Favicons!</h1>
    </body>
</html>

Tragen Sie diese Zeilen im Head-Bereich des Root-Verzeichnisses ein. Alternativ bieten viele CMS die Möglichkeit, das Favicon über die Mediathek im Backend einzubinden (s. u.). Unser Tipp: Löschen Sie nach dem Einbinden den Browser-Cache.

hs-icon-browser

Für Websites, Blogs und Online-Shops

Webmaster lieben Favicons, weil sie eine lohnende Ergänzung für jedes Webprojekt sind. Von kleinen Blogs bei Blogger, Tumblr oder WordPress bis hin zu Online-Shops und großen Unternehmenswebsites – Favicons wecken Aufmerksamkeit und verleihen der Marke einen hohen Wiedererkennungswert

hs-icon-device-mobile

Auf allen Browsern und Geräten

Ihr Favicon wird in allen Browsern sowie auf den Desktops und Homescreens aller Geräte, auch auf Tablets und Smartphones, korrekt angezeigt. Die erstellten Dateien und Formate sind mit den individuellen Spezifikationen aller Browser kompatibel.

hs-icon-gallery

Standardisierte Bildformate

Der Favicon-Generator stellt Dateien in verschiedenen Größen völlig kostenlos zur Verfügung. Sie können das entsprechende Icon online erstellen und es beliebig verwenden. So wird sichergestellt, dass Ihre Icons auf jeder Plattform gleich aussehen – egal, welches Gerät die Seitenbesucher/innen verwenden.

hs-icon-flexible

Unterschiedliche Dateiformate und -Größen

Sie erhalten außerdem die entsprechenden App-Icons für Android, iOS und Windows in zahlreichen anderen Formaten. So können Sie selbst entscheiden, wie und in welchem Format Sie die erzeugten Dateien verwenden möchten.

Was sind Favicons?

Was sind Favicons?

Ein Favicon ist ein kleines Icon, Symbol oder Logo mit 16 x 16 oder 32 x 32 Pixel, das von Webbrowsern verwendet wird, um den Wiedererkennungswert einer Website zu steigern. Es erscheint unter anderem in der Lesezeichenliste (Favoriten), bei den Registerkarten (Tabs) und unter Windows, wenn eine Seite in der Taskleiste gespeichert oder als Kachel angelegt wird. Die Icons gehen auf den Computerkonzern Microsoft zurück, dessen Internet Explorer 5 im Jahr 1999 erstmals Favicons darstellte.

Wie erstelle ich ein Favicon?

Der einfachste Weg, ein Favicon zu erstellen, ist mit einem Online-Generator. Hier müssen Sie nur Ihr gewünschtes Bild hochladen, bearbeiten und anschließend im ICO und PNG-Format wieder herunterladen. Alternativ können Sie mit dem Generator ein Buchstaben-Icon erstellen.

Wie integriere ich mein Favicon in meine Webseite?

Sie können mit einem HTML-Befehl in der Kopfzeile im Hauptverzeichnis jederzeit ein Favicon einbinden:

<html>
    <head>
        <!-- Für Apple-Geräte -->
        <link rel="apple-touch-icon" sizes="180x180" href="[PFAD ZUM ICON]/apple-touch-icon-180x180.png">
        <!-- Für Browser -->
        <link rel="shortcut icon" type="image/x-icon" href="[PFAD ZUM ICON]/favicon-32x32.ico">
        <link rel="icon" type="image/png" sizes="96x96" href="[PFAD ZUM ICON]/favicon-96x96.png">
        <!-- Für Windows Metro -->
        <meta name="msapplication-square310x310logo" content="[PFAD ZUM ICON]/mstile-310x310.png">
        <meta name="msapplication-TileColor" content="[HEXFARBE (z.B. #000000)]">
    </head>
    <body>
        <h1>Favicons!</h1>
    </body>
</html>

Wie funktioniert die Integration in ein CMS (z. B. in WordPress)?

Viele gängige CMS bieten im Backend die Möglichkeit, das Favicon zu ändern. Bei WordPress (ab Version 4.3) zum Beispiel können Sie das Favicon in die Mediathek hochladen und es unter dem Menüpunkt »Website-Informationen« als neues Website-Icon auswählen. Die empfohlene Größe ist 512 x 512 Pixel.

Im Joomla-Backend können Sie unter »Extensions/Templates« nach Ihrem Template suchen und müssen anschließend nur noch über das Template-Verzeichnis das neue Favicon hochladen. Sollten bei Ihrem CMS diese Möglichkeiten nicht funktionieren, binden Sie das Icon am besten wie oben beschrieben über das Hauptverzeichnis ein.

Kann ich das Favicon nur mit einem Online-Generator erstellen?

Nein, es ist genauso möglich, Favicons mit einer Grafiksoftware wie GIMP oder Photoshop zu erstellen. Wer sich mit diesen Programmen auskennt, kann selbstverständlich auch so vorgehen. Für absolute Einsteiger ist jedoch das Online-Tool leichter zu bedienen.