DE

Favicon erstellen: aus Bild, Text oder Emoji

Buchstaben, Emoji oder Logo wählen, Farbe und Form einstellen, alles als ZIP laden: favicon.ico, alle PNG-Größen, site.webmanifest und der passende HTML-Code. Alles entsteht direkt in Ihrem Browser.

Ihre Dateien werden nur in Ihrem Browser verarbeitet und nicht hochgeladen – sie verlassen Ihr Gerät nicht.

Favicon aus
Ein oder zwei Zeichen sind in 16 × 16 px noch gut lesbar.
Name und Pfad (Manifest)
„/“ = Hauptverzeichnis der Website (empfohlen).

Vorschau und Dateien

    HTML für den <head>
    site.webmanifest
    Ergebnis
    So wird gerechnet
    

    Das Favicon ist das kleine Symbol im Browser-Tab, in Lesezeichen, im Verlauf und in den Suchergebnissen von Google. Dieser Generator erzeugt aus einem Bild, ein bis drei Buchstaben oder einem Emoji alle Dateien, die eine Website heute braucht – und den HTML-Code dazu.
    

    Welche Dateien und Größen?
    

    
  
    DateiGrößeWofür
    
  
    
    favicon.ico16, 32, 48 pxklassisches Favicon, wird von allen Browsern auch ohne HTML-Angabe unter /favicon.ico gesucht
    
    
    favicon-16x16.png, favicon-32x32.png16 und 32 pxBrowser-Tab, normal und hochauflösend
    
    
    apple-touch-icon.png180 pxSymbol, wenn jemand die Seite auf iPhone oder iPad zum Home-Bildschirm hinzufügt
    
    
    android-chrome-192x192.png, -512x512.png192 und 512 pxWeb-App-Manifest: Startbildschirm und Startbild unter Android/Chrome
    
    
    site.webmanifest–Name, Farben und Icons der Website als installierbare Web-App
    
      

    

    Google verlangt für das Favicon in den Suchergebnissen ein quadratisches Bild von mindestens 8 × 8 Pixeln und empfiehlt mehr als 48 × 48 Pixel. Chrome erwartet im Manifest Icons mit 192 und 512 Pixeln, Apple nennt 180 × 180 Pixel für das Symbol auf dem iPhone-Home-Bildschirm.
    

    So bauen Sie das Favicon ein
    

      
  
    1. ZIP herunterladen und entpacken.
      2. 
  
    2. Alle Dateien in das Hauptverzeichnis Ihrer Website hochladen (dorthin, wo die Startseite liegt).
      3. 
  
    3. Den HTML-Code in den <head> jeder Seite einfügen (bei WordPress, Wix & Co. gibt es meist ein eigenes Feld „Website-Icon“).
      4. 

    

    Liegen die Dateien in einem Unterordner, tragen Sie ihn unter „Ordner auf dem Server“ ein – Manifest und HTML-Code passen sich an. Browser speichern Favicons hartnäckig zwischen; ein neues Symbol erscheint oft erst nach dem Leeren des Caches oder in einem privaten Fenster.
    

    Was macht ein gutes Favicon aus?
    


    Emoji als Favicon – Lizenz beachten
    

    Das Emoji wird mit der Emoji-Schrift gezeichnet, die auf Ihrem Gerät installiert ist – auf dem iPhone sieht es deshalb anders aus als unter Windows oder Android. Die Unicode-Norm legt nur fest, welches Zeichen gemeint ist, nicht wie es aussieht. Die Grafiken selbst gehören dem Hersteller der Schrift (z. B. Apple, Microsoft, Google), und deren Lizenzen erlauben nicht ohne Weiteres, die Bilder als Logo oder Favicon einer Website zu verwenden.
    

    Für eine private Seite ist das Risiko gering, für eine kommerzielle Website sollten Sie ein frei lizenziertes Emoji-Set nehmen und dessen Bedingungen einhalten:
    


    Laden Sie das gewünschte Emoji dort als PNG oder SVG herunter und wählen Sie hier „Bild / Logo“. Dies ist ein allgemeiner Hinweis, keine Rechtsberatung.
    

    Datenschutz
    

    Alle Dateien entstehen in Ihrem Browser. Ihr Bild wird nicht hochgeladen, und nichts wird gespeichert. Für die Weiterverarbeitung von Logos helfen auch Bild umwandeln und Bildgröße ändern.
    

    Beispiel: Buchstabe „M“ in Weiß auf einem blauen Kreis – im ZIP stecken danach favicon.ico, die PNG-Größen, site.webmanifest und der HTML-Code zum Einfügen in den <head>. Passend dazu: SVG in PNG umwandeln für ein Vektor-Logo und der Kontrast-Checker für gut lesbare Farben.
    

    Große Logo-Dateien verkleinern Sie vorher mit Bild komprimieren.
    Häufige Fragen
    Welche Größe muss ein Favicon haben?
    Für den Browser-Tab 16 × 16 und 32 × 32 Pixel, für Google mindestens 48 × 48 (quadratisch), für Apple-Geräte 180 × 180 und für Android/Web-Apps 192 × 192 und 512 × 512. Der Generator erzeugt alle Größen auf einmal.
    Brauche ich heute noch eine favicon.ico?
    Sie ist weiterhin sinnvoll: Viele Browser, Feed-Reader und Werkzeuge fragen ohne HTML-Angabe direkt /favicon.ico ab. Die ICO-Datei enthält hier 16, 32 und 48 Pixel als PNG-Bilder.
    Wie baue ich das Favicon in meine Website ein?
    Dateien ins Hauptverzeichnis der Website hochladen und den HTML-Code in den <head> einfügen. In WordPress geht es auch über „Design → Customizer → Website-Informationen → Website-Icon“ mit dem 512-px-PNG.
    Darf ich ein Emoji als Favicon verwenden?
    Die Emoji-Grafiken von Apple, Microsoft oder Google gehören den Herstellern. Für kommerzielle Seiten besser ein frei lizenziertes Set wie Twemoji (CC BY 4.0, mit Namensnennung) oder Noto Emoji (OFL 1.1) nutzen und das Bild hier hochladen.
    Warum sehe ich mein neues Favicon nicht?
    Browser speichern Favicons lange zwischen. Seite in einem privaten Fenster öffnen oder den Cache leeren. In den Google-Suchergebnissen kann die Aktualisierung einige Tage bis Wochen dauern.
    Wird mein Logo hochgeladen?
    Nein. Alle Dateien werden in Ihrem Browser erzeugt; Ihr Bild verlässt Ihr Gerät nicht.
    Quellen und Rechtsgrundlagen
    Stand: 
    Passende Werkzeuge