[{"data":1,"prerenderedAt":1375},["ShallowReactive",2],{"blog-tag-ja-favicon":3},[4,569],{"id":5,"title":6,"author":7,"body":8,"category":551,"coverImage":552,"description":553,"draft":554,"extension":555,"locale":556,"meta":557,"navigation":196,"noindex":554,"path":558,"publishedAt":559,"seo":560,"slug":561,"stem":562,"tags":563,"updatedAt":559,"__hash__":568},"blog\u002Fblog\u002Ffavicon-svg-png-ico-guide.md","ファビコンのSVG・PNG・ICO違いと正しい設定方法を徹底解説","Zerosend Editorial",{"type":9,"value":10,"toc":535},"minimark",[11,16,20,28,31,35,40,47,61,65,68,112,122,126,145,152,159,161,164,167,357,372,379,386,388,391,395,398,402,413,422,427,431,441,444,446,449,455,468,477,487,489,492,499,521,531],[12,13,15],"h2",{"id":14},"ファビコンとは何かなぜ形式選びが重要なのか","ファビコンとは何か、なぜ形式選びが重要なのか",[17,18,19],"p",{},"ファビコン（favicon）はブラウザのタブ、ブックマーク一覧、スマートフォンのホーム画面ショートカットなど、あらゆる場面でサイトを識別するための小さなアイコンだ。見た目上は小さな要素だが、形式の選び方を誤るとブラウザによって表示が崩れたり、高解像度ディスプレイでぼやけたりする。",[17,21,22,23,27],{},"ファビコンに使われる主な形式は ",[24,25,26],"strong",{},"ICO・PNG・SVG"," の3種類で、それぞれ特性がまったく異なる。どれか一つだけを置けば済む、という状況は現代のWebでは通用しない。",[29,30],"hr",{},[12,32,34],{"id":33},"icopngsvg-それぞれの違い","ICO・PNG・SVG それぞれの違い",[36,37,39],"h3",{"id":38},"ico形式後方互換性のための保険","ICO形式：後方互換性のための「保険」",[17,41,42,46],{},[43,44,45],"code",{},".ico"," はもともとWindowsのアイコン用形式で、1ファイルに複数の解像度（16×16, 32×32, 48×48など）を格納できる。Internet ExplorerはICOしか認識しなかった歴史的経緯から、長らくファビコンのデファクト標準だった。",[17,48,49,50,53,54,60],{},"現在のChromeやFirefox、Safariも ",[43,51,52],{},"favicon.ico"," をルートディレクトリに置けば認識するため、",[24,55,56,57,59],{},"「",[43,58,52],{}," をとりあえず置く」という慣習が今も続いている","。ただしベクター化できないため、拡大時に劣化する。",[36,62,64],{"id":63},"png形式現在の主流","PNG形式：現在の主流",[17,66,67],{},"PNGはアルファチャンネル（透明）をサポートし、色再現性も高い。モダンブラウザはすべてPNGのファビコンに対応しており、以下のサイズが実務上の標準とされている。",[69,70,71,84],"table",{},[72,73,74],"thead",{},[75,76,77,81],"tr",{},[78,79,80],"th",{},"用途",[78,82,83],{},"サイズ",[85,86,87,96,104],"tbody",{},[75,88,89,93],{},[90,91,92],"td",{},"ブラウザタブ（汎用）",[90,94,95],{},"32×32 px",[75,97,98,101],{},[90,99,100],{},"Apple Touch Icon（iOSホーム画面）",[90,102,103],{},"180×180 px",[75,105,106,109],{},[90,107,108],{},"Android \u002F PWAアイコン",[90,110,111],{},"192×192 px, 512×512 px",[17,113,114,117,118,121],{},[43,115,116],{},"\u003Clink rel=\"icon\" type=\"image\u002Fpng\" sizes=\"32x32\" href=\"\u002Ffavicon-32x32.png\">"," のように ",[43,119,120],{},"sizes"," 属性を明示することで、ブラウザが適切な解像度を選択できる。",[36,123,125],{"id":124},"svg形式将来に向けたスケーラブルな選択","SVG形式：将来に向けた「スケーラブル」な選択",[17,127,128,129,132,133,136,137,144],{},"SVGはXMLベースのベクター形式で、どんな解像度でも劣化しない。ChromeやFirefox、Edgeはすでに ",[43,130,131],{},"rel=\"icon\""," でのSVGを正式サポートしており、",[43,134,135],{},"\u003Clink rel=\"icon\" type=\"image\u002Fsvg+xml\" href=\"\u002Ffavicon.svg\">"," と記述するだけで有効化できる（",[138,139,143],"a",{"href":140,"rel":141},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fja\u002Fdocs\u002FWeb\u002FHTML\u002FAttributes\u002Frel#icon",[142],"nofollow","MDN: rel=icon","）。",[17,146,147,148,151],{},"ただし",[24,149,150],{},"SafariはSVGファビコンに対応していない","（2025年時点）。そのため現時点でSVGだけに依存するのはリスクがあり、ICOやPNGとの併用が推奨される。",[17,153,154,155,158],{},"また、SVGにはダークモード対応という強みもある。CSSの ",[43,156,157],{},"prefers-color-scheme"," メディアクエリをSVG内に埋め込むことで、OSのダークモード設定に応じてアイコンの色を自動切替できる。",[29,160],{},[12,162,163],{"id":163},"推奨される現実的な設定パターン",[17,165,166],{},"形式ごとの特性を踏まえると、現代のWebサイトに最低限必要なファビコン構成は以下のとおりだ。",[168,169,174],"pre",{"className":170,"code":171,"language":172,"meta":173,"style":173},"language-html shiki shiki-themes github-light github-dark","\u003C!-- ICO：後方互換（ルートに置くだけでブラウザが自動検出） -->\n\u003C!-- favicon.ico は \u003Clink> 不要でルートに置くと自動認識 -->\n\n\u003C!-- PNG：モダンブラウザ・各種デバイス向け -->\n\u003Clink rel=\"icon\" type=\"image\u002Fpng\" sizes=\"32x32\" href=\"\u002Ffavicon-32x32.png\">\n\u003Clink rel=\"apple-touch-icon\" sizes=\"180x180\" href=\"\u002Fapple-touch-icon.png\">\n\n\u003C!-- SVG：Chrome \u002F Firefox \u002F Edge 向け（将来性） -->\n\u003Clink rel=\"icon\" type=\"image\u002Fsvg+xml\" href=\"\u002Ffavicon.svg\">\n\n\u003C!-- PWA \u002F Android向け -->\n\u003Clink rel=\"manifest\" href=\"\u002Fsite.webmanifest\">\n","html","",[43,175,176,185,191,198,204,253,283,288,294,323,328,334],{"__ignoreMap":173},[177,178,181],"span",{"class":179,"line":180},"line",1,[177,182,184],{"class":183},"sJ8bj","\u003C!-- ICO：後方互換（ルートに置くだけでブラウザが自動検出） -->\n",[177,186,188],{"class":179,"line":187},2,[177,189,190],{"class":183},"\u003C!-- favicon.ico は \u003Clink> 不要でルートに置くと自動認識 -->\n",[177,192,194],{"class":179,"line":193},3,[177,195,197],{"emptyLinePlaceholder":196},true,"\n",[177,199,201],{"class":179,"line":200},4,[177,202,203],{"class":183},"\u003C!-- PNG：モダンブラウザ・各種デバイス向け -->\n",[177,205,207,211,215,219,222,226,229,231,234,237,239,242,245,247,250],{"class":179,"line":206},5,[177,208,210],{"class":209},"sVt8B","\u003C",[177,212,214],{"class":213},"s9eBZ","link",[177,216,218],{"class":217},"sScJk"," rel",[177,220,221],{"class":209},"=",[177,223,225],{"class":224},"sZZnC","\"icon\"",[177,227,228],{"class":217}," type",[177,230,221],{"class":209},[177,232,233],{"class":224},"\"image\u002Fpng\"",[177,235,236],{"class":217}," sizes",[177,238,221],{"class":209},[177,240,241],{"class":224},"\"32x32\"",[177,243,244],{"class":217}," href",[177,246,221],{"class":209},[177,248,249],{"class":224},"\"\u002Ffavicon-32x32.png\"",[177,251,252],{"class":209},">\n",[177,254,256,258,260,262,264,267,269,271,274,276,278,281],{"class":179,"line":255},6,[177,257,210],{"class":209},[177,259,214],{"class":213},[177,261,218],{"class":217},[177,263,221],{"class":209},[177,265,266],{"class":224},"\"apple-touch-icon\"",[177,268,236],{"class":217},[177,270,221],{"class":209},[177,272,273],{"class":224},"\"180x180\"",[177,275,244],{"class":217},[177,277,221],{"class":209},[177,279,280],{"class":224},"\"\u002Fapple-touch-icon.png\"",[177,282,252],{"class":209},[177,284,286],{"class":179,"line":285},7,[177,287,197],{"emptyLinePlaceholder":196},[177,289,291],{"class":179,"line":290},8,[177,292,293],{"class":183},"\u003C!-- SVG：Chrome \u002F Firefox \u002F Edge 向け（将来性） -->\n",[177,295,297,299,301,303,305,307,309,311,314,316,318,321],{"class":179,"line":296},9,[177,298,210],{"class":209},[177,300,214],{"class":213},[177,302,218],{"class":217},[177,304,221],{"class":209},[177,306,225],{"class":224},[177,308,228],{"class":217},[177,310,221],{"class":209},[177,312,313],{"class":224},"\"image\u002Fsvg+xml\"",[177,315,244],{"class":217},[177,317,221],{"class":209},[177,319,320],{"class":224},"\"\u002Ffavicon.svg\"",[177,322,252],{"class":209},[177,324,326],{"class":179,"line":325},10,[177,327,197],{"emptyLinePlaceholder":196},[177,329,331],{"class":179,"line":330},11,[177,332,333],{"class":183},"\u003C!-- PWA \u002F Android向け -->\n",[177,335,337,339,341,343,345,348,350,352,355],{"class":179,"line":336},12,[177,338,210],{"class":209},[177,340,214],{"class":213},[177,342,218],{"class":217},[177,344,221],{"class":209},[177,346,347],{"class":224},"\"manifest\"",[177,349,244],{"class":217},[177,351,221],{"class":209},[177,353,354],{"class":224},"\"\u002Fsite.webmanifest\"",[177,356,252],{"class":209},[17,358,359,362,363,366,367,144],{},[43,360,361],{},"site.webmanifest"," の ",[43,364,365],{},"icons"," 配列に192×192と512×512のPNGを登録しておくと、Androidホーム画面への追加やPWAインストール時に適切なアイコンが表示される（",[138,368,371],{"href":369,"rel":370},"https:\u002F\u002Fwww.w3.org\u002FTR\u002Fappmanifest\u002F#icons-member",[142],"Web App Manifest仕様 - W3C",[17,373,374,375,378],{},"ポイントは「SVGを優先しつつICOとPNGを保険として残す」構成にすることだ。ブラウザは ",[43,376,377],{},"\u003Clink>"," タグを上から評価し、サポートしている形式を自動で選ぶため、複数形式を並べても問題ない。",[17,380,381],{},[382,383],"img",{"alt":384,"src":385},"スクショ: ブラウザのタブにファビコンが表示されているようす","TODO-screenshot",[29,387],{},[12,389,390],{"id":390},"実際にファビコンを用意する方法",[36,392,394],{"id":393},"手順1元画像を用意する","手順1：元画像を用意する",[17,396,397],{},"最低でも512×512px以上の正方形画像（PNGまたはSVG）を用意する。これを元に各サイズへリサイズ・変換する。ロゴや既存のアイコン素材をそのまま使うことが多い。",[36,399,401],{"id":400},"手順2必要なサイズ形式に変換する","手順2：必要なサイズ・形式に変換する",[17,403,404,405,408,409,412],{},"複数サイズのICO、各種PNG、SVGを手作業で揃えるのは手間がかかる。オンラインツールを使うのが現実的で、代表的なものに ",[24,406,407],{},"RealFaviconGenerator"," や ",[24,410,411],{},"Favicon.io"," がある。どちらも無料で使えるが、アップロードした画像がサーバーに送信・保存される点は留意が必要だ。",[17,414,415,416,421],{},"プライバシーを重視する場合、または社内ロゴや非公開素材を扱う場合は、ファイルがサーバーへ送信されないツールが安心だ。",[138,417,420],{"href":418,"rel":419},"https:\u002F\u002Fzerosend.site\u002Ftools\u002Ffavicon-generator",[142],"ファビコン生成ツール"," はブラウザ内だけで処理が完結し、アップロードした画像が外部サーバーに送信されない設計になっている。ICO・PNG・SVGの各形式を一括で出力できるため、上記の推奨構成を一度に揃えられる。",[17,423,424],{},[382,425],{"alt":426,"src":385},"スクショ: ファビコン生成ツールの操作画面",[36,428,430],{"id":429},"手順3ファイルを配置してhtmlに記述する","手順3：ファイルを配置してHTMLに記述する",[17,432,433,434,436,437,440],{},"生成したファイルをWebサーバーのルートディレクトリ（または任意のパス）に配置し、前節で示した ",[43,435,377],{}," タグを ",[43,438,439],{},"\u003Chead>"," 内に記述すれば完了だ。",[17,442,443],{},"配置後は複数のブラウザとデバイスで表示を確認する。Chromeの開発者ツール（DevTools）のApplicationタブにある「Manifest」セクションでPWA用アイコンの認識状況も確認できる。",[29,445],{},[12,447,448],{"id":448},"よくある失敗と注意点",[17,450,451,454],{},[24,452,453],{},"キャッシュが残って更新されない","：ファビコンはブラウザに強くキャッシュされる。変更後に反映されない場合は、ファイル名にバージョン番号やクエリパラメータを付与するか、スーパーリロード（Ctrl+Shift+R）で確認する。",[17,456,457,460,461,463,464,467],{},[24,458,459],{},"サイズ指定を省略する","：",[43,462,120],{}," 属性を省略すると、ブラウザが適切なファビコンを選択できず、低解像度のアイコンが拡大表示される場合がある。必ず ",[43,465,466],{},"sizes=\"32x32\""," のように明示する。",[17,469,470,473,474,476],{},[24,471,472],{},"ICOファイルを省略する","：古いブラウザや一部のRSSリーダー、ブックマーク管理ツールはICOしか認識しない。",[43,475,52],{}," をルートに置くことで余計なトラブルを防げる。",[17,478,479,482,483,486],{},[24,480,481],{},"apple-touch-icon を忘れる","：iOSでホーム画面に追加した際に使われるアイコンは ",[43,484,485],{},"apple-touch-icon"," で指定する。これを省略すると、iOSがサイトのスクリーンショットをアイコン代わりに使うため、見栄えが悪くなる。",[29,488],{},[12,490,491],{"id":491},"まとめ",[17,493,494,495,498],{},"ファビコンの形式選びは「どれか一つを選ぶ」問題ではなく、",[24,496,497],{},"それぞれの形式の役割を理解して組み合わせる","ことがポイントだ。",[500,501,502,509,515],"ul",{},[503,504,505,508],"li",{},[24,506,507],{},"ICO","：後方互換のためルートに置く",[503,510,511,514],{},[24,512,513],{},"PNG","：現在の主力。32×32、180×180、192×192、512×512を用意",[503,516,517,520],{},[24,518,519],{},"SVG","：ダークモード対応と将来の主流候補。現時点はPNG・ICOと併用",[17,522,523,524,527,528,530],{},"各形式を手動で揃えるのが面倒な場合は、ブラウザ内で完結する ",[138,525,420],{"href":418,"rel":526},[142]," のようなツールを活用して一括生成するのが効率的だ。形式の組み合わせと ",[43,529,377],{}," タグの記述を正しく設定すれば、あらゆるデバイス・ブラウザで意図通りのファビコンが表示される。",[532,533,534],"style",{},"html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":173,"searchDepth":187,"depth":187,"links":536},[537,538,543,544,549,550],{"id":14,"depth":187,"text":15},{"id":33,"depth":187,"text":34,"children":539},[540,541,542],{"id":38,"depth":193,"text":39},{"id":63,"depth":193,"text":64},{"id":124,"depth":193,"text":125},{"id":163,"depth":187,"text":163},{"id":390,"depth":187,"text":390,"children":545},[546,547,548],{"id":393,"depth":193,"text":394},{"id":400,"depth":193,"text":401},{"id":429,"depth":193,"text":430},{"id":448,"depth":187,"text":448},{"id":491,"depth":187,"text":491},"tech",null,"ファビコンの形式（SVG・PNG・ICO）ごとの違いと、ブラウザ対応・設定方法をWeb担当者向けに解説。ブラウザ内完結の無料ツールも紹介。",false,"md","ja",{},"\u002Fblog\u002Ffavicon-svg-png-ico-guide","2026-05-28",{"title":6,"description":553},"favicon-svg-png-ico-guide","blog\u002Ffavicon-svg-png-ico-guide",[564,565,566,567],"ファビコン","Web制作","SEO","技術解説","ah6-GegUDt51_pojAOyzLzrF3LNnhaO7JPdUWvu8L9M",{"id":570,"title":571,"author":7,"body":572,"category":551,"coverImage":552,"description":1365,"draft":554,"extension":555,"locale":556,"meta":1366,"navigation":196,"noindex":554,"path":1367,"publishedAt":1368,"seo":1369,"slug":1370,"stem":1371,"tags":1372,"updatedAt":1373,"__hash__":1374},"blog\u002Fblog\u002Ffavicon-complete-guide-2026.md","ファビコン 完全ガイド 2026 — サイズ・形式・HTML 設置まで全部入り",{"type":9,"value":573,"toc":1323},[574,581,585,591,612,616,619,623,627,649,656,663,666,680,684,687,694,768,772,779,782,792,796,799,805,963,967,973,977,982,1112,1119,1128,1132,1136,1139,1143,1146,1149,1159,1163,1169,1173,1176,1210,1213,1216,1220,1223,1227,1236,1242,1248,1251,1254,1293,1297,1304,1306,1313,1320],[17,575,576,577,580],{},"ファビコン (favicon) は地味なアセットですが、種類・サイズ・形式の選択肢が多く、毎回「結局どれが必要なんだっけ?」となる人も多いはずです。本記事では 2026 年時点で本当に必要なアイコン一式と、HTML への組み込み、Zerosend の ",[138,578,420],{"href":579},"\u002Ftools\u002Ffavicon-generator"," の活用法を整理します。",[12,582,584],{"id":583},"ファビコンとは何か-1-分で復習","ファビコンとは何か (1 分で復習)",[36,586,588,590],{"id":587},"link-タグで参照される機能の総称",[43,589,377],{}," タグで参照される機能の総称",[17,592,593,594,597,598,600,601,604,605,604,608,611],{},"ファビコンはブラウザのタブ表示に使われるアイコン、だけではなく",[24,595,596],{},"タブ \u002F ブックマーク \u002F PWA ホーム画面 \u002F 検索結果","など複数の文脈で使われる画像の総称です。",[43,599,439],{}," 内の ",[43,602,603],{},"\u003Clink rel=\"icon\">"," \u002F ",[43,606,607],{},"\u003Clink rel=\"apple-touch-icon\">",[43,609,610],{},"\u003Clink rel=\"manifest\">"," で参照されるアセット群です。",[36,613,615],{"id":614},"表示場所によって最適なサイズ形式が違う","表示場所によって最適なサイズ・形式が違う",[17,617,618],{},"タブ用には 16×16 \u002F 32×32 の小さいアイコンが必要ですが、iPhone のホーム画面には 180×180 の PNG、Android の PWA には 192×192 と 512×512 の PNG が必要です。場所ごとに要件が違います。",[12,620,622],{"id":621},"_2026-年時点で本当に必要なアイコン","2026 年時点で本当に必要なアイコン",[36,624,626],{"id":625},"必須-3-つ","必須 3 つ",[500,628,629,634,640],{},[503,630,631,633],{},[43,632,52],{}," — デスクトップブラウザのタブ \u002F ブックマーク (16\u002F32\u002F48px のマルチサイズ)",[503,635,636,639],{},[43,637,638],{},"apple-touch-icon.png"," (180×180) — iOS のホーム画面",[503,641,642,604,645,648],{},[43,643,644],{},"icon-192.png",[43,646,647],{},"icon-512.png"," — Android \u002F PWA 対応",[36,650,652,653],{"id":651},"推奨-faviconsvg","推奨: ",[43,654,655],{},"favicon.svg",[17,657,658,659,662],{},"モダンブラウザ (Chrome \u002F Firefox \u002F Safari の最新版) は SVG ファビコンに対応済みです。ベクターなのでどのサイズでもシャープに表示されます。ダークモード切替にも対応できるので、2026 年は ",[24,660,661],{},"SVG を第一選択","にして ICO をフォールバックにする運用がおすすめです。",[36,664,665],{"id":665},"不要になったもの",[500,667,668,674],{},[503,669,670,673],{},[43,671,672],{},"browserconfig.xml"," (Windows 8\u002F10 タイル用) — IE 系と一緒に役目を終えています",[503,675,676,679],{},[43,677,678],{},"*.png"," の 70×70 \u002F 150×150 \u002F 310×310 (IE\u002FEdge Legacy 向け)",[12,681,683],{"id":682},"svg-ファビコンのメリットと対応ブラウザ","SVG ファビコンのメリットと対応ブラウザ",[36,685,686],{"id":686},"ダークモード自動切替",[17,688,689,690,693],{},"SVG 内に ",[43,691,692],{},"@media (prefers-color-scheme: dark)"," のスタイルを書くだけで、OS のダークモードに合わせて色を切り替えられます。Chrome \u002F Firefox の最新版は対応済みです。",[168,695,697],{"className":170,"code":696,"language":172,"meta":173,"style":173},"\u003Csvg>\n  \u003Cstyle>\n    @media (prefers-color-scheme: dark) {\n      .logo { fill: #fff; }\n    }\n  \u003C\u002Fstyle>\n  \u003Crect class=\"logo\" \u002F>\n\u003C\u002Fsvg>\n",[43,698,699,708,717,722,727,732,741,759],{"__ignoreMap":173},[177,700,701,703,706],{"class":179,"line":180},[177,702,210],{"class":209},[177,704,705],{"class":213},"svg",[177,707,252],{"class":209},[177,709,710,713,715],{"class":179,"line":187},[177,711,712],{"class":209},"  \u003C",[177,714,532],{"class":213},[177,716,252],{"class":209},[177,718,719],{"class":179,"line":193},[177,720,721],{"class":209},"    @media (prefers-color-scheme: dark) {\n",[177,723,724],{"class":179,"line":200},[177,725,726],{"class":209},"      .logo { fill: #fff; }\n",[177,728,729],{"class":179,"line":206},[177,730,731],{"class":209},"    }\n",[177,733,734,737,739],{"class":179,"line":255},[177,735,736],{"class":209},"  \u003C\u002F",[177,738,532],{"class":213},[177,740,252],{"class":209},[177,742,743,745,748,751,753,756],{"class":179,"line":285},[177,744,712],{"class":209},[177,746,747],{"class":213},"rect",[177,749,750],{"class":217}," class",[177,752,221],{"class":209},[177,754,755],{"class":224},"\"logo\"",[177,757,758],{"class":209}," \u002F>\n",[177,760,761,764,766],{"class":179,"line":290},[177,762,763],{"class":209},"\u003C\u002F",[177,765,705],{"class":213},[177,767,252],{"class":209},[36,769,771],{"id":770},"アニメーション-限定的","アニメーション (限定的)",[17,773,774,775,778],{},"SMIL \u002F CSS アニメーションは技術的には可能ですが、ブラウザが",[24,776,777],{},"アイドル時には動かさない","等の最適化を入れるケースが多く、過信は禁物です。原則は静止画として設計しましょう。",[36,780,781],{"id":781},"非対応ブラウザへのフォールバック",[17,783,784,787,788,791],{},[43,785,786],{},"\u003Clink rel=\"icon\" type=\"image\u002Fsvg+xml\">"," と ",[43,789,790],{},"\u003Clink rel=\"alternate icon\" type=\"image\u002Fx-icon\">"," を並べておけば、対応ブラウザは SVG、非対応は ICO を使います。",[12,793,795],{"id":794},"sitewebmanifest-と-pwa","site.webmanifest と PWA",[36,797,798],{"id":798},"必須プロパティ",[17,800,801,802,804],{},"PWA 対応を見据えると ",[43,803,361],{}," を用意します。最低限の中身はこうなります。",[168,806,810],{"className":807,"code":808,"language":809,"meta":173,"style":173},"language-json shiki shiki-themes github-light github-dark","{\n  \"name\": \"My Site\",\n  \"short_name\": \"MySite\",\n  \"icons\": [\n    { \"src\": \"\u002Ficon-192.png\", \"sizes\": \"192x192\", \"type\": \"image\u002Fpng\" },\n    { \"src\": \"\u002Ficon-512.png\", \"sizes\": \"512x512\", \"type\": \"image\u002Fpng\" }\n  ],\n  \"theme_color\": \"#0a0a0a\",\n  \"background_color\": \"#ffffff\",\n  \"display\": \"standalone\"\n}\n","json",[43,811,812,817,832,844,852,888,919,924,936,948,958],{"__ignoreMap":173},[177,813,814],{"class":179,"line":180},[177,815,816],{"class":209},"{\n",[177,818,819,823,826,829],{"class":179,"line":187},[177,820,822],{"class":821},"sj4cs","  \"name\"",[177,824,825],{"class":209},": ",[177,827,828],{"class":224},"\"My Site\"",[177,830,831],{"class":209},",\n",[177,833,834,837,839,842],{"class":179,"line":193},[177,835,836],{"class":821},"  \"short_name\"",[177,838,825],{"class":209},[177,840,841],{"class":224},"\"MySite\"",[177,843,831],{"class":209},[177,845,846,849],{"class":179,"line":200},[177,847,848],{"class":821},"  \"icons\"",[177,850,851],{"class":209},": [\n",[177,853,854,857,860,862,865,868,871,873,876,878,881,883,885],{"class":179,"line":206},[177,855,856],{"class":209},"    { ",[177,858,859],{"class":821},"\"src\"",[177,861,825],{"class":209},[177,863,864],{"class":224},"\"\u002Ficon-192.png\"",[177,866,867],{"class":209},", ",[177,869,870],{"class":821},"\"sizes\"",[177,872,825],{"class":209},[177,874,875],{"class":224},"\"192x192\"",[177,877,867],{"class":209},[177,879,880],{"class":821},"\"type\"",[177,882,825],{"class":209},[177,884,233],{"class":224},[177,886,887],{"class":209}," },\n",[177,889,890,892,894,896,899,901,903,905,908,910,912,914,916],{"class":179,"line":255},[177,891,856],{"class":209},[177,893,859],{"class":821},[177,895,825],{"class":209},[177,897,898],{"class":224},"\"\u002Ficon-512.png\"",[177,900,867],{"class":209},[177,902,870],{"class":821},[177,904,825],{"class":209},[177,906,907],{"class":224},"\"512x512\"",[177,909,867],{"class":209},[177,911,880],{"class":821},[177,913,825],{"class":209},[177,915,233],{"class":224},[177,917,918],{"class":209}," }\n",[177,920,921],{"class":179,"line":285},[177,922,923],{"class":209},"  ],\n",[177,925,926,929,931,934],{"class":179,"line":290},[177,927,928],{"class":821},"  \"theme_color\"",[177,930,825],{"class":209},[177,932,933],{"class":224},"\"#0a0a0a\"",[177,935,831],{"class":209},[177,937,938,941,943,946],{"class":179,"line":296},[177,939,940],{"class":821},"  \"background_color\"",[177,942,825],{"class":209},[177,944,945],{"class":224},"\"#ffffff\"",[177,947,831],{"class":209},[177,949,950,953,955],{"class":179,"line":325},[177,951,952],{"class":821},"  \"display\"",[177,954,825],{"class":209},[177,956,957],{"class":224},"\"standalone\"\n",[177,959,960],{"class":179,"line":330},[177,961,962],{"class":209},"}\n",[36,964,966],{"id":965},"ios-の癖","iOS の癖",[17,968,969,970,972],{},"iOS は ",[43,971,638],{}," を優先するため、webmanifest 側に icon を書いても iOS ホーム画面には適用されません。Android と iOS で別々のファイルを用意する前提で運用しましょう。",[12,974,976],{"id":975},"html-に設置する正しい書き方","HTML に設置する正しい書き方",[17,978,979,981],{},[43,980,439],{}," に並べる順序のお手本:",[168,983,985],{"className":170,"code":984,"language":172,"meta":173,"style":173},"\u003Clink rel=\"icon\" type=\"image\u002Fsvg+xml\" href=\"\u002Ffavicon.svg\">\n\u003Clink rel=\"alternate icon\" type=\"image\u002Fx-icon\" href=\"\u002Ffavicon.ico\">\n\u003Clink rel=\"apple-touch-icon\" sizes=\"180x180\" href=\"\u002Fapple-touch-icon.png\">\n\u003Clink rel=\"manifest\" href=\"\u002Fsite.webmanifest\">\n\u003Cmeta name=\"theme-color\" content=\"#0a0a0a\">\n",[43,986,987,1013,1042,1068,1088],{"__ignoreMap":173},[177,988,989,991,993,995,997,999,1001,1003,1005,1007,1009,1011],{"class":179,"line":180},[177,990,210],{"class":209},[177,992,214],{"class":213},[177,994,218],{"class":217},[177,996,221],{"class":209},[177,998,225],{"class":224},[177,1000,228],{"class":217},[177,1002,221],{"class":209},[177,1004,313],{"class":224},[177,1006,244],{"class":217},[177,1008,221],{"class":209},[177,1010,320],{"class":224},[177,1012,252],{"class":209},[177,1014,1015,1017,1019,1021,1023,1026,1028,1030,1033,1035,1037,1040],{"class":179,"line":187},[177,1016,210],{"class":209},[177,1018,214],{"class":213},[177,1020,218],{"class":217},[177,1022,221],{"class":209},[177,1024,1025],{"class":224},"\"alternate icon\"",[177,1027,228],{"class":217},[177,1029,221],{"class":209},[177,1031,1032],{"class":224},"\"image\u002Fx-icon\"",[177,1034,244],{"class":217},[177,1036,221],{"class":209},[177,1038,1039],{"class":224},"\"\u002Ffavicon.ico\"",[177,1041,252],{"class":209},[177,1043,1044,1046,1048,1050,1052,1054,1056,1058,1060,1062,1064,1066],{"class":179,"line":193},[177,1045,210],{"class":209},[177,1047,214],{"class":213},[177,1049,218],{"class":217},[177,1051,221],{"class":209},[177,1053,266],{"class":224},[177,1055,236],{"class":217},[177,1057,221],{"class":209},[177,1059,273],{"class":224},[177,1061,244],{"class":217},[177,1063,221],{"class":209},[177,1065,280],{"class":224},[177,1067,252],{"class":209},[177,1069,1070,1072,1074,1076,1078,1080,1082,1084,1086],{"class":179,"line":200},[177,1071,210],{"class":209},[177,1073,214],{"class":213},[177,1075,218],{"class":217},[177,1077,221],{"class":209},[177,1079,347],{"class":224},[177,1081,244],{"class":217},[177,1083,221],{"class":209},[177,1085,354],{"class":224},[177,1087,252],{"class":209},[177,1089,1090,1092,1095,1098,1100,1103,1106,1108,1110],{"class":179,"line":206},[177,1091,210],{"class":209},[177,1093,1094],{"class":213},"meta",[177,1096,1097],{"class":217}," name",[177,1099,221],{"class":209},[177,1101,1102],{"class":224},"\"theme-color\"",[177,1104,1105],{"class":217}," content",[177,1107,221],{"class":209},[177,1109,933],{"class":224},[177,1111,252],{"class":209},[36,1113,1115,1118],{"id":1114},"sizesany-の罠",[43,1116,1117],{},"sizes=\"any\""," の罠",[17,1120,1121,1123,1124,1127],{},[43,1122,1117],{}," を SVG に付けると、ブラウザが SVG を ICO より優先するようになります。基本的に意図通りですが、古い iOS で誤解される例があったため、2026 年時点では",[24,1125,1126],{},"書かないのが無難","です。",[12,1129,1131],{"id":1130},"ファビコン生成アプローチの-3-類型と向き不向き","ファビコン生成アプローチの 3 類型と向き不向き",[36,1133,1135],{"id":1134},"アップロード型のオンライン-saas","アップロード型のオンライン SaaS",[17,1137,1138],{},"高機能で一発生成。ただしロゴ画像を一度サーバーに送ります。公開済みのロゴなら気にならないケースが多いです。",[36,1140,1142],{"id":1141},"デスクトップ-ローカルアプリ","デスクトップ \u002F ローカルアプリ",[17,1144,1145],{},"ImageMagick \u002F Sketch \u002F Figma 等。CLI や GUI で手元だけで生成できますが、セットアップが必要です。",[36,1147,1148],{"id":1148},"ブラウザ内完結型",[17,1150,1151,1152,1154,1155,1158],{},"Zerosend の ",[138,1153,420],{"href":579}," がこの型。",[24,1156,1157],{},"インストール不要 + 手元完結","で、NDA 下の未公開ロゴでも気兼ねなく使えます。",[36,1160,1162],{"id":1161},"nda-下未公開ブランド社内案件での選び方","NDA 下・未公開ブランド・社内案件での選び方",[17,1164,1165,1166,1168],{},"受託案件や新規ブランドの立ち上げでは、ロゴ画像の取り扱いに神経を使います。この場合は",[24,1167,1148],{},"を選ぶか、デスクトップアプリで手元処理するのが安心です。",[12,1170,1172],{"id":1171},"zerosend-でブラウザ内完結で作る手順","Zerosend でブラウザ内完結で作る手順",[17,1174,1175],{},"1 枚の PNG または SVG から、必要なファイル一式 (ICO \u002F PNG 複数サイズ \u002F apple-touch-icon \u002F site.webmanifest \u002F HTML スニペット) を ZIP で一気に生成できます。",[1177,1178,1179,1184,1187,1190,1193,1196],"ol",{},[503,1180,1181,1183],{},[138,1182,579],{"href":579}," にアクセス",[503,1185,1186],{},"ロゴ画像をドラッグ&ドロップ (推奨: 512×512 以上の正方形)",[503,1188,1189],{},"アプリ名 \u002F theme_color \u002F background_color を入力",[503,1191,1192],{},"「ファビコン一式を生成する」",[503,1194,1195],{},"生成されたプレビューを確認し、ZIP をダウンロード",[503,1197,1198,1199,1202,1203,1205,1206,1209],{},"ZIP に同梱の ",[43,1200,1201],{},"snippet.html"," の内容を ",[43,1204,439],{}," に貼り付け、各ファイルをサイトのルート (",[43,1207,1208],{},"\u002F",") に配置",[17,1211,1212],{},"ブラウザ内完結なので、ロゴ画像が外部に送られることはありません。",[12,1214,1215],{"id":1215},"よくある失敗",[36,1217,1219],{"id":1218},"retina-で滲む","Retina で滲む",[17,1221,1222],{},"タブで綺麗に見せるには 32×32 や 48×48 も用意する必要があります。Zerosend は 16\u002F32\u002F48 のマルチサイズ ICO を自動で作ります。",[36,1224,1226],{"id":1225},"ios-ホーム画面で余白が出る","iOS ホーム画面で余白が出る",[17,1228,1229,1231,1232,1235],{},[43,1230,638],{}," は",[24,1233,1234],{},"背景透過に対応していません","。透過 PNG を渡すと iOS が黒背景で埋めてしまうので、背景色を明示的に塗った PNG を用意しましょう。",[36,1237,1239,1241],{"id":1238},"faviconico-だけしか指定していない",[43,1240,52],{}," だけしか指定していない",[17,1243,1244,1245,1247],{},"モダンブラウザで SVG を使うメリットを取りこぼします。少なくとも ",[43,1246,655],{}," は併用するのが 2026 年の標準です。",[36,1249,1250],{"id":1250},"ブラウザキャッシュが残って古いアイコンが表示される",[17,1252,1253],{},"ブラウザはファビコンを積極的にキャッシュします。差し替え後に古いアイコンのままになる時は次を試します。",[500,1255,1256,1269,1275,1286],{},[503,1257,1258,1261,1262,604,1265,1268],{},[24,1259,1260],{},"強制リロード"," (",[43,1263,1264],{},"Ctrl+Shift+R",[43,1266,1267],{},"Cmd+Shift+R",") で再取得",[503,1270,1271,1274],{},[24,1272,1273],{},"プライベート \u002F シークレットウィンドウ"," で確認 (キャッシュを噛まない)",[503,1276,1277,1278,1281,1282,1285],{},"本番では ",[43,1279,1280],{},"\u003Clink rel=\"icon\" href=\"\u002Ffavicon.ico?v=2\">"," のように",[24,1283,1284],{},"バージョンクエリ","を付けて即時反映を促す",[503,1287,1288,1289,1292],{},"Chrome は ",[43,1290,1291],{},"chrome:\u002F\u002Ffavicon\u002Fhttps:\u002F\u002Fyour-site.com\u002F"," でブラウザが認識しているファビコンを直接確認できる",[36,1294,1296],{"id":1295},"google-検索結果にファビコンが出ない","Google 検索結果にファビコンが出ない",[17,1298,1299,1300,1303],{},"Google モバイル SERP に表示されるには ",[24,1301,1302],{},"48×48 以上のアイコンがクロール可能","であること、かつ「サイト全体を代表するアイコン」というガイドラインに沿っていることが求められます。Zerosend のファビコン生成ツールは 16\u002F32\u002F48 のマルチサイズ ICO を自動で書き出すため、この要件は満たせます。サブドメインごとに別のファビコンを設定することも可能です。",[12,1305,491],{"id":491},[17,1307,1308,1309,1312],{},"2026 年のファビコン運用は「SVG を第一選択 + ICO \u002F apple-touch-icon \u002F PWA アイコン + webmanifest」の組み合わせで完成します。1 枚の画像から一式を生成するなら、ブラウザ内で完結する ",[138,1310,1311],{"href":579},"Zerosend のファビコン生成ツール"," が手早くておすすめです。",[17,1314,1315,1316],{},"関連: ",[138,1317,1319],{"href":1318},"\u002Fblog\u002Ffavicon-generator-intro","ファビコン生成ツールの舞台裏",[532,1321,1322],{},"html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}",{"title":173,"searchDepth":187,"depth":187,"links":1324},[1325,1330,1336,1341,1345,1349,1355,1356,1364],{"id":583,"depth":187,"text":584,"children":1326},[1327,1329],{"id":587,"depth":193,"text":1328},"\u003Clink> タグで参照される機能の総称",{"id":614,"depth":193,"text":615},{"id":621,"depth":187,"text":622,"children":1331},[1332,1333,1335],{"id":625,"depth":193,"text":626},{"id":651,"depth":193,"text":1334},"推奨: favicon.svg",{"id":665,"depth":193,"text":665},{"id":682,"depth":187,"text":683,"children":1337},[1338,1339,1340],{"id":686,"depth":193,"text":686},{"id":770,"depth":193,"text":771},{"id":781,"depth":193,"text":781},{"id":794,"depth":187,"text":795,"children":1342},[1343,1344],{"id":798,"depth":193,"text":798},{"id":965,"depth":193,"text":966},{"id":975,"depth":187,"text":976,"children":1346},[1347],{"id":1114,"depth":193,"text":1348},"sizes=\"any\" の罠",{"id":1130,"depth":187,"text":1131,"children":1350},[1351,1352,1353,1354],{"id":1134,"depth":193,"text":1135},{"id":1141,"depth":193,"text":1142},{"id":1148,"depth":193,"text":1148},{"id":1161,"depth":193,"text":1162},{"id":1171,"depth":187,"text":1172},{"id":1215,"depth":187,"text":1215,"children":1357},[1358,1359,1360,1362,1363],{"id":1218,"depth":193,"text":1219},{"id":1225,"depth":193,"text":1226},{"id":1238,"depth":193,"text":1361},"favicon.ico だけしか指定していない",{"id":1250,"depth":193,"text":1250},{"id":1295,"depth":193,"text":1296},{"id":491,"depth":187,"text":491},"ファビコンのサイズは結局どれが必要? ICO と SVG の使い分けは? 2026 年時点で本当に必要なアイコンセットと、1 枚の画像からブラウザ内で一式生成できる方法を解説します。",{},"\u002Fblog\u002Ffavicon-complete-guide-2026","2026-04-19",{"title":571,"description":1365},"favicon-complete-guide-2026","blog\u002Ffavicon-complete-guide-2026",[564,565,519],"2026-05-14","rGRV7aRcqetLpG7f7z1cHwfvIdswbm-q-bojGTxqaWs",1782000330033]