Favicon- & PWA-Assets-Checkliste 2025 — Manifest/Icons/SEO‑Signale

Veröffentlicht: 18. Sept. 2025 · Lesezeit: 3 Min. · Von Unified Image Tools Redaktion

Noch immer fehlen auf vielen Seiten Manifest‑Einträge oder Icons. Typisch sind vier Fehler: zu wenige Größen, falsche Verweise auf lokalisierte Manifeste, nicht übereinstimmende Theme‑Farben und gemischte Pfade zwischen PWA und Favicon. Prüfen Sie in dieser Reihenfolge, um Auslassungen zu vermeiden.

1) Minimales Icon‑Set

• 16px/32px: Browser‑Tab/Bookmark (ggf. .ico)
• 192/512: für PWA‑Installation (PNG empfohlen)
• Für Safari „pinned tab“ eine einfarbige SVG‑Variante bereitstellen
• Sichtbarkeit von Transparenz/Abstand in Dark/Light praktisch prüfen

2) Lokalisierte Manifeste pro Locale

• Unter jedem Locale (z. B. /de/manifest.webmanifest) name/short_name/description übersetzen
• Prüfen, dass start_url und scope auf die Locale‑Root zeigen (unter /de nicht /en)
• Im HTML im jeweiligen Layout verlinken: <link rel="manifest" href="/de/manifest.webmanifest">

3) Theme‑Farbe und Konsistenz

• theme_color im Manifest und <meta name="theme-color"> im HTML abgleichen
• Darstellung in Dark/Light prüfen (Icon darf nicht „versumpfen“)
• apple-touch-icon mindestens in 180px bereitstellen; Abrundung prüfen

4) SEO‑Signale und HTTP‑Verdrahtung

• Keine 404‑Iconpfade (Pfadunterschiede zwischen Dev/Prod!)
• robots.txt darf Icons/Manifeste nicht blockieren
• Richtiger Content-Type: application/manifest+json

Automatisieren mit Tools

• Icons generieren: Favicon-Generator
  • Erzeugt 16/32/192/512 aus dem Quelllogo; Vorschau für Abstände
• Manifeste pro Locale bauen: Favicon + Manifest Paket
  • Füllt name/short_name und prüft start_url/scope

Operative Stolperfallen

• Nur die Root‑manifest.webmanifest wird referenziert → Lokalisierung greift nicht
• Bei SPA kann start_url 200 liefern, aber außerhalb des Service‑Worker‑Scopes liegen
• Unterschiedliche Origins (Staging/Prod): OGP relativ → 404 (Sitemap mitprüfen)

Kontrollen sind kein einmaliger Akt. Bei jedem Release Diff prüfen, Brüche vermeiden und die Schritte als Template im Team verankern.

5) Prüfablauf vor Livegang

1. Artefakt‑Liste sichten (Ordner /icons/ und alle manifest.webmanifest je Locale)
2. Lighthouse für PWA/Best Practices (Fehlende Felder/Verweise früh erkennen)
3. iOS/Safari: „Zum Home“ testen (Abrundung/Abstand des apple-touch-icon)
4. Android/Chrome: Installationsverhalten (Splash‑Hintergrundfarbe, Name)
5. 404/Content‑Type im DevTools‑Network prüfen

6) Service Worker und Cache

• SW in Prod, aber während Entwicklung besser deaktiviert/nicht registriert (keine alten Chunks)
• skipWaiting‑Vorgehen teamweit vereinheitlichen (manuell vs. Prompt)
• Regeln zum Aufräumen alter Caches (Benennung/Versionierung) dokumentieren

Hinweis: In der Entwicklung wird der bestehende SW auf dieser Site automatisch deregistriert. Im Betrieb hat sich „Update‑Prompt → Zustimmung“ bewährt.

7) Monitoring und Regressionen

• Existenz/Hashes generierter Dateien im CI prüfen (Fehlstellen, veraltete Referenzen)
• Manifest‑Felddiffs je Locale vergleichen (name/short_name/description/start_url/scope)
• robots/sitemap‑Überwachung (Search Console/Lighthouse)

8) Häufige Fragen (FAQ)

• F. Brauche ich weitere Größen außer 16/32/192/512?
  • A. Nicht zwingend, aber Windows/ältere Androids nutzen teils 48/96/144. Starten Sie minimal, erweitern Sie nach Bedarf.
• F. SVG‑Favicon?
  • A. Zunehmend unterstützt; für Abwärtskompatibilität PNG/ICO beilegen. Monochromes SVG separat für Safari pinned tab.
• F. Manifest‑Lokalisierung wie UI‑Texte handhaben?
  • A. Ja, aber Längenlimits für name/short_name variieren pro Plattform → Kurzform‑Policy definieren.

9) Praxis‑Workflow (E2E)

1. Quelllogo‑Guidelines klären (Abstand, Mindestgröße, Dark/Light)
2. Mit Favicon-Generator 16/32/192/512 erzeugen
3. Mit Favicon + Manifest Paket Locale‑Manifeste bauen
4. Im Layout <link rel="icon"> und <link rel="manifest"> je Locale referenzieren
5. UI‑Review in Dark/Light; ggf. Kontur zum Icon ergänzen
6. Im CI Existenz/Content‑Type/Links prüfen; Lighthouse‑PWA‑Score messen
7. Nach Release per Search Console und Logs regressionsfrei halten

Als Template an PRs anhängen, um Qualität teamweit reproduzierbar zu sichern.