Blog / Icon Studio im Browser

Icon Studio — Logo & Favicon im Browser bauen, ohne CDN

Eine Werkstatt-Anleitung für alle, die ihr Branding nicht in Cloud-Tools verwalten wollen: warum browser-lokale Icon-Erstellung 2026 endlich praktikabel ist, wie die Render-Pipeline technisch funktioniert und in welchen Workflows Icon Studio den PWA Generator und den Favicon Generator perfekt ergänzt.

Von Jonathan Hedderich · veröffentlicht 25. Juni 2026 · Lesezeit ≈ 18 Minuten · Icon Studio direkt öffnen

TL;DR — Icon Studio kombiniert eine Hintergrund-Form (abgerundetes Quadrat, Kreis, Quadrat), ein Icon aus einer der vier eingebundenen Open-Source-Libraries (Font Awesome, Lucide, Simple Icons, Tabler) und zwei Farben zu einem fertigen Logo/Favicon. Render läuft auf der Canvas-API, Icons sind beim Build im JavaScript-Bundle, kein CDN-Request zur Laufzeit. Export liefert ein ZIP mit allen gängigen Favicon- und PWA-Größen plus manifest-snippet.json. Wer ein vollständiges Plattform-Bundle (iOS AppIcon.appiconset, Android-Mipmap) braucht, kettet das Ergebnis in den PWA Generator.

Warum browser-lokale Icon-Generierung 2026 endlich Sinn ergibt

Zehn Jahre lang war die Standard-Antwort auf "Ich brauche ein Favicon" entweder Photoshop (zu schwer, Account-pflichtig), Figma (Cloud, account-pflichtig) oder eines der Online-Favicon-Tools. Letztere sind meist großartig in der Bedienung — aber sie laden vom Login bis zum Export hunderte externer Tracking- und Asset-Pixel. Wer am Wochenende auf dem Sofa fünf Favicon-Iterationen probiert, übermittelt fünfmal sein Sitzungsverhalten an drei verschiedene Analytics-Anbieter. Das war 2016 noch akzeptabel, weil keine Alternative existierte. 2026 ist es das nicht mehr.

Drei Browser-Technologien haben sich in den letzten Jahren so weit entwickelt, dass eine vollwertige Icon-Werkstatt rein lokal lauffähig ist: die Canvas-API für pixelgenaues Rendering bis 512 × 512 (und darüber), WebAssembly für hochkomprimierte PNG-Encoder, und vor allem ein leistungsfähiges Tree-Shaking in modernen Bundlern wie Webpack und Turbopack. Letzteres ist der unscheinbare Hero der Geschichte: Es erlaubt, ein npm-Paket wie react-icons ins Projekt zu nehmen, das 30 000 Icons umfasst, und am Ende nur die explizit importierten 154 Icons im Production-Bundle zu haben. Vor zehn Jahren hätte das jeden Browser zum Absturz gebracht.

„The browser is now powerful enough to be a real design environment for small, well-scoped tasks. We just have to stop pretending we need the cloud for everything."
— Surma, Web-Plattform-Engineer (DotJS 2024)

Die drei Bausteine eines guten App-Icons

Bevor wir in die Technik gehen, ein kurzer Designblick. Ein gutes App-Icon — egal ob Favicon, PWA-Icon oder native iOS-Touch-Icon — besteht in 95 % der Fälle aus drei Schichten:

Hintergrund-Form (Container): eine geometrische Silhouette, die das Icon vom Untergrund abgrenzt. Üblich: abgerundetes Quadrat (Squircle), Kreis, scharfes Quadrat.
Symbol (Glyph): das eigentliche Bedeutungsträger-Element. Bei großen Marken ein Logo oder Buchstabe, bei kleineren Apps oft ein generisches Symbol-Icon.
Farb-Kontrast: Hintergrund- und Symbol-Farbe sollten einen Helligkeitsunterschied von mindestens WCAG-AA-Niveau (Kontrast-Ratio ≥ 4.5:1) haben, damit das Icon auch in 16 × 16 noch erkennbar ist.

Susan Kare hat das 1983 für den Macintosh perfektioniert (siehe Beitrag PWA & App-Icons-Geschichte). Alle drei Prinzipien sind gleichermaßen 2026 gültig — und sie sind exakt die drei Variablen, die Icon Studio konfigurierbar macht.

Die Architektur — wie der Studio rendert

