ロゴからファビコンを作成する方法（全サイズ解説）

ロゴからファビコンを作成するには、まず正方形のロゴ（SVG、または512x512以上のPNG）を用意します。理想的には16、32、48pxのバージョンを含む favicon.ico をエクスポートし、180x180のApple用アイコンとマニフェスト用の192/512 PNGを追加し、HTMLでリンクします。これらは12個ではなく5つのファイル（ICO、SVG、Apple用アイコン、2つのマニフェストPNG）です。以下に、それぞれの作成方法と配置場所を示します。

簡潔な答え：必要なファビコンファイル

現代の最小限セットは、ICOファイル1つ、SVGファイル1つ、Appleタッチアイコン1つ、マニフェストPNGファイル2つです。マルチサイズ対応のICOがある場合、個別の16/32/48 PNGファイルやMicrosoftタイル画像は 不要 です。

多くのジェネレーターはブラウザが必要としないファイルを多数含むZIPを提供しますが、512x512のマスターがあれば十分です。それ以上大きくする必要はありません。

ファビコンのサイズ解説：それぞれの用途

favicon.ico（16、32、48）

ICO形式は、1つのファイル内に複数のビットマップ画像を格納できるコンテナです。通常は16、32、48pxのサイズを1つにまとめます。Windowsの大きなアイコンが必要な場合のみ、256pxを追加してください。

まだ用意する価値があります。クローラー、フィードリーダー、リンクプレビューボットはデフォルトでサイトルートから /favicon.ico を取得します。Chromiumは挙動が異なり、公開されたリクエストテストでは、ページにアイコンが宣言されていない場合にのみ /favicon.ico を取得しました。SVGが宣言されると、SVGのみを要求し、スタンドアロンのPNGリンクよりもICOを優先しました。

スタンドアロンの32x32 PNGはスキップしてください。 いくつかのガイドで紹介されていますが、このテストではICOが存在する場合に使用されないことが示されました。テストはChromiumのみを対象としているため、FirefoxやSafariの動作は未検証です。

favicon.svg

SVGファビコンはChrome 80以降、Firefox 41以降、Edgeで動作します。Safariのサポートは比較的新しく限定的であり、iOS上のSafariではSVGファビコンは機能しません。SVGはICOの代替ではなく、補完として扱ってください。

apple-touch-icon（180x180）

180x180はRetina iPhone用のサイズ（60pt @ 3x）です。180pxのファイル1つで十分です。iOSはiPadを含む他のデバイス用にこれをスケーリングします。

マニフェスト用アイコン（192および512）

Android Chromeとインストール済みウェブアプリは、Web App Manifestからアイコンを読み取ります。192pxファイルはランチャー用アイコン、512pxファイルはインストール/スプラッシュ用アイコンです。

Google Searchに必要なもの

Googleはホームページからアイコンを読み取ります。ICO、PNG、SVGなど、有効なファビコン形式であればどれでも使用可能です。正方形であり、少なくとも8x8pxである必要があります。Googleは48x48より大きく、48の倍数であることを推奨しています。ホスト名ごとに1つのアイコンのみ適用されます。アイコンが不適切な場合、Googleは汎用の地球儀アイコンに置き換えます。

エクスポート前にロゴを準備する

正方形、大尺寸、透明背景

最良のソースはSVGです。そうでない場合は、512x512以上の正方形PNGを使用してください。縮小のみを行ってください。1024pxから16pxへの変換はエッジの詳細を保持しますが、32pxから16pxへの変換は保持せず、拡大するとぼやけるだけです。

ロゴが正方形でない場合は、Tool Cloudの画像切り抜きおよびリサイズツールで先に切り抜くかパディングしてください。

PNGは透明なままにし、sRGBカラー空間で使用してください。平坦化したり、「念のため」背景を追加したりしないでください。

ファビコンにJPGは使えますか？ 使えますが、PNGやSVGの方がきれいです。JPGは透明背景に対応していないため、JPGからICOへ変換すると四角い塗りつぶしになり、小さなサイズでは圧縮ノイズが目立ちます。

16ピクセル向けに簡素化する

タグライン付きのフルロゴは、ブラウザのタブではぼやけてしまいます。うまく機能するのは：

• 対比がはっきりした太めのマーク
• フラットな色を2〜3色
• 読み取りやすく太い文字は1〜2字まで。ワードマークは入れない

実際のサイズでテストします。0.5秒で見分けられない場合は、さらに簡素化してください。

ヒント：最高のICOを作るには画像を2枚使う

最高品質を得るには、16と32サイズには簡素化したアートワークを、48と256サイズにはより詳細なアートワークを使いましょう。ICOを2つ作成し、簡素化した方を favicon.ico として、詳細な方をWindowsのショートカットに使います。これは必須ではなく、ほとんどのサイトでは十分に簡素化した1つのロゴで問題ありません。

ロゴをICOに変換し、パック全体を作成する

オプション1：ファビコンパックを生成する

Tool Cloudのファビコンジェネレーターを開き、正方形のロゴをアップロードして、標準的なファビコンサイズのZIPファイルをダウンロードします。上記の表に合うファイルを使い、不足しているもの（SVGや192/512 PNGなど）は別途作成してください。HTMLで参照しないファイルは無視してください。

オプション2：ロゴを単一のICOに変換する

favicon.icoのみが必要な場合は、画像からICOへの変換ツールを使います。ロゴをアップロードして変換後、結果を favicon.ico にリネームします。ICOに含まれるサイズを確認し、16または32px版がない場合は、上記のジェネレーターを使ってください。

180、192、512のPNGを作成する

正方形のマスタ画像を180x180、192x192、512x512にリサイズし、それぞれ apple-touch-icon.png、icon-192.png、icon-512.png と名前を付けます。

