Icon Workshop1Lade dein Bild hoch
Beginne mit einem klaren Logo oder einem einfachen Zeichen. Ein quadratisches Bild eignet sich am besten.
Ein Bild. Jeder Bildschirm.
Generator für Favicons und App-Icons
Kleine Icons. Ein bleibender Eindruck.
Verwandle dein Bild in Website-Favicons, App-Icons und ein einsatzbereites Icon-Paket.
PNG ICO PWA
Erstelle dein Icon-Paket
Mach aus deinem Bild Favicons, App-Icons und mehr.
- 1Hochladen
- 2Anpassen
- 3Herunterladen
Bild hierher ziehen
PNG, JPG oder SVG · Bis zu 5 MB
Dein Bild wird im Browser verarbeitet und verlässt nie dein Gerät.
Passe dein Icon an
Stimme den Look für jeden Bildschirm ab.
Im Kontext ansehen(Bild hochladen, um dein Icon zu sehen)
Browser-Tab
×
https://example.com
iOS-Startbildschirm
Dein Icon hier
PWA / Android
Dein Icon hier
So erstellst du ein Favicon in 3 Schritten
Von einem Bild zu einem vollständigen Icon-Satz.
2Anpassen und Vorschau prüfen
Wähle Bildanpassung, Hintergrund und Innenabstand. Prüfe das Ergebnis in kleinen Größen.
3Herunterladen und zur Website hinzufügen
Exportiere dein Icon-Paket, lade die Dateien auf deine Website und füge die Icon-Links ins HTML ein.
Ein Logo, bereit für jeden Bildschirm
Sieh nach, wofür die erzeugten Dateien verwendet werden.
Website-Favicon
Meine Website×16 × 1632 × 32Icons mit 16 × 16 und 32 × 32 helfen Besuchern, deine Website in Tabs und Lesezeichen zu erkennen.
iPhone & iPad
Meine Website180 × 180Verwende ein Apple-Touch-Icon mit 180 × 180, wenn deine Website zum Startbildschirm hinzugefügt wird.
PWA & Android
App installieren192 × 192512 × 512192 × 192 und 512 × 512 sind gängige Bildgrößen für Web-App-Manifeste.
Was steckt in deinem Icon-Paket?
Ein gebrauchsfertiges Set von Icons für alle Plattformen.
- favicon.ico16 × 16, 32 × 32, 48 × 48, 256 × 256
- apple-touch-icon.png180 × 180
- icon-192.png192 × 192
- icon-512.png512 × 512
- site.webmanifestWeb-App-Manifest
Icons zur Website hinzufügen
Füge diese Links im <head> deines HTML ein.
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">Häufige Fragen
Was ist ein Favicon?
Ein kleines Bild, das deine Website in Browser-Tabs und Lesezeichen darstellt.
Welches Bildformat soll ich verwenden?
PNG eignet sich für transparente Logos. Du kannst auch JPG, WebP und sichere SVG-Dateien verwenden.
Kann ich ein nicht-quadratisches Bild verwenden?
Ja. Wähle Einpassen, Zuschneiden oder Strecken, um ein quadratisches Icon zu erstellen.
Warum sind mehrere Icon-Größen enthalten?
Browser und Startbildschirme nutzen unterschiedliche Größen. Kleine Icons bleiben in Tabs scharf; große eignen sich für App-Verknüpfungen.