Wer wissen will, was unter der Haube passiert, hier die Render-Pipeline in fünf Stufen:

Stufe	Was passiert	Wo im Code
1. State-Capture	UI-State (Shape, Farben, Icon-Slug, Icon-Größe) wird in React-Hooks gehalten	components/tools/IconStudio.tsx
2. Icon → SVG-String	`renderToStaticMarkup` baut aus der react-icons-Komponente einen SVG-String, in dem `fill="currentColor"` mit der gewählten Icon-Farbe ersetzt wird	react-dom/server
3. SVG → Blob-URL	`new Blob([svg], {type:"image/svg+xml"})` und `URL.createObjectURL` erzeugen eine browser-interne URL — kein Netz	useEffect mit Cleanup
4. Canvas-Composite	Erst Hintergrund-Path (Squircle/Kreis/Rect), dann Icon per `drawImage()` zentriert obendrauf	drawTo()-Callback
5. Export → PNG-Blob	`canvas.toBlob(callback, "image/png")` pro angewählter Größe, gebündelt mit jszip	exportZip()

Der entscheidende Schritt ist Stufe 2. Die meisten Browser-Tools, die Icons auf Canvas zeichnen wollen, müssen entweder Path-Daten hand-tippen oder eine externe SVG-Datei laden. renderToStaticMarkup ist eine elegantere Lösung: react-icons gibt eine ganze Komponenten-API, die in SSR-Manier zu statischem SVG-Markup gerendert wird. Das funktioniert für JEDE react-icons-Komponente, ohne dass man pro Icon Sonderfälle programmieren muss.

Hier ein vereinfachtes Beispiel aus der Implementierung:

import { renderToStaticMarkup } from "react-dom/server";
import { LuStar } from "react-icons/lu";

const svgMarkup = renderToStaticMarkup(
  <LuStar color="currentColor" />
);

const wrapped = svgMarkup.replace(
  /<svg/, '<svg xmlns="http://www.w3.org/2000/svg" fill="#d4a017"'
);

const blob = new Blob([wrapped], { type: "image/svg+xml" });
const url = URL.createObjectURL(blob);

const img = new Image();
img.onload = () => ctx.drawImage(img, 50, 50, 200, 200);
img.src = url;

Die vier eingebundenen Icon-Libraries und ihre Persönlichkeit

Icon-Bibliotheken sind nicht austauschbar. Sie haben jeweils einen eigenen visuellen Charakter und decken unterschiedliche Anwendungsfälle ab. Icon Studio bündelt vier komplementäre Sammlungen:

Font Awesome Solid (CC-BY 4.0)

Die OG. Seit 2012 das de-facto-Standard-Icon-Set des Webs. Solid bedeutet: alle Icons sind vollflächig gefüllt — das macht sie auf jedem Größenformat (16 px bis 1024 px) gleich gut erkennbar. Im Studio ist sie der sichere Startpunkt: Wenn du nicht weißt, was du brauchst, schau hier zuerst. Im Studio dabei: Home, User, Cog, Heart, Star, Search, Camera, Image, Music, Play, Pause, Bookmark, Envelope, Phone, MapMarker, Calendar, Clock, ShoppingCart, CreditCard, Shield, Lock, Key, Bolt, Fire, Trophy, Gem, Code, Terminal, Cloud, Sun, Moon, Leaf, Tree, Car, Plane, Bicycle, Coffee, Pizza, Utensils, Gamepad, PaintBrush, Palette, Briefcase, ChartLine, ChartBar, Rocket, PaperPlane.

Lucide (ISC)

Der Modernisierungsschritt. Ursprünglich als Fork von Feather Icons gestartet, mittlerweile mit über 1000 Icons. Visuell: dünne Striche, konsistente 24-px-Grid, sehr „designisch". Wenn dein Brand modern und minimal wirken soll — Lucide. Stand 2026 das gefühlt am häufigsten verwendete Icon-Set in neueren React- und Svelte-Projekten.

Simple Icons (CC0)

Hier kommen die Marken-Glyphen rein. GitHub, Apple, Google, Vercel, Next.js, React, TypeScript, Python, Docker, Figma, Notion, Slack, Discord — alle in den offiziellen Brand-Farben (im Studio durch unsere Icon-Color-Wahl überschrieben). Wichtiger juristischer Hinweis: Die CC0-Lizenz gilt nur für den Glyph selbst. Marken-Rechte der Inhaber bleiben unberührt. Wer ein GitHub-Icon in seinem App-Icon einbaut und damit suggeriert, von GitHub autorisiert zu sein, hat ein juristisches Problem — unabhängig davon, wo das Bildchen herkommt.

