- Startseite
- Bild
- Favicon-Generator
Favicon-Generator
Alle Favicon-Größen aus einem einzigen Bild erstellen.
Logo hierher ziehen oder zum Auswählen klicken
PNG, SVG, JPG, WebP oder ICO. Am besten eignet sich ein quadratisches Logo ab 512 × 512 px. Dateien werden im Browser verarbeitet und nie hochgeladen. Die Bilder bleiben in diesem Browser, bis Sie sie entfernen.
Ctrl+OauswählenCtrl+Veinfügen
Ein Favicon ist das kleine Symbol, das Browser in Tabs und Lesezeichen zeigen; Handys verwenden größere Versionen, wenn jemand Ihre Website zum Startbildschirm hinzufügt. Legen Sie ein Logo ab, und dieser Generator erstellt alle Dateien, die eine Website braucht – favicon.ico, PNG-Favicons, das Apple-Touch-Icon, Android-Icons und ein Web-Manifest –, mit Live-Vorschau und dem HTML-Code zum Einfügen in Ihre Seite. Er läuft in Ihrem Browser, Ihr Logo verlässt also nie Ihr Gerät; es ist kostenlos und ohne Anmeldung.
So erstellen Sie ein Favicon
- Legen Sie Ihr Logo (PNG, SVG, JPG oder WebP) irgendwo auf der Seite ab, fügen Sie es mit Strg+V ein oder klicken Sie, um es auszuwählen. Ein Bild, das Sie in einem anderen Bild-Tool hinzugefügt haben, ist schon in der Liste, so wie Sie es dort gelassen haben: Klicken Sie auf seine Miniatur, um es zu verwenden. Mit dem Beispiellogo können Sie es ohne eigene Datei ausprobieren.
- Das Logo wird automatisch zugeschnitten: auf das Bildzeichen eines breiten Logos oder auf das Logo ohne leere Ränder. Ziehen Sie das Quadrat auf dem Logo, um den Ausschnitt zu ändern, oder wählen Sie Ganzes Logo. Wählen Sie Hintergrund (die Farben Ihres Logos stehen vorn), Innenabstand und Form; die Vorschauen aktualisieren sich dabei.
- Klicken Sie auf Alle herunterladen (ZIP), legen Sie die Dateien in den Stammordner Ihrer Website, klicken Sie dann auf HTML kopieren und fügen Sie die Tags in den <head> Ihrer Seite ein.
Funktionen
- favicon.ico mit Symbolen in 16, 32 und 48 px, dazu PNG-Favicons in 16 und 32 px
- apple-touch-icon.png (180 px) und Android-Chrome-Icons (192 und 512 px)
- site.webmanifest mit App-Namen und Designfarbe sowie die HTML-Tags für Ihren <head>
- Findet das Bildzeichen eines breiten Logos automatisch; ziehen Sie das Quadrat für einen anderen Ausschnitt oder passen Sie das ganze Logo ein
- Hintergrund: transparent, in den Farben Ihres Logos oder in jeder Farbe; Innenabstand von 0 bis 30 %; Form quadratisch, abgerundet oder rund
- Live-Vorschau aller Größen, eines Browser-Tabs und eines Startbildschirms, hell und dunkel
- Startet mit PNG, SVG, JPG, WebP oder ICO; alle Dateien in einer ZIP-Datei
Ist das privat?
Ja. Die Icons werden in Ihrem Browser von einer WebAssembly-Bild-Engine erstellt; Ihr Logo und die Dateien verlassen nie Ihr Gerät. Das Logo bleibt in diesem Browser, bis Sie es aus der Liste entfernen.
Häufige Fragen
Welche Favicon-Größen brauche ich?
Vier Dateien decken fast alles ab: favicon.ico mit 16, 32 und 48 px für Browser-Tabs, Lesezeichen und Windows-Verknüpfungen; ein apple-touch-icon.png mit 180 px für die Startbildschirme von iPhone und iPad; und PNGs mit 192 und 512 px, in site.webmanifest eingetragen, für Android und installierbare Web-Apps. Die ZIP-Datei enthält alle, dazu PNGs mit 16 und 32 px für Browser, die PNG bevorzugen.
Wie binde ich das Favicon in mein HTML ein?
Legen Sie die Dateien in den Stammordner Ihrer Website, sodass /favicon.ico aufrufbar ist, klicken Sie dann auf HTML kopieren und fügen Sie die Tags in den <head> jeder Seite ein. Browser suchen auch ohne Tag nach /favicon.ico; die Tags ergänzen die PNG-Größen, das Apple-Icon und das Manifest.
Warum hat apple-touch-icon.png einen Hintergrund?
Weil iPhones und iPads transparente Pixel schwarz darstellen und die Ecken selbst abrunden; das Apple-Icon ist daher immer ein volles, deckendes Quadrat: in Ihrer Hintergrundfarbe oder in Weiß, wenn der Hintergrund transparent ist. Die übrigen Icons behalten Transparenz und Form.
Kann ich ein SVG-Logo verwenden?
Ja. Ihr Browser zeichnet das SVG in seiner eigenen Größe oder, wenn es kleiner ist, mit 1024 px, und daraus entstehen alle Icons. Ein SVG, das andere Dateien einbindet (Bilder, Schriften oder Stylesheets), lässt sich als Bild nicht vollständig zeichnen; das Tool sagt es Ihnen dann, statt unvollständige Icons zu erstellen. Exportieren Sie es vorher als PNG oder betten Sie seine Bilder ein.
Ich habe mein Favicon ersetzt, aber der Browser zeigt noch das alte. Warum?
Browser speichern Favicons lange im Cache. Laden Sie die Seite mit Strg+F5 neu (Cmd+Umschalt+R auf dem Mac) oder öffnen Sie die Website in einem privaten Fenster, um das neue Icon zu sehen.