Tokenlabor

Favicon-Generator

Der Favicon-Generator macht aus einem Buchstaben oder Bild alle nötigen Icons: PNG in sechs Größen, favicon.ico, Apple Touch Icon und den HTML-Code, als ZIP zum Herunterladen.

Vorschau und Download
HTML für den head-Bereich
site.webmanifest

Alles läuft in Ihrem Browser. Eingaben verlassen Ihr Gerät nicht.

Favicon erstellen in allen Größen

Der Favicon-Generator erzeugt aus einem Buchstaben mit Farbe oder aus Ihrem eigenen Logo alle gängigen Favicon-Größen: PNG mit 16, 32 und 48 Pixeln für Browser-Tabs, ein Apple Touch Icon mit 180 Pixeln für den iPhone-Startbildschirm, 192 und 512 Pixel für Android und Web-App-Manifest sowie eine favicon.ico mit 16, 32 und 48 Pixeln in einer Datei. Dazu bekommen Sie den passenden HTML-Code und eine site.webmanifest.

So gehen Sie vor: Favicon erstellen, ZIP herunterladen, alle Dateien in das Hauptverzeichnis Ihrer Website legen und die Zeilen aus dem HTML-Feld in den <head> jeder Seite einfügen. Die favicon.ico im Hauptverzeichnis wird von vielen Browsern und Werkzeugen auch ohne Verweis abgefragt, deshalb lohnt es sich, sie immer mitzuliefern.

Ein Favicon aus Bild gelingt am besten mit einer quadratischen Vorlage von mindestens 512 Pixeln und kräftigen, einfachen Formen. Feine Schrift oder Details verschwinden bei 16 Pixeln. Bei den Favicon Größen gilt: Das Apple Touch Icon wird nie transparent ausgegeben, weil iOS transparente Flächen schwarz füllt; der Generator legt deshalb Ihre Hintergrundfarbe darunter. Ihr Bild wird nur im Browser über ein Canvas verkleinert und nicht hochgeladen.

Anleitung: Favicon-Generator in 5 Schritten

  1. Unter „Quelle“ zwischen Buchstabe oder Text und eigenem Bild wählen.
  2. Für einen Buchstaben bis zu drei Zeichen, Form, Hintergrund- und Schriftfarbe sowie Schrift festlegen; für ein Bild eine möglichst quadratische Datei wählen.
  3. Den Namen der Website für das Manifest eintragen.
  4. Die Vorschau prüfen und mit „Alle als ZIP“ favicon.ico, PNG-Größen, Apple Touch Icon und site.webmanifest herunterladen.
  5. Die Dateien ins Hauptverzeichnis legen und das HTML für den head-Bereich kopieren und einfügen.

Typische Anwendungsfälle

  • Neue Website: In einem Schritt alle nötigen Favicon Größen erzeugen, statt jede Datei einzeln zu exportieren.
  • Favicon aus Bild: Ein vorhandenes Logo in favicon.ico, Apple Touch Icon und Manifest-Icons umwandeln.
  • Web-App: Die Icons mit 192 und 512 Pixeln samt site.webmanifest für eine installierbare Anwendung bereitstellen.
  • Interne Werkzeuge unterscheiden: Test- und Live-Umgebung mit verschiedenfarbigen Buchstaben-Favicons im Browser-Tab erkennbar machen.
Fragen

Häufige Fragen

Welche Favicon Größen brauche ich wirklich?

Für die meisten Websites reichen favicon.ico (16, 32 und 48 Pixel), ein PNG mit 32 Pixeln, ein Apple Touch Icon mit 180 Pixeln und für das Web-App-Manifest 192 und 512 Pixel. Genau diese Dateien erzeugt der Generator.

Brauche ich heute noch eine favicon.ico?

Ja, es ist empfehlenswert. Moderne Browser nutzen zwar PNG oder SVG, aber viele Programme, Feedreader und ältere Browser fragen ohne weiteren Hinweis die Datei favicon.ico im Hauptverzeichnis ab.

Warum sieht mein Favicon aus Bild unscharf aus?

Bei 16 und 32 Pixeln gehen feine Details verloren. Verwenden Sie ein vereinfachtes Logo oder nur einen Buchstaben. Eine quadratische Vorlage verhindert, dass das Bild gestaucht wird; nicht quadratische Bilder werden mittig eingepasst.

Was ist ein Apple Touch Icon?

Das Symbol, das iPhone und iPad zeigen, wenn jemand Ihre Seite zum Home-Bildschirm hinzufügt. Es hat 180 mal 180 Pixel, keinen transparenten Hintergrund und wird von iOS automatisch mit abgerundeten Ecken dargestellt.

Werden meine Bilder hochgeladen?

Nein. Das Bild wird im Browser gelesen, auf einem Canvas verkleinert und als Datei zum Herunterladen angeboten. Es verlässt Ihr Gerät nicht.

Wie füge ich ein Favicon in WordPress ein?

Je nach Theme unter Design > Customizer > Website-Informationen oder in den Website-Einstellungen ein Website-Icon hochladen; WordPress empfiehlt mindestens 512 × 512 Pixel. Alternativ legen Sie die Dateien aus dem ZIP ins Hauptverzeichnis und fügen den HTML-Code in den head-Bereich des Themes ein.

Warum wird mein neues Favicon nicht angezeigt?

Browser speichern Favicons hartnäckig zwischen. Laden Sie die Seite ohne Cache neu, rufen Sie /favicon.ico direkt auf und prüfen Sie die Pfade im HTML-Code. Ein angehängter Parameter wie ?v=2 an den Dateinamen erzwingt das Neuladen.

Weitere Werkzeuge

Das könnte auch helfen

Alle 358 Werkzeuge

Farbumwandler

HEX, RGB, HSL, HSV, CMYK und OKLCH ineinander umrechnen, mit Farbwähler, Vorschau und Farbtönen.

Öffnen

Farbpalette aus Bild

Die wichtigsten 5 bis 10 Farben eines Bildes als HEX-Codes ermitteln, lokal im Browser.

Öffnen

Kontrast prüfen (WCAG)

Kontrastverhältnis zweier Farben nach WCAG prüfen, AA und AAA, mit Vorschlag für passende Farbtöne.

Öffnen

CSS-Gradient-Generator

Linearen, radialen und konischen Farbverlauf zusammenstellen und den CSS-Code kopieren.

Öffnen

Box-Shadow-Generator

CSS-Schatten mit mehreren Ebenen, inset und Deckkraft einstellen, Vorschau sehen, Code kopieren.

Öffnen

Flexbox-Generator

Flexbox-Eigenschaften per Auswahl setzen, die Wirkung live sehen und das CSS kopieren.

Öffnen