Startseite / Design / Favicon- und App-Icon-Generator
Icons und Marke

Favicon- und App-Icon-Generator

Lade ein Logo hoch, sieh Icons in vielen Größen in der Vorschau, lade PNGs herunter und kopiere den HTML-Snippet für deine Seite oder PWA.

Keine Datei gewählt
Verwende ein quadratisches PNG oder SVG mit ausreichender Auflösung (mind. 512×512 empfohlen).
Wird als Füllung und als theme-color im vorgeschlagenen HTML-Snippet verwendet.
Wähle, welche Größen erzeugt werden sollen. Klicke auf ein Icon oder seine Beschriftung, um das PNG herunterzuladen.

Icon-Vorschau

Klicke auf ein Icon oder seine Beschriftung, um diese Größe als PNG herunterzuladen. Speichere die Dateien in deinem Projekt (z. B. /assets/icons).

Dieser Generator läuft vollständig im Browser. Vergiss nicht, die heruntergeladenen PNGs hochzuladen und die Pfade im Snippet an dein Projekt anzupassen.

Jedes seriöse Projekt braucht ein klares Favicon im Browser-Tab, ein Apple-Touch-Icon für iOS und App-Icons für Android und PWA. Dieses Tool hilft dir, alles aus einer Bildquelle zu erzeugen: Lade ein quadratisches Logo hoch, wähle Größen, lade PNGs herunter und kopiere den HTML-Snippet in deine Seite.

Warum Favicon und App-Icons wichtig sind

  • Favicon — das kleine Icon im Browser-Tab und in Lesezeichen. Ohne wirkt der Tab generisch und deine Marke ist weniger erkennbar.
  • Apple-Touch-Icon — wird genutzt, wenn Nutzer deine Seite auf dem iPhone/iPad zum Home-Bildschirm hinzufügen. Die richtige Größe (z. B. 180×180) sorgt für ein scharfes Icon.
  • PWA-/Android-Icons — nötig für „Zum Home-Bildschirm“ und Installationsaufforderungen. Typische Größen: 192×192 und 512×512.

Ein quadratisches Quellbild kann alle diese Fälle abdecken. Der Generator läuft vollständig im Browser: dein Logo verlässt dein Gerät nicht.

Empfohlenes Quellbild

Verwende ein quadratisches Bild (PNG oder SVG) mit mindestens 512×512 Pixeln. Höhere Auflösung ist in Ordnung; das Tool skaliert herunter. Vermeide zu kleine oder verzerrte Bilder, damit die Icons auf hochauflösenden Displays scharf bleiben.

Schnellstart mit dem Tool

  1. Hochladen — Auf „Datei wählen“ klicken und dein Logo wählen (PNG oder SVG, quadratisch, 512×512 oder größer).
  2. Hintergrund — Hintergrundfarbe wählen, falls dein Logo Transparenz hat; sie wird auch als theme-color im Snippet genutzt.
  3. Größen — Die gewünschten Größen ankreuzen (Favicon 16/32, Apple 180, PWA 192/512 usw.).
  4. Herunterladen — Auf eine Vorschau klicken, um diese Größe als PNG zu laden, oder „Alle als ZIP herunterladen“ für alles auf einmal.
  5. Snippet — Den HTML-Block kopieren und in den <head> deiner Seite einfügen. Die PNGs auf deinen Server hochladen (z. B. /assets/icons/) und die Pfade im Snippet bei Bedarf anpassen.

Wo die Dateien hin

Ein übliches Setup:

  • Favicon- und Icon-PNGs in einen Ordner wie /assets/icons/ oder ins Root legen.
  • Im Snippet die href-Werte auf diese Pfade zeigen (z. B. /assets/icons/favicon-32x32.png).
  • Für PWA eine site.webmanifest mit denselben Pfaden zu den 192×192- und 512×512-Icons anlegen.

Kurz zusammengefasst

Der Favicon- und App-Icon-Generator erzeugt aus einem Logo alle nötigen Größen und einen fertigen Snippet für den <head>. Nutze ein quadratisches Bild in guter Auflösung, lade die PNGs herunter und füge den Snippet in dein Projekt ein.

  1. Lade ein quadratisches Bild hoch (PNG oder SVG, mind. 512×512 empfohlen).
  2. Wähle Hintergrundfarbe und welche Icon-Größen erzeugt werden (Favicon, Apple Touch, PWA).
  3. Klicke auf eine Vorschau, um jedes PNG herunterzuladen, und kopiere den HTML-Snippet in den <head> deiner Seite.

Häufig gestellte Fragen

Mindestens 512×512 Pixel für beste Qualität. Quadratische Bilder eignen sich am besten; das Tool skaliert und zentriert dein Logo.

Standard-Favicons: 16×16 und 32×32. Apple: 180×180. PWA: 192×192 und 512×512. Unser Snippet enthält diese.

Nein. Alles läuft in deinem Browser. Dein Logo verlässt dein Gerät nicht.

Verwandte Tools

Instagram- und TikTok-Hashtag-Generator PDF zusammenführen YouTube Channel-ID Finder JSON / YAML / TOML Konverter

Dieses Tool wird ausschließlich für den persönlichen und schulischen Gebrauch bereitgestellt. Wir hosten oder speichern keine Benutzerinhalte oder Mediendateien auf unseren Servern. Die gesamte Verarbeitung erfolgt lokal in Ihrem Browser. Wir sind weder mit noch von einem der genannten sozialen Netzwerke, Plattformen oder Unternehmen unterstützt oder verbunden. Die Nutzung dieses Dienstes erfolgt auf eigene Verantwortung und im Einklang mit den Nutzungsbedingungen der jeweiligen Plattform.