Chrome 拡張機能のアイコンサイズと実装ガイド

Chrome extensionは、ある表示箇所ではシャープな128ピクセルのロゴを表示できる一方、ツールバーではのっぺりした正方形に見えることがあります。これは通常、ブランドマークではなくアセットのサイズ設定が原因です。Chrome extension icon sizesを正しく選ぶには、ツールバー、拡張機能、ストアのアートワークを、関連はあるものの、それぞれ異なる役割として扱う必要があります。

これらのアセットは、Webサイトのfaviconではありません。HTML Standardではrel='icon'はページのlink relationとして定義されていますが、拡張機能ではmanifest.jsonでiconsを宣言し、action用のアートワークを個別に定義できます。サイトアイコンも必要な場合は、別のセットアップを解説したfavicon size guideを参照してください。

Chrome extension icon sizes：各アセットの役割

拡張機能におけるicon sizesは、異なるUIやパッケージングの文脈で提供されるファイルのピクセル寸法です。寸法だけでは配置は決まらず、manifestのpropertyと、表示が要求されるsurfaceによって決まります。

• Manifest artwork: top-levelのicons objectで宣言する、拡張機能全般のアートワークです。このアイデンティティ用セットは一貫性を保ってください。
• Action artwork: ツールバーのマーク。general iconと差別化すべき場合は、action.default_iconで指定します。
• Store artwork: Chrome Web Storeのlisting workflow向けに用意する128x128 PNGです。packageがすべてのlisting用アセットを供給してくれるとは仮定せず、独立した成果物として扱ってください。

保守的なベースラインは16x16、24x24、32x32、48x48、128x128ピクセルです。これらは作業用として推奨されるサイズ群であり、普遍的な表示ルールではありません。

extension icon sizesが重要な理由

小さいサイズではディテールが失われます。細かな文字、細いストローク、複雑なマークは、16ピクセルでは色付きの塊に潰れてしまうことがあります。正確なサイズのファイルがない場合、ブラウザは利用可能な画像を拡大縮小する必要があります。そのフォールバックによる表示は、にじんだりぼやけたりすることがあります。

実用的なセットでは、目的と解像度を区別します。ツールバーの表示密度に合わせたコンパクトなアートワーク、拡張機能の一般的な表示面には一貫したファミリー、ストア表示には高解像度の正方形を使用します。各書き出しファイルには役割が明確に定義され、1つの大きすぎるファイルをすべての配置枠で使い回すことに頼らずに済みます。

manifest.jsonでicon setを構築する方法

Manifest V3では、icons内の数値キーが参照先ファイルのピクセル寸法を示します。パスは拡張機能のルートを基準とした相対パスで、大文字と小文字も含めてファイル名と正確に一致させる必要があります。この安全な構成例では、ID用アートワークとツールバー用アートワークを分離しています。

{
  "manifest_version": 3,
  "name": "Sample Extension",
  "version": "1.0.0",
  "icons": {
    "16": "images/icon-16.png",
    "32": "images/icon-32.png",
    "48": "images/icon-48.png",
    "128": "images/icon-128.png"
  },
  "action": {
    "default_title": "Run Sample Extension",
    "default_icon": {
      "16": "images/action-16.png",
      "24": "images/action-24.png",
      "32": "images/action-32.png"
    }
  }
}

iconsオブジェクトは、Chromeに複数の汎用的な表現を提供します。default_iconマップには、16、24、32ピクセルの高密度なツールバー用バージョンが指定されます。このサイズでは、完全なロゴよりも簡略化したマークの方が視認しやすい場合があります。action固有のアイコンを省略すると、汎用アイコンがfallbackとして使われるため、ツールバー用アイコンを宣言することで、視覚的表現をより細かく制御できます。

Webサイトのfavicon用構文をmanifestにそのままコピーしないでください。sizes属性は、<link rel='icon' sizes='32x32' ...>のようなHTMLで使う属性であり、JSONのマップで使うものではありません。同様に、faviconとして動作する.icoファイルが、拡張機能用のアセットとして最適とは限りません。パッケージ形式で:《PNG》を採用するのが安全です。

一貫性のある拡張機能アイコンにするためのベストプラクティス

• まず16ピクセルで設計します。 アイコンのマークを明瞭なシルエット、絞り込んだ色数、ライトとダークのtoolbarでも区別できる形之后再调整 larger exports。
• 視覚的な中心mort aligned 配置します。 数学的に同じ余白でも、マークが下に見えたり窮屈に見えたり합니다。すべてのvariantを実際のtoolbarサイズのpreviewで比較してください。
• ファイルのdimensionを合わせます。 icon-32.pngという名前のファイルは32x32ピクセルにし、manifestのkeyも32にしてください。package pathも確認します。
• 一貫したvisual familyを保ちます。 toolbar、extension management、storeのartworkではgeometryとcolorを共有し、最小サイズで装飾を省く場合でも同じデザイン体系を維持してください。
• package contentsを確認します。 unpacked extensionを読み込み、chrome://extensionsで参照しているimageがすべてZIPに含まれているか確認します。変更後はextensionを再読み込みしてください。

островCleanなSVGまたはPNGのsourceからPNG variantをexportするにはMzu favicondlを利用できます。サイトにもfaviconが必要なら、faviconのHTML codeガイドで、別のmarkup pathを扱ってください。

インストール後にiconが表示されない場合は、まずJSON syntaxを確認し、その後でfiles、paths、dimensionsを検証してください。元のwebpageを再読み込みしても、packageされたextensionのmetadataが必ず再読み込みされるとは限りません。テスト中はextensionのreload controlを使用してください。

Conclusion: 意図的に整えたicon stackを出荷する

Chrome extension icon sizesは、toolbar、extension management、storeという不同的なコンテキストで利用できる視覚領域が異なるため重要です。実用的な16、24、32、48、128ピクセル単位のPNG一式を用意すれば、1つのファイルをすべてのスロットに流用する必要がなく、Chromeにサイズごとの正確なartworkを渡せます。これらのdimensionsは維持しやすいbaselineとして扱い、release前に現在のChrome Web Storeのupload rulesを確認し、extension iconはwebサイトのfaviconとは分けて管理してください。