Chrome拡張機能に必要なアイコンサイズ

結論：Chrome拡張機能は、16px、32px、48px、128pxのPNGアイコンを使います。ImgovoのChrome拡張機能アイコン作成ツールを開いてロゴを追加すると、4つのサイズと、manifest.jsonのicons部分が入ったZIPをダウンロードできます。すべてブラウザの中で作られるため、ロゴがアップロードされることはありません。

サイズごとの使われ方

Chromeのドキュメントによると、4つのサイズにはそれぞれ役割があります。

サイズ	表示される場所
16 × 16 px	拡張機能のページのファビコン、コンテキストメニュー
32 × 32 px	Windowsのコンピューターで必要とされることが多いサイズ。下のスニペットでは、ツールバーのアイコンにも使います
48 × 48 px	拡張機能の管理ページ
128 × 128 px	Chromeウェブストアとインストールのダイアログ

16pxのアイコンはとても小さいため、細かい部分や細い文字は消えてしまいます。細かいロゴよりも、太い記号や1文字のほうがうまくいきます。

SVGではなくPNGを使う

Chromeは、manifest.jsonで宣言するアイコンにSVGを使うことに対応していません。それでも、SVGのロゴから始められます。ツールが各サイズで描き直し、PNGファイルとして保存します。SVGを自分で変換したいときは、SVG変換ツールで幅を指定して変換できます。

手順

1. Chrome拡張機能アイコン作成ツールを開き、ロゴをページにドロップするか、クリックして選ぶか、クリップボードから貼り付けます。透明な背景の正方形の画像がいちばんきれいに仕上がります。
2. 形で、ロゴ全体を残すなら画像全体を収める、正方形を埋めるなら正方形にトリミングを選びます。
3. 背景を、透明または色から選びます。
4. 拡張機能内のアイコンのフォルダを入力します。たとえばicons/です。スペースやウェブアドレスを含まない、シンプルなフォルダ名にしてください。
5. 余白と角丸を調整します。小さなアイコンでは余白を少なくします。
6. アイコンの4つのプレビューを確認します。
7. アイコンをダウンロード（ZIP）をクリックします。

アイコンをmanifest.jsonに追加する

ZIPには4つのPNGファイルと、manifest-icons.jsonというファイルが入っています。同じ内容はmanifest.jsonに追加する内容にも表示され、コピーボタンが付いています。内容は2つの部分でできています。iconsキー（サイズとパス）と、actionキー（ツールバーのアイコン）です。

結果は次のようになります。パッケージ内のファイル名は違うことがあるので、ツールが出した記述をコピーしてください。

{
  "icons": {
    "16": "icons/icon-16.png",
    "32": "icons/icon-32.png",
    "48": "icons/icon-48.png",
    "128": "icons/icon-128.png"
  },
  "action": {
    "default_icon": {
      "16": "icons/icon-16.png",
      "32": "icons/icon-32.png"
    }
  }
}

これは完全なマニフェストではありません。iconsとactionの部分をご自身のmanifest.jsonにコピーし、拡張機能の中にフォルダを作って、PNGファイルを入れてください。

FirefoxとEdge

どちらの拡張機能形式も、PNGファイルを指定するiconsキーを使いますが、ストアごとに審査のルールがあり、追加のサイズを求められることもあります。公開するストアのドキュメントを確認してください。Imgovoが行うのはアイコンの作成だけで、申請や承認は行いません。

公開前のチェックリスト

• 4つのPNGファイルが、manifest.jsonに書いたフォルダにある。
• 16pxのアイコンが、明るい背景でも暗い背景でも読み取れる。
• アイコンが、ストアの掲載ページのロゴと合っている。
• マニフェストを変えたあと、ブラウザで拡張機能を試した。

プライバシー

アイコンはお使いのブラウザの中で描かれ、ZIPは端末の中で作られます。ロゴがコンピューターの外に出ることはありません。

今すぐ試す

Chrome拡張機能アイコン作成ツールを開き、ロゴを追加して、4つのサイズを1つのZIPでダウンロードしましょう。ウェブサイトのアイコンなら、代わりにファビコン作成ツールを使います。