FaviconMaker
FaviconMaker.net

Webmanifest-Generator

Generieren Sie ein vollständiges site.webmanifest mit Symboleinträgen, Designfarben und PWA-Installationseinstellungen. Kopieren oder Herunterladen in Sekundenschnelle.

site.webmanifestKopieren oder herunterladenThemenfarben

Manifest-Einstellungen

Passen Sie die Dateipfade an, die Sie tatsächlich bereitstellen

Das Manifest verweist auf Symbole wie /Favicons/Favicon-192.png.

Benötigen Sie die tatsächlichen Symboldateien?Generieren Sie ein Favicon-Paket•Holen Sie sich die richtigen Head-Tags

site.webmanifest

Kopieren Sie den JSON-Code oder laden Sie ihn herunter.

{
  "name": "My Website",
  "short_name": "My Website",
  "icons": [
    {
      "src": "/favicons/favicon-16.png",
      "sizes": "16x16",
      "type": "image/png"
    },
    {
      "src": "/favicons/favicon-32.png",
      "sizes": "32x32",
      "type": "image/png"
    },
    {
      "src": "/favicons/favicon-48.png",
      "sizes": "48x48",
      "type": "image/png"
    },
    {
      "src": "/favicons/favicon-64.png",
      "sizes": "64x64",
      "type": "image/png"
    },
    {
      "src": "/favicons/favicon-96.png",
      "sizes": "96x96",
      "type": "image/png"
    },
    {
      "src": "/favicons/favicon-128.png",
      "sizes": "128x128",
      "type": "image/png"
    },
    {
      "src": "/favicons/favicon-256.png",
      "sizes": "256x256",
      "type": "image/png"
    },
    {
      "src": "/favicons/favicon-512.png",
      "sizes": "512x512",
      "type": "image/png"
    },
    {
      "src": "/favicons/apple-touch-icon.png",
      "sizes": "180x180",
      "type": "image/png"
    },
    {
      "src": "/favicons/favicon-512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "maskable"
    }
  ],
  "theme_color": "#0891B2",
  "background_color": "#FFFFFF",
  "display": "standalone",
  "start_url": "/"
}

Kopfausschnitt

Fügen Sie diese Tags in Ihre ein <head>:

<link rel="manifest" href="/favicons/site.webmanifest" />
<meta name="theme-color" content="#0891B2" />

Bevorzugen Sie ein vollständiges Snippet für alle Favicon-Tags? Verwenden Favicon-HTML-Tags.

Häufig gestellte Fragen

Laden Sie etwas hoch?

Nein. Dieses Tool generiert JSON in Ihrem Browser. Es gibt keine Uploads.

Wozu dient site.webmanifest?

Es hilft Browsern, Ihre Website als PWA zu installieren und teilt ihnen mit, welche Symbole sie verwenden sollen.

Wohin zeigen die Symbolpfade?

Das Manifest verweist auf Symboldateien wie Favicon-192.png unter deinem gewählten Weg. Generieren Sie die Dateien mit Favicon-Generator.

Wie kann ich überprüfen, ob es funktioniert?

Stellen Sie die Datei bereit und führen Sie dann aus Favicon-Checker um zu bestätigen, dass die Manifest-URL erreichbar ist.