Tabler (MIT)

Konsistenter Stroke-Style, 1.5-px-Linienstärke quer durch die ganze Sammlung. Tabler ist besonders stark bei UI-Symbolen (Check, X, Alert, Info), bei Device-Icons (Mobile, Laptop, Desktop) und bei API-/Tech-Symbolen (Server, Database, Cloud-Upload). Wenn dein Branding etwas mit Software und Daten zu tun hat — Tabler.

Shape-Strategie: welche Form wann?

Die drei eingebauten Shapes sind nicht beliebig austauschbar. Sie tragen Bedeutung:

Abgerundetes Quadrat (Squircle). Der Defacto-Standard 2026. iOS, macOS und Windows 11 zeigen App-Icons als Squircle. Der Eckenradius von rund 22 % entspricht Apples Vorgabe. Wenn du nur EIN Icon erstellen willst, das auf möglichst vielen Plattformen funktioniert — Squircle.
Kreis. Visuell „freundlicher", aber weniger Platz fürs Icon (effektiv etwa 78 % der Quadrat-Fläche nutzbar). Gut für Profilbild-artige Icons, für Audio-Apps, für Lifestyle-Marken. Auf Android wird das Icon je nach Launcher-Maske oft sowieso rund dargestellt.
Scharfkantiges Quadrat. Wirkt am professionellsten und „erwachsenen". Gut für B2B-Apps, Finanz-Apps, Tools. Achtung: Wenn das Icon auf iOS landet, wird es vom System trotzdem zum Squircle beschnitten — du verlierst dann etwas Inhalt an den Ecken.

Wer's strenger braucht: für Android empfehle ich, nach dem Icon-Studio-Export das Ergebnis durch den PWA Generator zu schicken. Der erzeugt aus dem Squircle automatisch ein Maskable Icon mit 10 % Safe-Zone — siehe Lexikon-Eintrag Maskable Icon für den Hintergrund.

Workflow: vom leeren Canvas zum Production-Asset in unter drei Minuten

Hier eine ehrliche Schritt-für-Schritt-Anleitung. Tatsächlich gemessen am Mittwochabend: 2 Min 41 Sek vom Tool-Aufruf bis zum entpackten ZIP auf dem Desktop. Anwendungsfall: Favicon für einen Side-Project-Blog.

Tool öffnen

Öffne das Icon Studio unter /tools/icon-studio im Browser.

Form wählen

Wähle eine Hintergrund-Form: abgerundetes Quadrat (Squircle), Kreis oder Quadrat.

Farben setzen

Setze Hintergrund- und Icon-Farbe per Color-Picker oder Hex-Code.

Icon auswählen

Wechsle eine Icon-Library (Font Awesome, Lucide, Simple Icons, Tabler), nutze die Live-Suche und klick das Wunsch-Icon an.

Größen festlegen

Aktiviere die Export-Größen, die du brauchst — Standard 16, 32, 48, 96 für Favicons, 180 für Apple-Touch, 192 und 512 für PWA.

ZIP exportieren

Klick auf 'Größen exportieren'. Du bekommst ein ZIP mit allen PNG-Dateien, einer manifest-snippet.json und einer README. Nichts wurde hochgeladen.

Wer das nicht glaubt, kann es selbst messen: jnrt.online/tools/icon-studio öffnen, Stoppuhr starten.

Was im exportierten ZIP wirklich drin ist

Das ZIP-Bundle ist bewusst minimalistisch — keine Marketing-Werbe-PDFs, keine versteckten Tracking-Pixel, keine Extra-Größen für Plattformen, die du nicht brauchst. Du bekommst exakt das:

icon-studio.zip
├── icons/
│   ├── favicon-16x16.png   ← Browser-Tab
│   ├── favicon-32x32.png   ← Browser-Tab, hochauflösend
│   ├── favicon-48x48.png   ← Windows-Site-Tile, Legacy
│   ├── favicon-96x96.png   ← Android-Chrome, Default
│   ├── apple-touch-icon.png ← iOS-Homescreen (180×180)
│   ├── icon-192.png        ← PWA-Manifest, Standard
│   └── icon-512.png        ← PWA-Manifest, Splash-Screen
├── manifest-snippet.json   ← in deine manifest.json kopieren
└── README.txt              ← Setup-Hinweise

