Favicon für Ihre Website erstellen (ICO, PNG, Apple- und Android-Icons)
Auf dieser Seite
Kurz gesagt: Beginnen Sie mit einem einfachen quadratischen Bild, lassen Sie es durch den Favicon-Generator von Imgovo laufen, laden Sie die ZIP-Datei herunter, legen Sie die Dateien in das Stammverzeichnis Ihrer Website und fügen Sie das bereitgestellte HTML in den <head> Ihrer Seiten ein. Website-Baukästen wie WordPress, Shopify und Wix haben meist eine Einstellung „Website-Icon“, in die Sie stattdessen das 512-px-PNG hochladen können.
Wofür ein Favicon gut ist
Das Favicon ist das kleine Icon im Browser-Tab. Es erscheint auch in Lesezeichen und im Browserverlauf, und Smartphones nutzen verwandte Icons, wenn jemand Ihre Website zum Startbildschirm hinzufügt. Eine Website ohne Favicon zeigt einen allgemeinen Platzhalter, der unfertig wirkt.
Da das Icon sehr klein dargestellt wird, zählt das Design mehr als die Auflösung.
Für winzige Größen gestalten
- Halten Sie es einfach. Eine kräftige Form oder ein bis zwei Buchstaben funktionieren. Ein detailreiches Logo wird bei 16 × 16 Pixeln zu einem Fleck.
- Sorgen Sie für starken Kontrast. Tabs können hell oder dunkel sein.
- Bevorzugen Sie eine quadratische Vorlage. Ist Ihr Logo breit, setzen Sie es auf eine quadratische Fläche.
- Nehmen Sie einen transparenten Hintergrund, wenn das Icon mit dem Tab verschmelzen soll. Bei Fotos schneidet der Generator von der Mitte aus quadratisch zu.
- Lassen Sie etwas Luft. Mit den Einstellungen für Innenabstand und abgerundete Ecken bekommt die Form Raum.
Hat Ihr Logo einen Hintergrund, den Sie nicht wollen, kann Hintergrund entfernen ihn zuerst transparent machen. Siehe Den Hintergrund eines Fotos entfernen. Um einem quadratischen Logo abgerundete Ecken oder einen Kreis zu geben, speichert Bild abrunden ein transparentes PNG.
Schritt für Schritt
- Öffnen Sie den Favicon-Generator.
- Fügen Sie Ihr Bild hinzu. PNG, SVG, JPG, WebP und weitere Formate werden akzeptiert.
- Wählen Sie, wie es eingepasst wird: von der Mitte aus quadratisch zuschneiden oder das ganze Bild einpassen.
- Wählen Sie den Hintergrund (transparent oder eine Farbe), den Innenabstand und die abgerundeten Ecken. Standard für Innenabstand und abgerundete Ecken ist jeweils 0 %. Optional können Sie auch einen App-Namen eingeben.
- Prüfen Sie die Vorschauen.
- Laden Sie die ZIP-Datei herunter.
Rückgängig und Wiederholen funktionieren mit Strg+Z und Strg+Umschalt+Z.
Was in der ZIP-Datei steckt
| Datei | Größe | Verwendet für |
|---|---|---|
| favicon.ico | 16, 32 und 48 px in einer Datei | Browser-Tabs, ältere Browser |
| favicon-16x16.png | 16 px | Browser-Tabs |
| favicon-32x32.png | 32 px | Browser-Tabs, Bildschirme mit hoher Pixeldichte |
| apple-touch-icon.png | 180 px | Startbildschirme von iPhone und iPad |
| android-chrome-192x192.png | 192 px | Android und installierbare Web-Apps |
| android-chrome-512x512.png | 512 px | Android und installierbare Web-Apps, Upload als Website-Icon |
| site.webmanifest | – | Beschreibt die Icons für installierbare Web-Apps |
Das Apple-Icon erhält einen einfarbigen Hintergrund, weil iPhones und iPads transparente Bereiche schwarz darstellen.
Die Dateien in Ihre Website einbinden
- Entpacken Sie die Dateien in das Stammverzeichnis Ihrer Website, neben Ihre
index.html. - Kopieren Sie das HTML aus dem Feld „HTML kopieren“ des Generators.
- Fügen Sie es in den
<head>jeder Seite ein oder in das gemeinsame Layout bzw. Template Ihrer Website.
Ein typischer Satz von Tags sieht so aus. Verwenden Sie genau den Ausschnitt, den der Generator Ihnen gibt, denn er passt zu Ihren Dateinamen:
<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">Suchen Sie in einem Website-Baukasten die Einstellung „Website-Icon“ oder „Favicon“ und laden Sie das 512-px-PNG hoch. Der Baukasten erzeugt die anderen Größen dann selbst.
Wenn das neue Icon nicht erscheint
Browser speichern Favicons sehr hartnäckig im Cache. Nachdem Sie neue Dateien hochgeladen haben:
- Laden Sie die Seite mit einem harten Neuladen neu.
- Öffnen Sie die Website in einem privaten Fenster oder einem anderen Browser.
- Prüfen Sie, ob sich
/favicon.icodirekt in der Adressleiste öffnen lässt. - Warten Sie. Suchmaschinen können eine Weile brauchen, bis sie ein neues Icon anzeigen.
Nur eine ICO-Datei erstellen
Brauchen Sie nur die favicon.ico, nutzen Sie die Schaltfläche „Nur favicon.ico herunterladen“. Für andere Größen kann Bildgröße ändern ein schlichtes PNG in genau den Maßen erzeugen, die Sie brauchen. Formatfragen behandelt JPG, PNG, WebP und AVIF im Vergleich.
Datenschutz
Ihr Logo verlässt Ihren Computer nie. Die Icons werden in Ihrem Browser erstellt, und auch die ZIP-Datei wird dort gebaut.
Jetzt ausprobieren
Öffnen Sie den Favicon-Generator, fügen Sie Ihr Logo hinzu und laden Sie den vollständigen Icon-Satz herunter.
Häufig gestellte Fragen
Was ist ein Favicon?
Ein Favicon ist das kleine Icon, das eine Website in Browser-Tabs, Lesezeichen und im Verlauf darstellt. Verwandte Icons werden genutzt, wenn eine Website zum Startbildschirm eines Smartphones hinzugefügt wird.
Mit welchem Bild sollte ich beginnen?
Am besten funktioniert ein quadratisches Bild mit transparentem Hintergrund. Einfache, kräftige Logos und Buchstabenmarken halten besser durch als detailreiche Bilder, denn feine Details verschwinden bei 16 × 16 Pixeln.
Warum hat das Apple-Icon einen Hintergrund?
iPhones und iPads stellen transparente Bereiche schwarz dar, deshalb füllt der Generator sie mit einem einfarbigen Hintergrund, entweder in Ihrer gewählten Farbe oder in Weiß.
Kann ich nur die favicon.ico erzeugen?
Ja. Mit der Schaltfläche „Nur favicon.ico herunterladen“ erhalten Sie nur die ICO-Datei mit mehreren Größen.
Wird mein Logo hochgeladen?
Nein. Die Icons werden in Ihrem Browser erstellt, und auch die ZIP-Datei wird dort gebaut.