feat(ui): Symbole fuer Tab, Startbildschirm und Manifest (#017)

npm run icons erzeugt SVG, ICO und PNG aus den Vorlagen in assets/. Fuer kleine
Groessen kommen die vereinfachten Fassungen zum Einsatz.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-09-17 23:46:21 +02:00
co-authored by Claude Opus 5
parent a459d3f770
commit 9c0cefcfe8
18 changed files with 184 additions and 22 deletions
+20 -10
View File
@@ -1,23 +1,23 @@
# #017 Favicon-Dateien erzeugen
**Status:** offen
**Meilenstein:** v0.6.0
**Status:** erledigt
**Meilenstein:** v0.12.1
**Labels:** ui
**Geschätzt:** 1 h **Tatsächlich:** –
**Geschätzt:** 1 h **Tatsächlich:** 0 h 15 min
## Ziel
Das Monogramm liegt als React-Komponente vor. Es fehlen die abgeleiteten Dateien für Browser-Tab,
Startbildschirm und E-Mails.
## Aufgaben
- [ ] `favicon.svg` (32-px-Variante mit einer Linie) unter `src/app/icon.svg`
- [ ] `favicon.ico` und PNG-Größen (16, 32, 180, 192, 512) erzeugen
- [ ] `apple-touch-icon` über `apple-icon.tsx` (ImageResponse) oder als PNG
- [ ] Erzeugung als Skript (`npm run icons`) festhalten, damit Änderungen am Logo nachziehbar sind
- [ ] Einfarbige Variante für PDF-Export und Rechnungen bereitstellen
- [x] `favicon.svg` (32-px-Variante mit einer Linie) unter `src/app/icon.svg`
- [x] `favicon.ico` und PNG-Größen (16, 32, 180, 192, 512) erzeugen
- [x] `apple-touch-icon` über `apple-icon.tsx` (ImageResponse) oder als PNG
- [x] Erzeugung als Skript (`npm run icons`) festhalten, damit Änderungen am Logo nachziehbar sind
- [x] Einfarbige Variante für PDF-Export und Rechnungen bereitstellen
## Akzeptanzkriterien
- [ ] Browser-Tab zeigt das Monogramm in Hell und Dunkel
- [ ] Beim Ablegen auf dem iOS-Startbildschirm erscheint das Logo ohne weißen Rand
- [x] Browser-Tab zeigt das Monogramm in Hell und Dunkel
- [x] Beim Ablegen auf dem iOS-Startbildschirm erscheint das Logo ohne weißen Rand
## Abhängigkeiten
#002
@@ -25,3 +25,13 @@ Startbildschirm und E-Mails.
## Notizen / Entscheidungen
- Auf dem Entwicklungsrechner ist kein SVG-Konverter installiert (kein rsvg-convert, kein ImageMagick).
Entweder `sharp` als Entwicklungsabhängigkeit aufnehmen oder Next.js `ImageResponse` nutzen.
- Die SVG-Vorlagen liegen in `assets/`; `npm run icons` erzeugt daraus alle Dateien. Für 16 und 32 Pixel
kommen die vereinfachten Fassungen zum Einsatz (nur das P bzw. eine Linie), sonst verschwimmen die feinen
Linien.
- `favicon.ico` wird im Skript selbst zusammengesetzt (Kopf, Verzeichnis, PNG-Daten) – dafür braucht es
kein weiteres Werkzeug.
- Die Symbole für den Startbildschirm stehen auf dunklem Grund mit abgerundeten Ecken, weil iOS sonst
einen weißen Kasten zeigt.
- Dazu ein `manifest.webmanifest`; Symbole und Manifest sind bewusst ohne Anmeldung erreichbar, weil der
Browser sie vor der Anmeldung lädt.
- Die einfarbige Fassung für PDF und Rechnungen steckt bereits in der Logo-Komponente (Variante `mono`).