Das manifest-Snippet ist bewusst nur ein Teil-JSON — Icon Studio kennt deinen App-Namen, deine Theme-Farbe und deinen Start-URL nicht. Wer den vollständigen Manifest-Wizard will, geht dafür zum PWA Generator.

Wo Icon Studio aufhört und andere Werkzeuge übernehmen

Werkzeuge sind dann am besten, wenn sie eine Sache gut machen und sich für den Rest mit anderen Werkzeugen vertragen. Drei Tool-Übergaben, die in der Praxis sinnvoll sind:

Icon Studio → PWA Generator

Wenn du Native-App-Bundles (iOS AppIcon.appiconset für Xcode, Android-Mipmap-Densities für Android Studio) brauchst, ist das die Königs-Route. Icon Studio gibt dir die 512×512-Quelle, der PWA Generator macht daraus 18 iOS-Größen plus die kompletten Mipmap-Buckets plus die Adaptive-Icon-XMLs. In Kombination sind die beiden ein vollständiger Branding-Workflow.

Icon Studio → Favicon Generator

Der Favicon Generator verpackt das 32×32-PNG in einen klassischen .ico-Container, der bei manchen älteren Browsern und CMS-Systemen für maximale Kompatibilität noch verlangt wird. Icon-Studio liefert das PNG, Favicon-Generator das ICO.

Farbpalette → Icon Studio

Umgekehrte Richtung: Wer schon ein Foto oder Logo hat und daraus die Brand-Farben extrahieren will, jagt das Bild durch die Farbpalette-Extraktion. Die liefert HEX-Codes, die du eins-zu-eins in Icon Studio einsetzen kannst. So sicherst du visuelle Konsistenz zwischen einer existierenden Marke und einem neu generierten Favicon.

Datenschutz und Verifizierbarkeit

Das wichtigste Argument für browser-lokale Werkzeuge ist nicht Geschwindigkeit oder Kostenlosigkeit — es ist die strukturelle Privatsphäre. Bei Cloud-Tools musst du dem Anbieter vertrauen, dass er deine Designs nicht analysiert, weiterverkauft oder durch dritte Compliance-Schichten schickt. Bei einem Tool wie Icon Studio kannst du die Privatsphäre verifizieren.

Konkret: Öffne die DevTools (F12), wechsle in den Netzwerk-Tab, lade das Icon Studio neu und klicke dich einmal komplett durch deinen Workflow. Du wirst sehen:

Requests an jnrt.online für das HTML, das CSS und die JS-Chunks
Bei aktivem Werbe-Consent: Requests an googlesyndication.com für AdSense
Bei aktivem Statistik-Consent: einen GTM-Request
Beim Cookie-Banner-CMP: fundingchoicesmessages.google.com
Nichts während des eigentlichen Icon-Bauens. Keine Anfrage zu CDNs, keine Pixel-Tracker, keine Asset-Server

Wer es noch strenger will: Lehne im Cookie-Banner alle optionalen Kategorien ab. Dann verschwinden auch AdSense und GTM aus der Netzwerk-Anzeige. Du kannst diesen Zustand jederzeit auf der Seite /consent-status live nachprüfen.

Zukunft: was als nächstes kommen könnte

Icon Studio ist in seiner ersten Version bewusst eng gefasst. Drei Erweiterungen sind technisch realistisch und könnten in den nächsten Monaten kommen:

Maskable-Variante direkt im Export. Aktuell musst du dafür den PWA-Generator hintendran hängen. Ein "Maskable"-Checkbox im Export-Panel würde die 192- und 512-PWA-Größen mit 10-% Safe-Zone-Padding ausgeben.
Mehr Shapes. Diamant, Hexagon, Stern — alles per Path2D programmierbar, kein Architektur-Aufwand.
Gradient-Hintergründe. Statt einer einzelnen Hintergrund-Farbe ein linearer oder radialer Gradient. Würde besonders bei „Premium"-Apps gut wirken.

Wer eine dieser Erweiterungen besonders dringend braucht, schreibt mir kurz über die Kontakt-Seite. Das hilft bei der Priorisierung.

Häufige Fragen

Die häufigsten Fragen aus der ersten Woche nach Release — mit ehrlichen Antworten:

+Warum überhaupt ein lokales Icon-Studio, wenn es Canva oder Figma gibt?

Canva und Figma sind großartige Werkzeuge — aber sie laden hunderte externe Assets, tracken Nutzungsverhalten und benötigen Account-Login. Für eine Favicon-Iteration mit 5 Versionen am Sonntagabend ist das wie eine Kanone, um einen Spatz zu erschießen. Ein browser-lokales Studio braucht nichts davon und liefert das Asset trotzdem in unter 60 Sekunden.

+Sind die eingebundenen Icon-Bibliotheken wirklich kommerziell nutzbar?

Ja. Font Awesome Solid (CC-BY 4.0, Namensnennung in Credits genügt für die meisten Fälle), Lucide (ISC — sehr permissive), Simple Icons (CC0 — keine Bedingungen für Marken-Glyphen selbst, aber Marken-Schutz der Inhaber gilt natürlich) und Tabler (MIT) — alle vier sind für kommerzielle Nutzung freigegeben. Bei Marken-Icons (Simple Icons) gilt: Die Lizenz erlaubt das Verwenden des Glyphs, ersetzt aber keine Marken-Erlaubnis vom Markeninhaber.

+Warum nicht einfach react-icons zur Laufzeit per Skript einbinden?

Macht react-icons gar nicht. Das npm-Paket wird beim Build von Tree-Shaking-fähigen Bundlern (Webpack, Turbopack) durchsucht und nur die explizit importierten Icon-Komponenten landen im JavaScript-Bundle. Bei JNRT Pixel sind das die in lib/icon-catalog.tsx aufgeführten ~154 Icons. Der Rest bleibt auf der Festplatte — und zur Laufzeit wird ohnehin nichts nachgeladen.

+Welche Form ist am besten — Squircle, Kreis oder Quadrat?

Hängt von der Plattform ab, auf der das Icon am häufigsten erscheint. iOS, macOS und Windows 11 zeigen Squircles. Android lässt den Launcher entscheiden — daher dort am besten Maskable Icons mit 10% Safe-Zone. Auf dem Web ist alles möglich; Squircle wirkt am freundlichsten, Quadrat am professionellsten, Kreis am verspielten. Wenn du nur EINE Variante bauen kannst, wähle Squircle — sie funktioniert auf allen Plattformen.

+Was ist mit Maskable Icons für Android?

Aktuell exportiert das Icon Studio Standard-Quadrate. Für saubere Android-Adaptive-Icons mit 10% Safe-Zone empfehle ich, das exportierte Icon anschließend durch den PWA Generator zu schicken — dort werden Maskable Varianten (192 und 512 mit Sicherheits-Padding) automatisch erzeugt. Die beiden Werkzeuge ergänzen sich.

+Wie sehe ich, ob beim Laden wirklich nichts zu einem CDN geht?

Öffne die DevTools (F12), wechsle in den Netzwerk-Tab und filtere nach Domain. Beim Icon-Studio-Aufruf darfst du nur Requests zur jnrt.online-Domain sehen (HTML, CSS, JS-Chunks) — und gegebenenfalls Anzeigen-Requests von googlesyndication.com, falls du Marketing-Consent erteilt hast. Keinerlei Requests zu fonts.googleapis.com, cdn.fontawesome.com, simpleicons.org oder ähnlichen Domains.

Fazit

Icon Studio ist ein bewusst kleines Werkzeug. Es ersetzt kein professionelles Branding-Setup, das ein eigenständiges Vektor-Programm und einen erfahrenen Designer braucht. Aber es deckt die 80 % der Fälle ab, in denen du einfach nur schnell ein scharfes Icon brauchst — für ein Side-Project, einen internen Service, ein Bewerbungs-Portfolio. In drei Minuten. Ohne Account. Ohne CDN. Ohne dass irgendein Tracker mitliest. Wenn du das tatsächlich brauchst, ist das Tool für dich gebaut.

Direkt zum Icon Studio · PWA Generator für Plattform-Bundles · Klassischer Favicon-Generator mit ICO · PWA & App-Icons — die Geschichte

Über den Autor. Jonathan Hedderich ist Software-Engineer und Betreiber von JNRT Pixel. Er entwickelt browser-lokale Werkzeuge seit 2022, mit Fokus auf strukturelle Privatsphäre und messbare Performance. Kontakt über /kontakt.