Zum Inhalt

Favicon-Generator. Alle Dateien für deine Website.

Logo oder Buchstaben rein, ein ZIP mit favicon.ico, PNG-Größen, Apple-Touch-Icon, Android-Icons, Web-App-Manifest und dem fertigen HTML-Code raus. Alles in deinem Browser.

Werkzeug

Woraus soll das Icon entstehen?

PNG, SVG, JPG oder WebP. Ein quadratisches Logo mit mindestens 512 Pixeln wird am besten. Oder ziehe die Datei auf die Seite.

Hintergrund

Form

8 %

Für die Web-App-Datei

Vorschau

32 px
iPhone, 180 px
Android, 192 px

Code für den <head>

Kurz gesagt. Ein Favicon ist das kleine Symbol im Browser-Tab, in den Lesezeichen und in den Google-Suchergebnissen.
Mehr dazu
Dafür braucht eine Website mehrere Dateien in unterschiedlichen Größen: eine favicon.ico, PNGs in 16 und 32 Pixeln, ein Apple-Touch-Icon mit 180 Pixeln und Icons für Android. Dieser Generator erstellt alle aus deinem Logo oder aus Buchstaben und liefert die passenden Zeilen für den  gleich mit. Es gibt kein Konto und keinen Upload.
So erstellst du dein Favicon.
  1. Quelle wählen: „Logo oder Bild“ mit einer Datei (PNG, SVG, JPG oder WebP, am besten quadratisch und mindestens 512 Pixel) oder „Buchstaben“, falls du noch kein Logo hast.
  2. Hintergrund, Form und Innenabstand einstellen. Die Vorschau zeigt das Icon im Tab, als iPhone-Symbol und als Android-Icon. Bei kleinen Icons gilt: weniger Details, mehr Kontrast.
  3. ZIP laden und alle Dateien in den Hauptordner deiner Website legen.
  4. Code einfügen: Die Zeilen aus dem Kasten gehören in den <head> jeder Seite.
    Mehr dazu
    Bei WordPress, Jimdo oder Baukästen gibt es dafür meist ein Feld „Favicon“ oder „Website-Icon“, dann reicht die 512-Pixel-Datei.
Welche Dateien brauchst du wirklich?
  • favicon.ico im Hauptordner: wird von vielen Browsern, Feedreadern und Suchmaschinen automatisch abgefragt, auch ohne Eintrag im HTML.
  • favicon-32x32.png und favicon-16x16.png: die modernen Tab-Icons.
  • apple-touch-icon.png (180 × 180): das Symbol, wenn jemand deine Seite auf den iPhone-Home-Bildschirm legt. Apple rundet die Ecken selbst und braucht einen deckenden Hintergrund, deshalb ist diese Datei immer quadratisch und nie transparent.
  • android-chrome-192x192.png und 512x512.png: für Android und installierbare Web-Apps, eingetragen im Manifest.
  • site.webmanifest: beschreibt Namen, Farben und Icons deiner Web-App.
Tipps für ein gutes Favicon.
  • Ein Favicon wird mit 16 × 16 Pixeln gelesen. Das volle Logo mit Schrift wird zu Matsch. Nimm das Bildzeichen oder den Anfangsbuchstaben.
  • Starker Kontrast zum Tab-Hintergrund: helle Tab-Leisten und dunkle Modi gibt es beide. Ein farbiger Hintergrund hält in beiden.
  • Lasse etwas Innenabstand, damit das Icon beim Abrunden nicht angeschnitten wird.
  • Nach dem Hochladen die Seite hart neu laden: Browser speichern Favicons hartnäckig. Google aktualisiert das Symbol in den Suchergebnissen erst nach einigen Tagen.
Noch mehr kostenlos.
Dasselbe Werkzeug mit anderem Einstieg: PNG in ICO umwandeln.
Alle kostenlosen Werkzeuge
Häufige Fragen.
Wie erstelle ich ein Favicon kostenlos?
Logo oder Buchstaben hier eingeben, Form und Hintergrund wählen und das ZIP laden. Du bekommst favicon.ico, PNG-Größen, Apple- und Android-Icons und den HTML-Code. Alles ohne Anmeldung.
Welche Größe muss ein Favicon haben?
Die favicon.ico enthält 16, 32 und 48 Pixel. Dazu kommen PNGs mit 16 und 32, ein Apple-Touch-Icon mit 180 und Android-Icons mit 192 und 512 Pixeln. Dieser Generator erstellt alle.
Kann ich aus meinem Logo ein Favicon machen?
Ja. Lade das Logo als PNG, SVG, JPG oder WebP hoch (es bleibt in deinem Browser). Am besten ist ein quadratisches Bild mit mindestens 512 Pixeln. Bei Logos mit viel Schrift lohnt es sich, nur das Bildzeichen zu verwenden.
Wird meine Datei hochgeladen?
Nein. Alle Icons entstehen in deinem Browser.
Wo lade ich die Dateien hoch?
In den Hauptordner (Root) deiner Website, also dorthin, wo auch die Startseite liegt. Den Code aus dem Kasten fügst du in den head jeder Seite ein. Bei Baukästen genügt meist das Feld „Favicon“ in den Einstellungen.
Warum sehe ich mein neues Favicon nicht?
Browser speichern Favicons lange. Seite mit Strg+Shift+R (Mac: Cmd+Shift+R) neu laden oder in einem privaten Fenster öffnen. In Google erscheint das Symbol erst nach einigen Tagen.
Wenn es mehr sein soll als eine Datei.
Die Werkzeuge sind kostenlos und bleiben es. Wenn du es gestaltet haben willst, mache ich das von Hand, aus Haag an der Amper, für Betriebe in ganz Deutschland.
Anfrage stellen
Alle Preise ohne Umsatzsteuer (Kleinunternehmer nach § 19 UStG). Festpreis, bevor ich anfange.