Favicon-Generator
Laden Sie Ihr Logo hoch und erhalten Sie in einem ZIP die Symbole, die Ihre Website braucht: eine favicon.ico mit Bildern in 16, 32 und 48 Pixeln, ein PNG mit 48 Pixeln für Google, ein Apple Touch Icon mit deckendem Hintergrund für das iPhone, Symbole mit 192 und 512 Pixeln für Android, ein maskierbares Symbol mit berechneter Schutzzone und eine site.webmanifest. Laden Sie ein SVG hoch, ist auch icon.svg enthalten. Sie sehen Vorschauen für Tab, Google-Ergebnis und Startbildschirm und kopieren den fertigen <head>-Code; alles läuft in Ihrem Browser.
- Kostenlos, ohne Anmeldung
- Ihre Datei verlässt Ihr Gerät nicht
- Bis zu 50 MB pro Datei
Fügen Sie Ihr Logo oder Symbol als Bild hinzu, um zu beginnen. PNG, SVG, JPG und WebP funktionieren; am besten ist ein quadratisches Bild mit mindestens 512 × 512 Pixeln.
Ihre Datei verlässt Ihr Gerät nicht; die Bilder werden in Ihrem Browser verarbeitet. EXIF- und Standortdaten werden dem Ergebnis nicht hinzugefügt.
So erstellen Sie ein Favicon
Logo hinzufügen
Laden Sie ein Logo als PNG, SVG, JPG oder WebP hoch. Am besten ist ein quadratisches Bild mit mindestens 512 × 512 Pixeln; auch ein SVG funktioniert.
Name, Farben und Innenabstand festlegen
Geben Sie Websitenamen und Kurznamen ein, wählen Sie Designfarbe und Hintergrundfarbe und fügen Sie bei Bedarf Innenabstand hinzu. Die Vorschauen zeigen, wie das Symbol im Tab, bei Google und auf dem Startbildschirm aussieht.
Paket herunterladen und einbinden
Laden Sie das ZIP herunter, legen Sie die Dateien im Stammverzeichnis Ihrer Website ab und fügen Sie den angezeigten <head>-Ausschnitt in Ihre Seiten ein.
Was bleibt erhalten?
Bleibt erhalten
- Die Proportionen Ihres Logos: Ein nicht quadratisches Bild wird in ein Quadrat eingepasst, nie gestreckt
- Transparenz (in den Standardsymbolen; wählen Sie eine Hintergrundfarbe, wird sie gefüllt)
- Wenn Sie ein SVG hochladen, ist icon.svg unverändert enthalten
Ändert sich
- Jedes Symbol wird in hoher Qualität auf seine eigene Größe neu berechnet
- Das Apple Touch Icon und das maskierbare Symbol haben immer einen deckenden Hintergrund: Ihre gewählte Farbe oder Weiß, wenn „Transparent“ gewählt ist
- Im maskierbaren Symbol liegt der Inhalt in der 80-%-Schutzzone
Wird nicht übernommen
- Aus einem PNG oder JPG wird keine Vektorgrafik (SVG) erzeugt; icon.svg gibt es nur bei einer SVG-Eingabe
- EXIF- und andere Metadaten werden den Symbolen nicht hinzugefügt
Wann es sinnvoll ist
Ein vollständiger Symbolsatz für eine neue Website
Eine einzelne favicon.ico reicht längst nicht mehr: iPhone-Startbildschirm, Android und Google-Suchergebnisse erwarten unterschiedliche Dateien. Mit einem Upload erhalten Sie alle, mit den richtigen Namen und Größen.
Ihr Symbol in die Google-Suchergebnisse bringen
Google zeigt das Symbol Ihrer Website in den Suchergebnissen anhand einer quadratischen Datei, deren Kantenlänge ein Vielfaches von 48 Pixeln ist und die abrufbar sein muss. Das Paket enthält diese Datei samt <head>-Link.
Eine Website, die sich wie eine App hinzufügen lässt (PWA)
Soll sich Ihre Website zum Startbildschirm hinzufügen lassen, brauchen Sie ein Manifest und Symbole mit 192 und 512 Pixeln. Das maskierbare Symbol verhindert, dass Ihr Logo angeschnitten wird, wenn Android das Symbol rund oder als abgerundetes Quadrat ausschneidet.
Grenzen, die Sie kennen sollten
- Am besten ist ein quadratisches Bild mit mindestens 512 × 512 Pixeln; große Symbole aus kleineren Quellen wirken unscharf.
- Dünne Linien und kleine Schrift sind in Symbolen mit 16 und 32 Pixeln nicht mehr lesbar; kräftige Logos mit hohem Kontrast funktionieren besser.
- Die Designfarbe wirkt nur in der Adressleiste mobiler Browser und hängt von den Browsereinstellungen ab.
- Google kann Tage oder sogar Wochen brauchen, um das Symbol in den Suchergebnissen zu aktualisieren, und auch Browser speichern Symbole im Cache.
Häufig gestellte Fragen
Welche Favicon-Dateien braucht eine Website?
Der aktuelle Ansatz: favicon.ico im Stammverzeichnis, ein PNG mit 48 Pixeln für Google, wenn möglich icon.svg, ein apple-touch-icon.png mit 180 Pixeln für das iPhone, Symbole mit 192 und 512 Pixeln für Android und eine site.webmanifest. Der Generator erstellt alle und liefert die <head>-Links dazu.
Was ist ein maskierbares Symbol?
Ein maskierbares Symbol hält seinen Inhalt innerhalb einer Schutzzone und hat einen vollständig gefüllten Hintergrund, damit Android es je nach Gerät rund, als abgerundetes Quadrat oder in anderer Form ausschneiden kann. Hier liegt der Inhalt im mittleren 80-%-Bereich des Bildes mit 512 Pixeln.
Warum ist das Apple Touch Icon deckend und hat eckige Ränder?
iOS zeigt transparente Bereiche schwarz an und rundet die Ecken selbst ab. Deshalb wird das Symbol vollständig gefüllt und ohne abgerundete Ecken erzeugt, in der gewählten Hintergrundfarbe (Weiß bei „Transparent“).
Warum erscheint mein Symbol nicht in den Google-Ergebnissen?
Die Symboldatei darf nicht per robots.txt gesperrt sein, muss im <head> der Startseite verlinkt sein und ein Quadrat sein, dessen Kantenlänge ein Vielfaches von 48 Pixeln ist. Nach der Korrektur können Sie in der Search Console eine erneute Indexierung der Startseite anfordern; die Aktualisierung kann trotzdem Tage oder Wochen dauern.
Was passiert, wenn ich ein nicht quadratisches Bild hochlade?
Die Symbole werden verzerrungsfrei in ein Quadrat eingepasst und lassen an den Seiten Leerraum. Soll der Rahmen das Quadrat ausfüllen, schneiden Sie das Bild zuvor mit dem Zuschneide-Werkzeug auf 1:1 zu.
Wird aus einem PNG ein SVG-Favicon erzeugt?
Nein. Eine automatische Umwandlung von Pixeln in Vektoren könnte das Aussehen des Symbols unbemerkt verändern; deshalb ist icon.svg nur enthalten, wenn Sie selbst ein SVG hochladen.
Ist dieses Werkzeug kostenlos?
Ja, völlig kostenlos. Es gibt kein Konto, kein Abo und kein Wasserzeichen.
Werden meine Dateien irgendwohin hochgeladen?
Nein. Die Bilder werden in Ihrem Browser verarbeitet und verlassen Ihr Gerät nicht. EXIF- und Standortdaten werden dem Ergebnis nicht hinzugefügt.