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
- Hochladen — Auf „Datei wählen“ klicken und dein Logo wählen (PNG oder SVG, quadratisch, 512×512 oder größer).
- Hintergrund — Hintergrundfarbe wählen, falls dein Logo Transparenz hat; sie wird auch als
theme-colorim Snippet genutzt. - Größen — Die gewünschten Größen ankreuzen (Favicon 16/32, Apple 180, PWA 192/512 usw.).
- Herunterladen — Auf eine Vorschau klicken, um diese Größe als PNG zu laden, oder „Alle als ZIP herunterladen“ für alles auf einmal.
- 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.webmanifestmit 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.