So erstellst du schnell ein anständiges Icon für ein Hobbyprojekt ohne Figma und Designer

Kommt dir das bekannt vor: Du hast gerade dein MVP fertig poliert, Tests geschrieben, den Build eingerichtet, und dann braucht das Projekt ein Icon. Figma nur für ein einfaches Badge mit Gradient und Glyphe zu öffnen, fühlt sich nach zu viel Aufwand an. Blind im Code zu zeichnen oder zwielichtige Online-Konverter voller Werbung zu durchsuchen, ist auch nicht gerade verlockend.

Kürzlich bin ich auf das AppIcon Forge Repository gestoßen. Es ist ein leichtgewichtiges Open-Source-Web-Tool, das speziell für solche Momente entwickelt wurde. Es übernimmt die gesamte mühsame Arbeit beim Erstellen von quadratischen und abgerundeten Icons für mobile und Desktop-Anwendungen.

Was der Generator kann

Die Kernidee ist simpel: Entwicklern eine übersichtliche Oberfläche mit Schiebereglern und sofortiger Vorschau bieten, ohne die Komplexität von Vektorgrafik-Tools.

Hier sind einige Beispiele für das, was du mit nur wenigen Klicks zusammenstellen kannst:

Wenn ich die Funktionen genauer aufschlüssle, deckt der Service alle grundlegenden Anforderungen ab:

• Iconify-Katalog-Integration. Die Oberfläche bietet eine Suche in einer umfangreichen Datenbank mit Vektor-Icons mit über 200.000 Symbolen. Gib ein Schlüsselwort ein, wähle ein Glyphe und sieh es sofort auf einem Hintergrund in der Vorschau.
• Text- und Typografie-Unterstützung. Du kannst ein Logo aus einem oder zwei Buchstaben erstellen, die Schriftart, den Buchstabenabstand anpassen und Gradienten auf den Text anwenden.
• Eigene Assets hochladen. Wenn Standard-Icons nicht passen, kannst du eine lokale SVG- oder Rastergrafik einfügen.
• Hintergrundstil-Anpassung. Unterstützt lineare und radiale Verläufe, Schlagschatten mit Unschärfe, Rahmenbreite und -farbe sowie Eckenabrundung.

Der Projekt-Autor hat übrigens eine nützliche Warnung in der README bezüglich Schriftarten hinterlassen. Wenn du ein textbasiertes Icon generierst, verwendet die App möglicherweise standardmäßig die Systemschriftarten deines Betriebssystems. Für kommerzielle Veröffentlichungen ist es besser, auf offene Google Fonts umzusteigen, um Lizenzprobleme zu vermeiden.

So führst du das Projekt aus

Die einfachste Option ist, die fertige Version auf GitHub Pages zu öffnen und sofort mit dem Erstellen deines Assets zu beginnen. Keine Installation erforderlich.

Wenn du es vorziehst, solche Hilfsprogramme lokal zu halten oder eine Kopie in einem geschlossenen Netzwerk bereitzustellen, lässt sich das Projekt mit nur wenigen Befehlen starten.

Ausführung mit pnpm

Für lokale TypeScript- und Vite-Entwicklung:

# Клонируем репозиторий
git clone https://github.com/zhangyu1818/appicon-forge.git

# Переходим в папку проекта
cd appicon-forge

# Ставим зависимости
pnpm install

# Запускаем локальный dev-сервер
pnpm dev

Danach ist die Oberfläche in deinem Browser unter http://localhost:5173/appicon-forge/ verfügbar.

Ausführung in Docker

Falls du dich nicht mit Node.js und Paketmanagern auseinandersetzen möchtest, gibt es eine vorgefertigte Dockerfile:

git clone https://github.com/zhangyu1818/appicon-forge.git
cd appicon-forge

# Собираем и запускаем контейнер
docker build -t appicon-forge .
docker run -d --name=appicon-forge --restart=always -p 5173:80 appicon-forge

Oder über Docker Compose, falls du bereits eine Home-Service-Infrastruktur eingerichtet hast:

docker-compose up -d

Für welche Aufgaben es nützlich ist

Natürlich wird dieses Tool die Arbeit eines Grafikdesigners bei komplexem Branding nicht ersetzen. Aber für alltägliche Entwickleraufgaben ist es mehr als ausreichend:

• Schnelle Prototypen und Hobbyprojekte, die ein ordentliches Placeholder anstelle eines Standard-Weißquadrats benötigen.
• Interne Unternehmens-Tools und Admin-Panels, wo die Launch-Geschwindigkeit wichtiger ist als ein einzigartiger Stil.
• Erstellen von Favicons für Websites oder Icons für PWA-Manifeste.
• Gestaltung von Browser-Erweiterungen.

Das Projekt wird unter der permissiven MIT-Lizenz vertrieben. Der Code ist sauber und kompakt, sodass du das Repository forken und eigene Rastervorlagen oder spezifische Exportformate für iOS und Android hinzufügen kannst.