gemacht für den Launch-Tag
Bild online in ein Icon umwandeln
OneImageTool macht aus einem Logo, Avatar, Maskottchen oder Produktzeichen die Icon-Dateien, die eine echte Website oder App braucht. Bild hochladen, in ein sauberes Quadrat bringen, in Browser-Tabs und auf mobilen Startbildschirmen prüfen und dann favicon.ico, PNG-Icons, Apple-Touch-Icon-Dateien und ein PWA-Manifest speichern. Braucht die Quelle noch Feinschliff, schneide sie zuerst quadratisch zu oder komprimiere einen zu großen Export — beide Tools laufen ebenfalls im Browser.
Alles läuft in deinem Browser. Das zählt, wenn die Quelle ein vertrauliches Kundenlogo, ein noch unveröffentlichtes App-Zeichen oder eine schnelle Idee ist, die du keinem fremden Server anvertrauen willst. Stell Innenabstand, Hintergrundfarbe und Eckenradius ein, während die Gerätevorschauen live mitlaufen.
Favicon für Websites
Erzeuge aus derselben Quelle ein Tab-Symbol. Nimm „Beschneiden“ für ein markantes Zeichen oder „Einpassen“ mit Innenabstand, wenn das Logo Luft braucht.
ICO für Verknüpfungen
Lade eine ICO-Datei mit mehreren Größen für ältere Favicon-Unterstützung und Desktop-Verknüpfungen. Die kleinen Größen sind so abgestimmt, dass sie in der Tab-Vorschau scharf bleiben.
App- und PWA-Icons
Erzeuge größere PNG-Formate für Startbildschirme und Installationsdialoge. Im Paket stecken ein fertig konfiguriertes Web-Manifest und ein HTML-Schnipsel.
Vorschau auf mehreren Geräten
Anders als reine Tab-Vorschauen zeigt OneImageTool Mockups für iOS-Startbildschirm, Android-Installationsbanner und Windows-Kachel — alle aktualisieren sich live beim Bearbeiten.
ein Download, viele Oberflächen
Was der Bild-zu-Icon-Konverter erzeugt
Ein guter Ablauf gibt dir nicht bloß eine winzige Grafik. Landingpages, Doku, Apps, PWAs und Nebenprojekte brauchen mehrere Dateien plus HTML-Schnipsel. Den browsertauglichen Satz bekommst du in einem ZIP.
Im Paket stecken favicon.ico, die gängigen PNG-Größen, ein Web-Manifest, ein HTML-Schnipsel und eine README — genug für die übliche Website- und PWA-Einrichtung.
- favicon.icoICO
- favicon-16x16.png … 512x512.pngPNG
- apple-touch-icon.pngiOS
- android-chrome-192x192.pngPWA
- site.webmanifestJSON
- favicon-html.txtHTML
- README.txtDOC
fünf kleine Handgriffe
So nutzt du den Bild-zu-Icon-Konverter
Hochladen
Zieh ein PNG, JPG, WebP oder SVG hinein. Quadratische Quellen passen am besten, breite Bilder gehen aber auch.
Form wählen
Nimm Einpassen, Beschneiden oder Verzerren. Die Vorschauen für Browser, iOS und Android ziehen sofort nach.
Gestalten
Ergänze Innenabstand, runde die Ecken, behalte die Transparenz oder wähle eine einfarbige Fläche.
Prüfen
Sieh dir den 16-px-Tab und die Startbildschirm-Mockups an. Ist das Tab-Symbol unlesbar, hilft mehr Innenabstand oder ein einfarbiger Hintergrund.
Herunterladen
Speichere das komplette Icon-Paket mit favicon.ico, PNG-Dateien, Manifest, HTML-Schnipsel und README.
von winzig bis installierbar
Die besten Größen für Icon-Ausgaben
Icons tauchen an sehr verschiedenen Stellen auf. Ein Browser-Tab braucht ein markantes Zeichen fast ohne Details. Ein PWA-Installationsdialog verträgt ein größeres Motiv. Dieser Konverter erzeugt aus einer Quelle jede gängige Größe.
| Größe | Typischer Einsatz | Vorschau im Tool | Tipp |
|---|---|---|---|
| 16×16 | Browser-Tabs, altes Favicon | Browser-Tab-Mockup | Kräftige Silhouette, kaum Details |
| 32×32 | Modernes Favicon-PNG, HD-Tabs | Größenraster | Praktischer Standard im Favicon-HTML |
| 48×48 | Desktop-Verknüpfungen, Windows-Kacheln | Windows-Kachel-Mockup | Die Form mittig halten |
| 180×180 | Apple Touch Icon | iOS-Startbildschirm-Mockup | Einfarbiger Hintergrund wirkt unter iOS oft sauberer |
| 192×192 | Android Chrome, PWA | Android-Installations-Mockup | Wird in den Icons der manifest.json genutzt |
| 512×512 | PWA-Startbild, Installationsdialog | Größenraster | Starte mit einer hochwertigen Quelle |
auch winzig noch klar
Gestaltungs-Checkliste vor dem Download
Favicons sind klein — dünne Linien, winzige Schrift, unruhige Fotos und Screenshots verschwimmen leicht. Prüf die Lesbarkeit mit den Live-Vorschauen für Tab und Startbildschirm, bevor du exportierst.
Ist die 16-px-Vorschau schwer zu erkennen, probier einen beherzteren Ausschnitt, mehr Innenabstand oder einen einfarbigen Hintergrund. Zentrierte Formen mit klarem Kontrast überstehen den Sprung vom großen Bild zum Icon deutlich besser.
Schlichte Logos, flächige Maskottchen, quadratische Zeichen, kräftige Initialen und kontraststarke Symbole.
Detailreiche Fotos, dünne Umrisse, Screenshots, lange Wörter und Motive, die den Rand berühren.
einfügen und ausliefern
Wohin die erzeugten Icon-Dateien gehören
Bei statischen Seiten legst du die Dateien ins öffentliche Wurzelverzeichnis oder in einen Asset-Ordner, der mit ausgeliefert wird. Den HTML-Schnipsel fügst du in den <head> ein. Halte die Favicon-Adressen nach dem Start stabil, damit Lesezeichen und installierte Verknüpfungen dasselbe Icon behalten.
Favicon-Caches sind beim Testen hartnäckig — nimm ein privates Fenster oder benenne die Dateien während der Versuche um.
public/
├── favicon.ico
├── favicon-32x32.png
├── apple-touch-icon.png
├── android-chrome-192x192.png
├── android-chrome-512x512.png
└── site.webmanifest