DevToolPal
DE

Favicon-Generator

Ein Favicon aus Text, einem Emoji oder deinem Logo erstellen: favicon.ico, PNG-Größen, Apple Touch Icon, Web-Manifest und HTML-Tags in einem ZIP.

Läuft lokal, wird nie hochgeladen

Optionen

Quelle
Form

Vorschau

HTML für <head>

Was dieses Tool macht

Der Favicon-Generator macht aus einem Buchstaben, einem Emoji oder deinem Logo alle Icons, die eine moderne Website braucht. Er rendert das Icon in jeder Größe, packt favicon.ico, schreibt ein Web-App-Manifest und liefert dir die <link>-Tags zum Einfügen in den <head> deiner Seite. Alles lässt sich als ein ZIP herunterladen.

Mit Text zu starten ist der schnellste Weg zu einem sauberen Icon: Gib ein bis drei Zeichen oder ein Emoji ein und wähle Farben, eine Schrift und eine Form (quadratisch, abgerundet oder rund). Text-Icons bekommen zusätzlich ein skalierbares favicon.svg, das in jeder Größe und auf hochauflösenden Displays scharf bleibt.

So funktioniert es

  1. Wähle Text oder Bild als Quelle. Für ein Bild klickst du auf Bild auswählen… und wählst ein quadratisches PNG, SVG oder JPG.
  2. Lege die Form fest und schalte Hintergrund füllen ein, um das Icon auf eine farbige Kachel zu setzen, oder aus, um es transparent zu lassen.
  3. Gib den Namen der Website an: Er steht unter dem Icon, wenn jemand deine Website zum Startbildschirm eines Smartphones hinzufügt, und wird in site.webmanifest (Android) und das apple-mobile-web-app-title-Tag (iOS) geschrieben. Lege dann den Icon-Ordner fest, in den du die Dateien hochlädst – meist /.
  4. Prüfe die Vorschau: Das 16-px-Icon ist das, was Leute im Browser-Tab sehen.
  5. Klicke auf ZIP herunterladen, lade die Dateien auf deine Website hoch und füge das HTML in den <head> ein.

Beispiel

Die Standardeinstellungen erzeugen diese Tags:

<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="apple-mobile-web-app-title" content="My Site">

Tipps

  • Browser cachen Favicons sehr hartnäckig. Öffne die Seite nach dem Austausch eines Icons in einem privaten Fenster, um die Änderung zu sehen.
  • iOS ignoriert Transparenz im Apple Touch Icon und füllt sie mit Schwarz. Lass den Hintergrund also gefüllt, damit das Icon auf dem Homescreen sauber aussieht.

FAQ

› Welche Dateien bekomme ich?

favicon.ico (16, 32 und 48 px), PNG-Icons in 16, 32 und 48 px, ein Apple Touch Icon mit 180 px, Android-Icons mit 192 und 512 px, site.webmanifest, die HTML-Tags und favicon.svg, wenn du mit Text startest.

› Wird mein Logo irgendwo hochgeladen?

Nein. Das Bild wird in deinem Browser mit einem Canvas gelesen und skaliert; auch das ZIP entsteht auf deinem Gerät.

› Welches Bild eignet sich am besten?

Ein quadratisches PNG oder SVG mit mindestens 512 × 512 px und transparentem Hintergrund. Einfache, kräftige Formen bleiben bei 16 px lesbar; feine Details und dünner Text nicht.

› Brauche ich noch favicon.ico?

Ja, für ältere Browser und für Tools, die /favicon.ico direkt anfordern. Moderne Browser verwenden die PNG- oder SVG-Links im HTML.