Web-, PWA- und Chrome-Icons

Die Web-ZIP enthält favicon.ico, 16/32-px-PNGs, ein 180-px-Apple-Touch-Symbol, 192/512-px-PWA-Symbole, site.webmanifest und og.png mit 1200x630.

Dateien der Web-ZIP

Die beiden PWA-PNGs sind normale quadratische Symbole. Namen und Größen entsprechen dem icons-Array in site.webmanifest; og.png ist ein separates Vorschaubild zum Teilen.

Web/
  favicon.ico
  favicon-16x16.png
  favicon-32x32.png
  apple-touch-icon.png
  android-chrome-192x192.png
  android-chrome-512x512.png
  site.webmanifest
  og.png
  README.txt

Symbole in die Website einbinden

1. Kopiere die Web-Dateien in das öffentliche Verzeichnis und veröffentliche sie im Stamm der Domain oder passe die Pfade an dein Verzeichnis an.
2. Ändere name und short_name in site.webmanifest. start_url und scope sind relativ zum Manifest; die exportierten Icon-Pfade beginnen mit /. Passe sie bei einem Unterverzeichnis an.
3. Füge Manifest-, Favicon- und Apple-Touch-Verweise in den HTML-head ein. Nutze HTTPS oder localhost. Prüfe in den Browser-Entwicklertools das Manifest und ob jede Icon-URL ein Bild statt einer HTML-Ersatzseite liefert.

<link rel="manifest" href="/site.webmanifest">
<link rel="icon" href="/favicon.ico">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">

{
  "name": "My App",
  "short_name": "App",
  "start_url": "./",
  "scope": "./",
  "icons": [
    { "src": "/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png" }
  ],
  "theme_color": "#ffffff",
  "background_color": "#ffffff",
  "display": "standalone"
}

Diese Symbole sind nicht als maskierbare Motive vorbereitet. Die ZIP ergänzt weder Service Worker noch Offline-Unterstützung; Icons allein garantieren keine Installation. Teste Zielbrowser und Gerät.

Favicon & PWA Icon Generator

Chrome-Icons und Werbebilder exportieren

Lade eine Vorlage hoch und wähle Chrome für PNG-Icons und rechteckige Werbebilder. Die Vorlage wird auf Weiß zentriert; prüfe das Design vor dem Einreichen.

• Erweiterungsicons: PNGs mit 16, 32, 48 und 128 px sowie eine Manifest-V3-Vorlage.
• Store-Icon (128x128): Separate PNG für den Chrome-Web-Store-Eintrag.
• Kleines Tile (440x280): Deckende PNG für die kleine Werbefläche.
• Marquee (1400x560): Optionales großes Werbebild, kein Screenshot des Store-Eintrags.
• Screenshots: Nimm echte Erweiterungsscreenshots separat mit 1280x800 oder 640x400 auf. Dieses Tool erstellt und rahmt keine Screenshots.

Generator für Chrome-Erweiterungsicons und Store-Bilder

Offizielle Quellen

• Web App Manifest
• Chrome Web Store