Schritt‑für‑Schritt: Wie man eigene Symbole und Icons für Apps erstellt

Wenn du suchst, wie man eigene symbole und icons fuer apps erstellt, brauchst du präzise Antworten auf Fragestellungen wie: Welche Dateiformate? Welche Größen und Dichten? Wie generiere ich adaptive Icons für Android? Wie organisiere ich Asset‑Kataloge für Xcode? Dieses praktische How‑to konzentriert sich auf konkrete Schritte, nicht auf allgemeine Theorie.

1. Voraussetzungen und empfohlene Tools

• Vektor‑Editor: Figma, Adobe Illustrator oder Sketch (bevorzugt SVG‑Workflow).
• Raster‑Bearbeitung: Photoshop oder GIMP für Pixelbeispiele/Feinschliff.
• Export/Optimierung: SVGO/SVGO‑GUI (SVGOMG), ImageMagick für Batch‑Konvertierungen.
• Platform‑Tools: Android Studio (Asset Studio), Xcode Asset Catalogs, Tools für PWAs (manifest.json).

2. Design‑Regeln, die wirklich zählen

• Arbeite in Vektoren: Erstelle Hauptform in SVG; skaliert für alle Dichten ohne Qualitätsverlust.
• Kontrast & Readability: Teste Icons in 16–48px, nicht nur im großen Format.
• Pixel‑snap für Raster (falls Rastergrafik): Stelle sicher, dass horizontale/vertikale Konturen auf ganzen Pixeln sitzen, um Unschärfe zu vermeiden.
• Reduziere Details: App‑Icons müssen in kleinen Größen einfach erkennbar sein.

3. Technische Spezifikationen & Export‑Checklist

Wichtige Größen und Formate je Plattform:

• iOS (Xcode Asset Catalog): PNGs, ab 20×20 bis 1024×1024 (App Store). Erstelle alle AppIcon‑Sets in @1x, @2x, @3x. Nutze Xcode Asset Catalog zum Organisieren.
• Android: Adaptive Icons (foreground/background) als XML + PNG oder als XML SVG‑Layer. Exportiere ebenfalls PNGs für mdpi/xhdpi/xxhdpi/xxxhdpi. Verwende Android Studio → Image Asset / Asset Studio.
• Web / PWA: SVG für skalierbare UI‑Icons; PNGs für favicon (16, 32) und maskable icons (192, 512) in manifest.json.
• Windows: ICO oder PNG‑Sets; prüfe Microsoft Store Richtlinien.

Beispiel manifest.json (PWA maskable)

{
  "name": "Meine App",
  "icons": [
    {"src":"icon-512.png","sizes":"512x512","type":"image/png","purpose":"any maskable"}
  ]
}

4. Adaptive Icons (Android) korrekt erstellen

Adaptive Icons bestehen aus zwei Ebenen: foreground (SVG/PNG mit transparentem Hintergrund) und background (farbige Ebene oder Muster). Tipps:

• Arbeite in 108×108 dp (Vektorquelle) und exportiere die Ebenen separat.
• Behalte einen sicheren Rand (~10% Padding), damit Systemmasken nicht wichtige Teile abschneiden.
• Nutze Android Studio Asset Studio oder exportiere manuell: packe foreground/background in /res/mipmap‑*/.

5. Organisieren, Benennen und Versionieren

• Benennungsstandard: [email protected] (z. B. [email protected]) oder konforme Xcode/Android‑Benennung.
• Asset Catalogs: Xcode verwendet .xcassets; behalte Quelldateien (SVG) im Repo und generiere PNGs in CI.
• Versioniere Quelle: Lege SVGs und Figma‑Designs in Git (oder in einer Design‑Token Library) ab, nicht nur die exportierten PNGs.

6. Automatisierung & Batch‑Export

Für wiederholbare Builds automatisiere:

• Figma API oder figma-export zum Export aller Icons aus Figma.
• SVGO + ImageMagick oder rsvg-convert in CI zum Erzeugen von PNG‑Sets.
• Scripts: Beispiel (bash + ImageMagick):

  convert icon.svg -background none -resize 48x48 icon-48.png

7. Testen, Performance & Accessibility

• Test in realen Größen: Launcher, Settings, Notification (iOS) — prüfe Lesbarkeit bei 16–32px.
• Barrierefreiheit: Vergib sinnvolle alt‑Texte/Accessibility‑Labels (iOS VoiceOver, Android contentDescription).
• Performance: Verwende SVGs für UI‑Icons, PNGs nur wo nötig; minimiere Icon‑Dateigrößen mit SVGO und PNG‑Crunchern.

8. Lizenzierung & Rechtliches

• Eigenes Design vs. Icons aus Bibliotheken: Achte auf Lizenz (SIL, MIT, CC). Bei Bibliotheksicons (Font Awesome, Material Icons) prüfe Erlaubnis für App‑Icons.
• Markenrecht: Vermeide geschützte Logos/Symbole ohne Zustimmung.

9. Praktische Checkliste vor dem Release

1. SVG‑Quellen eindeutig benannt im Repo.
2. Alle iOS PNG‑Formate via .xcassets angelegt.
3. Android: Adaptive Icon foreground + background vorhanden und getestet.
4. PWA: maskable icon im manifest vorhanden.
5. Assets optimiert (SVGO/PNG‑Crush) und in CI automatisiert generiert.
6. Accessibility‑Labels gesetzt und Tests auf echten Geräten durchgeführt.

Fazit: Wenn du wie man eigene symbole und icons fuer apps erstellt praktisch umsetzen willst, arbeite von vektorbasierten Quellen, halte dich an Plattform‑Spezifika (adaptive Icons, Asset Catalogs, manifest.json) und automatisiere Exporte in der CI. So vermeidest du Fehlformate, unnötig große Dateien und Integrationsfehler beim App‑Release.

Weiterführende Links: Android Adaptive Icons, Apple HIG App Icons, Web App Manifest, SVGOMG (SVGO GUI).