Appleアイコン用には、ロゴを中央に配置し余白を入れた不透明の背景を使用します。iOSは透明を扱えず、アイコンの角を自動で丸めるため、事前に角を丸めないでください。iOSが自動で埋める背景に頼らず、必ず自分で単色の背景を用意してください。

HTML内で各ファイルを配置する場所

HTMLスニペット

すべてのファイルをサイトのルートにアップロードし、これを <head> に追加します。sizes の属性は、Chromeがアイコンを選択する方法についての解説 に従います：

<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" href="/favicon.svg" type="image/svg+xml" sizes="any">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/manifest.webmanifest">
<meta name="theme-color" content="#ffffff">

いくつかの注意点：

• rel="icon" を使用してください。rel="shortcut icon" はレガシーです。「shortcut」は登録されていない用語であり冗長です。
• ブラウザは位置ではなくタイプで選択するため、順序は重要ではありません。type="image/svg+xml" 属性により、SVGをサポートしていないブラウザはそれをスキップしてICOを使用できます。
• ICOには具体的なサイズを指定し、SVGには sizes="any" を指定してください。ICOに any を設定すると、ChromeがSVGよりもICOを優先することがあります。

ウェブアプリマニフェスト

{
  "name": "Your Site",
  "short_name": "Site",
  "icons": [
    { "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" }
  ]
}

Chromeのインストール基準では、192pxと512pxのアイコンの両方が必要です。単一のファイルに "purpose": "any maskable" を設定しないでください。マスク可能なアイコンを作成する場合は、アートワークを中央の安全領域（512ピクセルキャンバスのうち約409x409）内に収めた別のファイルを作成してください。

WordPress、Squarespace、Shopify、Wixにファビコンを追加する方法

プラットフォームによってメニュー名が異なるため、ダッシュボードに表示される名称を確認してください。

• WordPress： 外観、カスタマイズ、サイト識別情報、サイトアイコン。512x512のPNGをアップロードします。
• Squarespace： デザイン、ブラウザアイコン。300x300の正方形PNGが使用可能です（ICO形式も対応しています）。
• Shopify： テーマ設定、ファビコン。正方形の512x512 PNGをアップロードします。
• Wix： 設定、ウェブサイト設定、ファビコン（プレミアムプランが必要になる場合があります）。

ファビコンがぼやけて表示される、または更新されない理由

ぼやけたアイコンや塗りつぶされた四角形のアイコン

ぼやけは通常、小さなラスター画像を拡大した場合や、16pxという小さすぎるサイズでロゴの詳細が多すぎることが原因です。SVGを使用し、ICOファイルには32px以上の解像度を指定して修正してください。16x16の画像を拡大することは絶対に避けてください。ロゴの背後に完全な四角形がある場合、ソース画像に透明部分がなく、JPGである可能性が高いです。

古いアイコンが表示され続ける場合

ブラウザは数日〜数週間にわたってファビコンをキャッシュします。以下の手順を順番に試してください。

1. ページをハードリフレッシュします。
2. /favicon.ico に直接アクセスし、そのページで再読み込みします。
3. クエリ文字列を追加します。例： /favicon.ico?v=2 。
4. シークレットウィンドウで確認します。
5. ファイルがHTTP 200を返していることを確認し、CDNのキャッシュをクリアします。

iOSのホーム画面アイコンはショートカットごとにキャッシュされるため、既存のショートカットは変更されず、ユーザーはサイトを再度追加する必要があります。ブランド再構築の場合は、新しいファイル名を使用してください。

Google検索で表示されない場合

反映には数日〜数週間かかることがあり、アイコンのURLを変更すると遅延することがあります。ホームページで rel="icon" を使用してアイコンを参照していること、および上記のサイズ要件を満たしていることを確認してください。Googleに文書化されたKB単位の硬性制限はありません。Googleのルールは主に寸法に関するものです。

実践的なアドバイス

512px以上の正方形マスター画像から始め、タブ表示用に簡素化してください。ファイルをアップロードした後、HTMLスニペットとマニフェストをサイトに貼り付け、マニフェストのリンクが正しく設定されていることを再確認してください。最後に16pxでの表示結果を確認し、マークがはっきりしない場合はさらに簡素化してください。

よくある質問

2026年でもfavicon.icoは必要ですか？

はい、必要です。ブラウザ、フィードリーダー、リンクプレビューボットは、HTMLタグに関係なくサイトルートから /favicon.ico をリクエストするため、これは低コストの保険となります。16、32、48pxを1つのファイルにまとめましょう。

ファビコンにJPGを使用できますか？

技術的には可能ですが、PNGまたはSVGの方がはるかにきれいな結果になります。JPGは透過に対応しておらず圧縮ノイズが発生するうえ、写真は16x16ピクセルで表示するにはディテールが細かすぎます。

Google検索用のファビコンのサイズはどうすればよいですか？

Googleでは少なくとも8x8pxの正方形画像が必要で、48x48pxより大きいことを推奨しています。SVGはそこではサポートされていないため、rel=iconで宣言されたICOまたはPNGをホームページに保持してください。

個別の16x16、32x32、48x48 PNGファイルが必要ですか？

一般的には不要です。マルチサイズ対応のICOファイルがこれらのサイズをカバーしており、Chromiumでのリクエストテストでは、ICOが存在する場合にスタンドアロンのPNGが使用されないことが判明しました。FirefoxとSafariはテストされていません。

新しいファビコンが表示されません。なぜでしょうか？

ブラウザはファビコンを非常に積極的にキャッシュし、数日から数週間は更新されません。ハードリフレッシュを試す、/favicon.ico に直接アクセスする、?v=2 クエリ文字列を追加する、またはプライベートウィンドウで確認してみてください。