FaviconMaker
FaviconMaker.net

Webマニフェスト生成

アイコンのエントリ、テーマの色、PWA インストール設定を含む完全な site.webmanifest を生成します。数秒でコピーまたはダウンロードできます。

site.webmanifestコピーまたはダウンロードテーマカラー

マニフェスト設定

実際に展開するファイルパスと一致する

マニフェストは次のようなアイコンを参照します。 /ファビコン/ファビコン-192.png.

実際のアイコン ファイルが必要ですか?ファビコンパックを生成する•適切なヘッドタグを取得する

site.webmanifest

JSON をコピーまたはダウンロードします。

{
  "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": "/"
}

ヘッドスニペット

これらのタグを <head>:

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

すべてのファビコンタグの完全なスニペットを使用したいですか?使用 ファビコン用HTMLタグ.

よくある質問

何かアップロードしていますか？

いいえ。このツールはブラウザで JSON を生成します。アップロードはありません。

site.webmanifest は何のためにありますか?

これは、ブラウザーがサイトを PWA としてインストールし、使用するアイコンを指示するのに役立ちます。

アイコンのパスはどこを指しているのでしょうか?

マニフェストは次のようなアイコン ファイルを参照します。 ファビコン-192.png 選択したパスの下にあります。ファイルを生成します ファビコン生成ツール.

動作を確認するにはどうすればよいですか?

ファイルをデプロイしてから、 ファビコンチェッカー マニフェスト URL が到達可能であることを確認します。