Free Icon Generator — Launch auf Product Hunt
Heute habe ich den Free Icon Generator auf Product Hunt gelauncht. Es ist ein clientseitiges Tool, das aus einem einzigen Bild komplette Icon-Bundles für alle relevanten Plattformen erzeugt — Web, iOS, Android, macOS, Windows, PWA und Social Media. Kein Backend, kein Account, läuft komplett im Browser.
Das Problem
Jedes Mal, wenn ich für ein neues Projekt Icons brauchte, war es derselbe nervige Workflow: Logo in Photoshop oder Figma öffnen, manuell auf 16×16, 32×32, 192×192, 512×512 exportieren, dann nochmal für iOS in 20 verschiedenen Größen mit @1x/@2x/@3x, dann Android-Densities (mdpi, hdpi, xhdpi, xxhdpi, xxxhdpi), dann manifest.json zusammenbasteln, dann ICO-Datei erzeugen weil der Browser nur das mag, dann Open-Graph-Bild in 1200×630, dann Apple Touch Icon in 180×180…
Das alles für ein einziges Logo. Pro Projekt.
Es gibt Online-Tools, die einen Teil davon können, aber sie wollen entweder Geld, oder einen Account, oder schicken dein Bild auf einen fremden Server. Für ein Logo, das du noch gar nicht öffentlich zeigst, ist das eine seltsame Wahl.
Also habe ich angefangen, mir selbst eines zu bauen.
Was es kann
Der Generator hat zwei Modi: Quick Convert für 90% der Fälle, und einen Visual Editor für Designer, die Icons direkt im Tool gestalten wollen.
Quick Convert — der primäre Workflow
Auf der Landingpage: Bild reinziehen, Format aussuchen, ZIP herunterladen. Das war’s.
ICO, PNG (16, 32, 48, 64, 96, 128, 192, 256, 384, 512), site.webmanifest — der komplette klassische Web-Stack.
Alle Sizes von 20pt bis 1024pt (App Store), inklusive @1x/@2x/@3x-Varianten und passender Contents.json.
mdpi, hdpi, xhdpi, xxhdpi, xxxhdpi plus Play-Store-Icon 512×512.
Alle Manifest-Sizes (72, 96, 128, 144, 152, 192, 384, 512) plus generierte manifest.json mit den korrekten Pfaden.
Open Graph (1200×630), Twitter Card (1200×600), Instagram (1080×1080), LinkedIn Banner (1584×396).
Small (70×70), Medium (150×150), Wide (310×150), Large (310×310) für Windows-PWA-Manifeste.
Beliebige Größe von 16 bis 1024 Pixel — wenn man nur ein bestimmtes Icon braucht.
Der ZIP-Download enthält alle Dateien sauber benannt und in der Ordnerstruktur, die das jeweilige Framework erwartet. Bei iOS bekommt man ein direkt in Xcode importierbares Contents.json. Bei PWA eine fertige manifest.json. Bei Favicons die HTML-Snippets, die in den <head> müssen.
Visual Editor (Alpha, nur Desktop)
Wer Icons nicht aus einem fertigen Logo generieren will, sondern direkt im Tool gestalten möchte, bekommt einen vollständigen layer-basierten Editor — gebaut auf Konva.js.
Shapes (Rechteck, Kreis, Polygon), Lucide-Icons (1400+ verfügbar), Text mit Google-Fonts-Integration, Bilder, Gradienten.
Grid, Zoom, Pan (Space + Drag), Snap-to-Grid und Snap-to-Center, Guides, Rulers.
Transform, Fill und Stroke, Opacity, Blend Modes, Schatten — alles was man von Figma kennt, nur fokussiert auf Icon-Größen.
HSL/HEX-Picker, Gradient-Editor, 5 voreingestellte Paletten plus eigene speicherbar.
Live-Vorschau auf iPhone, Android, Browser-Tab, macOS-Dock und Windows-Taskleiste — gerendert mit Three.js.
Undo/Redo, Copy/Paste, Duplicate, Delete, Nudge mit Pfeiltasten, Select All. Wie ein nativer Editor.
Mobile Nutzer werden auf die Quick-Convert-Landingpage umgeleitet — der Editor braucht Bildschirmplatz, den Touch-Geräte nicht haben.
Autosave und Project Files
Der Editor speichert automatisch in IndexedDB. Beim nächsten Öffnen wird gefragt, ob die letzte Session wiederhergestellt werden soll. Wer Projekte teilen oder versionieren will, kann sie als .icon-project.json exportieren und später importieren.
Stack
Ein paar technische Highlights für die, die wissen wollen, was unter der Haube steckt:
Modernster React-Stack mit Vite als Build-Tool. Component Router-frei — die ganze App ist eine SPA mit useState-basierter Navigation.
CSS-First-Konfiguration über @theme-Blöcke. Keine tailwind.config.js. Custom-Farben und Tokens leben im global.css.
Performanter 2D-Canvas mit Layer-Modell, das natürlich zu Icon-Design passt. Nicht zu verwechseln mit Fabric.js.
@react-three/fiber + @react-three/drei für die Device-Vorschauen. Gerendert in Echtzeit, reagiert auf Editor-Änderungen.
Die Bildverkleinerung und ZIP-Erstellung läuft in einem Worker, damit der Main Thread nicht blockiert wird, wenn man 30 Sizes auf einmal generiert.
Mehrsprachigkeit für DE und EN. Das Tool ist auf Deutsch und Englisch verfügbar — passende Sprache wird per Browser-Locale erkannt.
Alles clientseitig. Die Bilder verlassen niemals deinen Browser. Es gibt keinen API-Endpoint, keine Datenbank, kein Hosting für User-Daten. Was du hochlädst, bleibt bei dir.
Was als Nächstes kommt
Aktuell Alpha. Beta-Status sobald Multi-Select, Gruppierung und Layer-Reihenfolge per Drag-and-Drop stabil sind.
Aktuell prüft der Batch-Konverter Auflösung, Kontrast und Safe-Zone. Geplant: automatische Hintergrund-Entfernung für Logos auf farbigem Untergrund.
Apple Watch (38mm, 42mm, 44mm, 49mm), CarPlay, Apple TV. Auf der Roadmap, aber nur wenn echte Nutzer danach fragen.
Eine Node-CLI für CI/CD-Pipelines, die das gleiche kann wie der Browser-Generator. Genau das was Build-Tools brauchen.
Auf Product Hunt unterstützen
Wenn du das Tool nützlich findest, würde ich mich über einen Upvote auf Product Hunt freuen — der erste Tag dort ist entscheidend für die Sichtbarkeit, und je mehr Menschen es heute sehen, desto wahrscheinlicher hilft es jemandem, der genau diesen Workflow gerade braucht.
Links:
- free-icon-generator.com — Live-Tool
- Product Hunt — Launch-Seite