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!
Edge herunterladen | Chrome herunterladen | Firefox herunterladen
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.
- 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.
- 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.
- 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 Grafiksoftware: Mit dem Generator erstellen Sie in wenigen Minuten ein Wiedererkennungsmerkmal 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 ZIP-File enthält alle Icon-Formate, die für die korrekte Anzeige auf Mobilgeräten benötigt werden. Dazu zählen Größen, wie 57 x 57px, 72 x 72px oder 144 x 144px oder größer.
Das Fehlen eines Favicons führt zu Browser-Fehlern. Also 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 eine Fehlermeldung, wenn kein Icon gefunden wird. Das verlängert die Ladezeit der Seite.
Das Favicon ist fertig und – 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 -->
<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, da es sonst möglicherweise nicht sofort geladen wird.
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.
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.
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.
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.