[{"data":1,"prerenderedAt":11},["ShallowReactive",2],{"guide:ja:blog\u002Ffavicon-sizes-which-ones-you-need":-1,"article-ja-favicon-sizes-which-ones-you-need":3},{"slug":4,"title":5,"description":6,"date":7,"keyword":8,"tool":9,"html":10},"favicon-sizes-which-ones-you-need","ファビコンのサイズ：2025年に実際に必要なもの","ファビコンのサイズに関する分かりやすいガイド：16x16、32x32、180x180、192、512について、最新ブラウザが使用するもの、および記述すべきHTMLを解説します。","2026-10-12","favicon size","favicon-generator","\u003Cp>「ファビコン サイズ」で検索すると、矛盾した数字の羅列が出てきます：16x16、32x32、48x48、64、180、192、256、512。これらのリストのほとんどは10年前に書かれたまま更新されていません。実際には、現代のサイトに必要なファイルはおよそ4つで、\u003Ca href=\"\u002Fja\u002Ffavicon-generator\">ファビコン生成ツール\u003C\u002Fa>で一度にすべて作成できます。このツールはブラウザ内で完全に動作するため、ロゴはあなたのマシンから外に出ることはありません。\u003C\u002Fp>\n\u003Cp>各サイズが実際に何に使われるのか、そして安全にスキップできるものをここに説明します。\u003C\u002Fp>\n\u003Ch2>重要性が残されているサイズ\u003C\u002Fh2>\n\u003Ch3>16x16と32x32 — ブラウザタブとブックマーク\u003C\u002Fh3>\n\u003Cp>これは従来のファビコンです。16x16はタブストリップが混雑しているときに表示され、32x32は高DPI画面、ブックマークバー、およびアドレスバーのUIの一部で使用されます。両方は従来、複数の解像度を一度に保持できる単一の\u003Ccode>favicon.ico\u003C\u002Fcode>ファイルにバンドルされます。Windowsは同じ\u003Ccode>.ico\u003C\u002Fcode>から48x48をデスクトップショートカット用に取得するため、これを含めてもほぼコストがかかりません。\u003C\u002Fp>\n\u003Ch3>180x180 — Appleのタッチアイコン\u003C\u002Fh3>\n\u003Cp>iPhoneやiPadで「ホーム画面に追加」をタップすると、Safariは180x180の\u003Ccode>apple-touch-icon.png\u003C\u002Fcode>を探します。それがない場合、iOSはページをスクリーンショットして代わりに使用します。これは見栄えが悪くなります。この1つのPNGがすべての現在のiOSデバイスに対応しています。システムが必要に応じてダウンスケールするためです。\u003C\u002Fp>\n\u003Ch3>192x192と512x512 — AndroidとPWA\u003C\u002Fh3>\n\u003Cp>Android Chromeとインストール可能なWebアプリは、\u003Ccode>site.webmanifest\u003C\u002Fcode>からアイコンを読み込みます。192はホーム画面アイコン、512はスプラッシュスクリーンとアプリリストに使用されます。サイトをインストール可能にしたい場合は、両方が必要です。\u003C\u002Fp>\n\u003Ch3>SVG — オプションですが便利です\u003C\u002Fh3>\n\u003Cp>FirefoxとChrome両方がSVGファビコンをサポートしており、任意のサイズでシャープなままで、ファイル内のメディアクエリでダークモードに対応できます。これは置き換えではなく、ボーナスです。Safariと古いブラウザは依然ラスター版を必要とします。\u003C\u002Fp>\n\u003Ch2>スキップできるもの\u003C\u002Fh2>\n\u003Cp>64x64、96x96、128x128、Windowsタイル画像全体、そして\u003Ccode>apple-touch-icon-76x76\u003C\u002Fcode>スタイルの十数個のレガシーファイル。これらはほぼ消滅したデバイスのために必要でした。20個のアイコンファイルを配布するとリポジトリが膨らむだけで、測定可能な利益は得られません。\u003C\u002Fp>\n\u003Ch2>HTML\u003C\u002Fh2>\n\u003Cp>ファイルをサイトルートに配置して、\u003Ccode><head>\u003C\u002Fcode>に以下を追加します：\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-html\"><link rel="icon" href="\u002Ffavicon.ico" sizes="any">\n<link rel="icon" href="\u002Ficon.svg" type="image\u002Fsvg+xml">\n<link rel="apple-touch-icon" href="\u002Fapple-touch-icon.png">\n<link rel="manifest" href="\u002Fsite.webmanifest">\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>マニフェスト内に以下を追加します：\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-json\">"icons": [\n  { "src": "\u002Ficon-192.png", "type": "image\u002Fpng", "sizes": "192x192" },\n  { "src": "\u002Ficon-512.png", "type": "image\u002Fpng", "sizes": "512x512" }\n]\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Ch2>16ピクセルでのデザイン\u003C\u002Fh2>\n\u003Cp>難しい部分はエクスポートではなく、完全なロゴが16x16でグチャグチャになることです。役に立つことをいくつか紹介します：\u003C\u002Fp>\n\u003Cul>\n\u003Cli>\u003Cstrong>ロゴ全体ではなくフラグメントを使用する。\u003C\u002Fstrong> 1文字、1グリフ、1つの形。単語マークはタブサイズでは読み取れません。\u003C\u002Fli>\n\u003Cli>\u003Cstrong>正方形から始める。\u003C\u002Fstrong> ソースが幅広いロゴの場合、\u003Ca href=\"\u002Fja\u002Fcrop-image\">最初にそれを正方形にトリミング\u003C\u002Fa>して、生成ツールが空白でレターボックス化しないようにします。\u003C\u002Fli>\n\u003Cli>\u003Cstrong>コントラストを高く保つ。\u003C\u002Fstrong> 細い輪郭は消えます。ソリッド形状は生き残ります。\u003C\u002Fli>\n\u003Cli>\u003Cstrong>背景を決定する。\u003C\u002Fstrong> 透明PNGは明るく、暗いブラウザクロームに適応します。マークが暗い場合は、代わりにそれに単色タイルを指定することを検討してください。ロゴスクリーンショットからフラットJPGだけを持っている場合、数秒で\u003Ca href=\"\u002Fja\u002Fremove-background\">背景を削除\u003C\u002Fa>できます。\u003C\u002Fli>\n\u003Cli>\u003Cstrong>セーフエリアに注意する。\u003C\u002Fstrong> Androidはアイコンを円と四角に変形させるため、512アートワークの端の周りに大体10%の余白を残してください。\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>ファビコンの背景をサイトのブランドカラーに合わせている場合、\u003Ca href=\"\u002Fja\u002Fcolor-picker\">画像カラーピッカー\u003C\u002Fa>は既存のスクリーンショットから正確な16進コードを抽出します。\u003Ccode>theme-color\u003C\u002Fcode>メタタグにも便利です。\u003C\u002Fp>\n\u003Ch2>セット全体を一度に生成する\u003C\u002Fh2>\n\u003Cp>何もアップロードしません。正方形のPNGまたはSVGを\u003Ca href=\"\u002Fja\u002Ffavicon-generator\">無料のブラウザベースのファビコン生成ツール\u003C\u002Fa>にドロップすると、\u003Ccode>.ico\u003C\u002Fcode>、Appleタッチアイコン、192\u002F512 PNGがローカルで、あなたのタブで生成されます。サーバーに送信されるものはなく、サインアップはなく、未発表のロゴのコピーが他の誰かのストレージバケットに留まることはありません。\u003C\u002Fp>\n\u003Cp>ブラウザをズームアウトして、タブを見て、唯一重要な質問をしてください：それが何であるか分かりますか？\u003C\u002Fp>\n",1791831535267]