← Alle Werkzeuge

Favicon-Generator

Aus einem Bild werden favicon.ico, PNGs in mehreren Größen, apple-touch-icon und ein Manifest. Dateien verlassen dein Gerät nicht.

Über dieses Tool

Erstelle aus einem einzigen Bild einen kompletten Satz Website-Symbole: favicon.ico für Browser-Tabs (16, 32 und 48 Pixel in einer Datei), PNGs in mehreren Größen, ein apple-touch-icon für den iPhone-Startbildschirm, Android-Symbole samt einem maskierbaren (maskable) und eine site.webmanifest – alles in einer ZIP-Datei.

Das Werkzeug schreibt auch den Code für den <head> deiner Website. Du lädst also nur die Dateien hoch und fügst den Code ein. Hintergrundfarbe, Innenabstand und abgerundete Ecken stellst du ein, während du siehst, wie das Symbol in echter Größe aussieht.

So funktioniert es

  1. Ziehe ein Bild auf die Seite oder klicke, um es auszuwählen. Es muss nicht quadratisch sein.
  2. Wähle durch Ziehen und Zoomen den Bildausschnitt, der ins Symbol kommt.
  3. Wähle einen transparenten oder farbigen Hintergrund und stelle Innenabstand und abgerundete Ecken ein. Prüfe, ob das Symbol auch in der 16-Pixel-Vorschau erkennbar bleibt.
  4. Hole dir die Dateien mit „ZIP herunterladen“, lade sie auf deine Website hoch und kopiere dann den angezeigten <head>-Code und füge ihn ein.

Häufige Fragen

Was ist in der ZIP-Datei?

favicon.ico, die PNGs favicon-16x16, 32x32, 48x48 und 96x96, apple-touch-icon.png (180), icon-192.png, icon-512.png, icon-maskable-512.png, site.webmanifest und head-snippet.html mit dem Code für deinen <head>.

Was ist der sichere Bereich für maskierbare Symbole?

Android schneidet Symbole je nach Gerät in verschiedene Formen zu, etwa Kreise oder abgerundete Quadrate. Ein maskierbares Symbol lässt um die Mitte herum Platz, damit das Wichtige bei jedem Zuschnitt erhalten bleibt. Schalte die Anzeige des sicheren Bereichs ein, um zu sehen, welcher Teil nie abgeschnitten wird.

Soll ich abgerundete Ecken einschalten?

Meist ist es besser, sie auszulassen. iOS und Android runden die Ecken der Symbole auf dem Startbildschirm selbst ab, vorab abgerundete Ecken könnten also doppelt abgerundet werden.

Werden meine Dateien auf einen Server hochgeladen?

Nein. Die gesamte Verarbeitung findet in dem Browser statt, den du gerade verwendest. Deine Dateien werden nirgendwohin gesendet, daher bleibt keine Kopie deiner Fotos oder Dokumente auf fremden Servern zurück.

Ist das kostenlos? Brauche ich ein Konto?

Es ist kostenlos, ohne Registrierung und ohne Anmeldung. Einfach die Seite öffnen und loslegen.

Passende Tools