Favicon-Generator
Ziehen Sie Ihr Logo einmal hierher und erhalten Sie alle Icons, die eine Website braucht, samt Code zum Einfügen in Ihre Seiten.
Auf diesem Gerät versiegelt
Läuft in Ihrem Browser. Nichts wird hochgeladen.
Versiegelt
Ihr Icon
Code für Ihre Seiten
Legen Sie die Dateien aus dem ZIP im Stammverzeichnis Ihrer Website ab und fügen Sie diesen Code in den <head> jeder Seite ein.
So funktioniert es
-
Logo hinzufügen
Ziehen Sie eine SVG-, PNG- oder JPG-Datei hierher, wählen Sie sie aus oder fügen Sie sie ein. Ein quadratisches Bild mit mindestens 512 × 512 Pixeln ergibt die schärfsten Icons.
-
Aussehen anpassen
Fügen Sie einen Innenabstand, eine Hintergrundfarbe oder abgerundete Ecken hinzu und prüfen Sie das Ergebnis in einem Browser-Tab und auf dem Startbildschirm eines Smartphones.
-
Herunterladen und Code einfügen
Laden Sie das ZIP herunter, legen Sie die Dateien im Stammverzeichnis Ihrer Website ab und fügen Sie den Code in den <head> Ihrer Seiten ein.
Häufige Fragen
Welche Dateien erhalte ich?
Eine favicon.ico-Datei mit den Icons in 16, 32 und 48 Pixeln, PNG-Icons in 16, 32, 48, 192 und 512 Pixeln, eine apple-touch-icon.png mit 180 Pixeln für iPhones und iPads sowie eine site.webmanifest-Datei, mit der Android Ihre Icons in 192 und 512 Pixeln nutzen kann. Laden Sie sie einzeln oder alle zusammen als ZIP-Datei herunter.
Wo lege ich die Dateien ab?
Im Stammverzeichnis Ihrer Website, neben Ihrer Startseite, damit sie unter Adressen wie /favicon.ico erreichbar sind. Fügen Sie dann den unter der Vorschau angezeigten Code in den <head> jeder Seite ein. Browser suchen auch von selbst nach /favicon.ico, sodass selbst Seiten ohne den Code Ihr Icon erhalten.
Wie groß sollte mein Bild sein?
Quadratisch und mindestens 512 × 512 Pixel, die Größe des größten Icons. Ein SVG ist ideal: Es wird in jeder Größe scharf gezeichnet. Ein kleineres Bild funktioniert auch, dann werden die großen Icons aber hochgerechnet und wirken unscharf.
Warum wirkt mein Icon im Browser-Tab unscharf oder zu klein?
Bei 16 Pixeln verschwinden feine Details und dünner Text. Verwenden Sie ein einfaches Zeichen, etwa einen Buchstaben oder ein Symbol, statt eines vollständigen Logos mit Schriftzug, halten Sie den Innenabstand klein und wählen Sie „Quadratisch zuschneiden“, wenn Ihr Bild breit ist.
Wird mein Bild hochgeladen?
Nein. Ihr Bild wird in Ihrem Browser gelesen, skaliert und gespeichert, auf Ihrem Gerät. Es wird nirgendwohin gesendet.
Warum hat das Apple Touch Icon einen Hintergrund?
iPhones und iPads runden die Ecken von Icons auf dem Startbildschirm selbst ab und stellen transparente Bereiche schwarz dar. Deshalb erhält das Apple Touch Icon immer einen vollflächigen Hintergrund und eckige Ränder: Ihre Hintergrundfarbe oder Weiß, wenn Sie „Transparent“ gewählt haben.