[{"data":1,"prerenderedAt":815},["ShallowReactive",2],{"blog-tag-ja-web-design":3},[4],{"id":5,"title":6,"author":7,"body":8,"category":797,"coverImage":798,"description":799,"draft":800,"extension":801,"locale":802,"meta":803,"navigation":804,"noindex":800,"path":805,"publishedAt":806,"seo":807,"slug":808,"stem":809,"tags":810,"updatedAt":806,"__hash__":814},"blog\u002Fblog\u002Ffavicon-complete-guide-2026.md","ファビコン 完全ガイド 2026 — サイズ・形式・HTML 設置まで全部入り","Zerosend Editorial",{"type":9,"value":10,"toc":757},"minimark",[11,21,26,35,58,62,65,69,73,98,105,112,115,129,133,136,143,239,243,250,253,263,267,270,277,439,443,449,453,458,601,608,617,621,625,628,632,635,638,648,652,658,662,665,699,702,705,709,712,716,725,731,737,740,747,754],[12,13,14,15,20],"p",{},"ファビコン (favicon) は地味なアセットですが、種類・サイズ・形式の選択肢が多く、毎回「結局どれが必要なんだっけ?」となる人も多いはずです。本記事では 2026 年時点で本当に必要なアイコン一式と、HTML への組み込み、Zerosend の ",[16,17,19],"a",{"href":18},"\u002Ftools\u002Ffavicon-generator","ファビコン生成ツール"," の活用法を整理します。",[22,23,25],"h2",{"id":24},"ファビコンとは何か-1-分で復習","ファビコンとは何か (1 分で復習)",[27,28,30,34],"h3",{"id":29},"link-タグで参照される機能の総称",[31,32,33],"code",{},"\u003Clink>"," タグで参照される機能の総称",[12,36,37,38,42,43,46,47,50,51,50,54,57],{},"ファビコンはブラウザのタブ表示に使われるアイコン、だけではなく",[39,40,41],"strong",{},"タブ \u002F ブックマーク \u002F PWA ホーム画面 \u002F 検索結果","など複数の文脈で使われる画像の総称です。",[31,44,45],{},"\u003Chead>"," 内の ",[31,48,49],{},"\u003Clink rel=\"icon\">"," \u002F ",[31,52,53],{},"\u003Clink rel=\"apple-touch-icon\">",[31,55,56],{},"\u003Clink rel=\"manifest\">"," で参照されるアセット群です。",[27,59,61],{"id":60},"表示場所によって最適なサイズ形式が違う","表示場所によって最適なサイズ・形式が違う",[12,63,64],{},"タブ用には 16×16 \u002F 32×32 の小さいアイコンが必要ですが、iPhone のホーム画面には 180×180 の PNG、Android の PWA には 192×192 と 512×512 の PNG が必要です。場所ごとに要件が違います。",[22,66,68],{"id":67},"_2026-年時点で本当に必要なアイコン","2026 年時点で本当に必要なアイコン",[27,70,72],{"id":71},"必須-3-つ","必須 3 つ",[74,75,76,83,89],"ul",{},[77,78,79,82],"li",{},[31,80,81],{},"favicon.ico"," — デスクトップブラウザのタブ \u002F ブックマーク (16\u002F32\u002F48px のマルチサイズ)",[77,84,85,88],{},[31,86,87],{},"apple-touch-icon.png"," (180×180) — iOS のホーム画面",[77,90,91,50,94,97],{},[31,92,93],{},"icon-192.png",[31,95,96],{},"icon-512.png"," — Android \u002F PWA 対応",[27,99,101,102],{"id":100},"推奨-faviconsvg","推奨: ",[31,103,104],{},"favicon.svg",[12,106,107,108,111],{},"モダンブラウザ (Chrome \u002F Firefox \u002F Safari の最新版) は SVG ファビコンに対応済みです。ベクターなのでどのサイズでもシャープに表示されます。ダークモード切替にも対応できるので、2026 年は ",[39,109,110],{},"SVG を第一選択","にして ICO をフォールバックにする運用がおすすめです。",[27,113,114],{"id":114},"不要になったもの",[74,116,117,123],{},[77,118,119,122],{},[31,120,121],{},"browserconfig.xml"," (Windows 8\u002F10 タイル用) — IE 系と一緒に役目を終えています",[77,124,125,128],{},[31,126,127],{},"*.png"," の 70×70 \u002F 150×150 \u002F 310×310 (IE\u002FEdge Legacy 向け)",[22,130,132],{"id":131},"svg-ファビコンのメリットと対応ブラウザ","SVG ファビコンのメリットと対応ブラウザ",[27,134,135],{"id":135},"ダークモード自動切替",[12,137,138,139,142],{},"SVG 内に ",[31,140,141],{},"@media (prefers-color-scheme: dark)"," のスタイルを書くだけで、OS のダークモードに合わせて色を切り替えられます。Chrome \u002F Firefox の最新版は対応済みです。",[144,145,150],"pre",{"className":146,"code":147,"language":148,"meta":149,"style":149},"language-html shiki shiki-themes github-light github-dark","\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","html","",[31,151,152,168,179,185,191,197,207,229],{"__ignoreMap":149},[153,154,157,161,165],"span",{"class":155,"line":156},"line",1,[153,158,160],{"class":159},"sVt8B","\u003C",[153,162,164],{"class":163},"s9eBZ","svg",[153,166,167],{"class":159},">\n",[153,169,171,174,177],{"class":155,"line":170},2,[153,172,173],{"class":159},"  \u003C",[153,175,176],{"class":163},"style",[153,178,167],{"class":159},[153,180,182],{"class":155,"line":181},3,[153,183,184],{"class":159},"    @media (prefers-color-scheme: dark) {\n",[153,186,188],{"class":155,"line":187},4,[153,189,190],{"class":159},"      .logo { fill: #fff; }\n",[153,192,194],{"class":155,"line":193},5,[153,195,196],{"class":159},"    }\n",[153,198,200,203,205],{"class":155,"line":199},6,[153,201,202],{"class":159},"  \u003C\u002F",[153,204,176],{"class":163},[153,206,167],{"class":159},[153,208,210,212,215,219,222,226],{"class":155,"line":209},7,[153,211,173],{"class":159},[153,213,214],{"class":163},"rect",[153,216,218],{"class":217},"sScJk"," class",[153,220,221],{"class":159},"=",[153,223,225],{"class":224},"sZZnC","\"logo\"",[153,227,228],{"class":159}," \u002F>\n",[153,230,232,235,237],{"class":155,"line":231},8,[153,233,234],{"class":159},"\u003C\u002F",[153,236,164],{"class":163},[153,238,167],{"class":159},[27,240,242],{"id":241},"アニメーション-限定的","アニメーション (限定的)",[12,244,245,246,249],{},"SMIL \u002F CSS アニメーションは技術的には可能ですが、ブラウザが",[39,247,248],{},"アイドル時には動かさない","等の最適化を入れるケースが多く、過信は禁物です。原則は静止画として設計しましょう。",[27,251,252],{"id":252},"非対応ブラウザへのフォールバック",[12,254,255,258,259,262],{},[31,256,257],{},"\u003Clink rel=\"icon\" type=\"image\u002Fsvg+xml\">"," と ",[31,260,261],{},"\u003Clink rel=\"alternate icon\" type=\"image\u002Fx-icon\">"," を並べておけば、対応ブラウザは SVG、非対応は ICO を使います。",[22,264,266],{"id":265},"sitewebmanifest-と-pwa","site.webmanifest と PWA",[27,268,269],{"id":269},"必須プロパティ",[12,271,272,273,276],{},"PWA 対応を見据えると ",[31,274,275],{},"site.webmanifest"," を用意します。最低限の中身はこうなります。",[144,278,282],{"className":279,"code":280,"language":281,"meta":149,"style":149},"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",[31,283,284,289,304,316,324,361,392,397,409,422,433],{"__ignoreMap":149},[153,285,286],{"class":155,"line":156},[153,287,288],{"class":159},"{\n",[153,290,291,295,298,301],{"class":155,"line":170},[153,292,294],{"class":293},"sj4cs","  \"name\"",[153,296,297],{"class":159},": ",[153,299,300],{"class":224},"\"My Site\"",[153,302,303],{"class":159},",\n",[153,305,306,309,311,314],{"class":155,"line":181},[153,307,308],{"class":293},"  \"short_name\"",[153,310,297],{"class":159},[153,312,313],{"class":224},"\"MySite\"",[153,315,303],{"class":159},[153,317,318,321],{"class":155,"line":187},[153,319,320],{"class":293},"  \"icons\"",[153,322,323],{"class":159},": [\n",[153,325,326,329,332,334,337,340,343,345,348,350,353,355,358],{"class":155,"line":193},[153,327,328],{"class":159},"    { ",[153,330,331],{"class":293},"\"src\"",[153,333,297],{"class":159},[153,335,336],{"class":224},"\"\u002Ficon-192.png\"",[153,338,339],{"class":159},", ",[153,341,342],{"class":293},"\"sizes\"",[153,344,297],{"class":159},[153,346,347],{"class":224},"\"192x192\"",[153,349,339],{"class":159},[153,351,352],{"class":293},"\"type\"",[153,354,297],{"class":159},[153,356,357],{"class":224},"\"image\u002Fpng\"",[153,359,360],{"class":159}," },\n",[153,362,363,365,367,369,372,374,376,378,381,383,385,387,389],{"class":155,"line":199},[153,364,328],{"class":159},[153,366,331],{"class":293},[153,368,297],{"class":159},[153,370,371],{"class":224},"\"\u002Ficon-512.png\"",[153,373,339],{"class":159},[153,375,342],{"class":293},[153,377,297],{"class":159},[153,379,380],{"class":224},"\"512x512\"",[153,382,339],{"class":159},[153,384,352],{"class":293},[153,386,297],{"class":159},[153,388,357],{"class":224},[153,390,391],{"class":159}," }\n",[153,393,394],{"class":155,"line":209},[153,395,396],{"class":159},"  ],\n",[153,398,399,402,404,407],{"class":155,"line":231},[153,400,401],{"class":293},"  \"theme_color\"",[153,403,297],{"class":159},[153,405,406],{"class":224},"\"#0a0a0a\"",[153,408,303],{"class":159},[153,410,412,415,417,420],{"class":155,"line":411},9,[153,413,414],{"class":293},"  \"background_color\"",[153,416,297],{"class":159},[153,418,419],{"class":224},"\"#ffffff\"",[153,421,303],{"class":159},[153,423,425,428,430],{"class":155,"line":424},10,[153,426,427],{"class":293},"  \"display\"",[153,429,297],{"class":159},[153,431,432],{"class":224},"\"standalone\"\n",[153,434,436],{"class":155,"line":435},11,[153,437,438],{"class":159},"}\n",[27,440,442],{"id":441},"ios-の癖","iOS の癖",[12,444,445,446,448],{},"iOS は ",[31,447,87],{}," を優先するため、webmanifest 側に icon を書いても iOS ホーム画面には適用されません。Android と iOS で別々のファイルを用意する前提で運用しましょう。",[22,450,452],{"id":451},"html-に設置する正しい書き方","HTML に設置する正しい書き方",[12,454,455,457],{},[31,456,45],{}," に並べる順序のお手本:",[144,459,461],{"className":146,"code":460,"language":148,"meta":149,"style":149},"\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",[31,462,463,496,525,555,577],{"__ignoreMap":149},[153,464,465,467,470,473,475,478,481,483,486,489,491,494],{"class":155,"line":156},[153,466,160],{"class":159},[153,468,469],{"class":163},"link",[153,471,472],{"class":217}," rel",[153,474,221],{"class":159},[153,476,477],{"class":224},"\"icon\"",[153,479,480],{"class":217}," type",[153,482,221],{"class":159},[153,484,485],{"class":224},"\"image\u002Fsvg+xml\"",[153,487,488],{"class":217}," href",[153,490,221],{"class":159},[153,492,493],{"class":224},"\"\u002Ffavicon.svg\"",[153,495,167],{"class":159},[153,497,498,500,502,504,506,509,511,513,516,518,520,523],{"class":155,"line":170},[153,499,160],{"class":159},[153,501,469],{"class":163},[153,503,472],{"class":217},[153,505,221],{"class":159},[153,507,508],{"class":224},"\"alternate icon\"",[153,510,480],{"class":217},[153,512,221],{"class":159},[153,514,515],{"class":224},"\"image\u002Fx-icon\"",[153,517,488],{"class":217},[153,519,221],{"class":159},[153,521,522],{"class":224},"\"\u002Ffavicon.ico\"",[153,524,167],{"class":159},[153,526,527,529,531,533,535,538,541,543,546,548,550,553],{"class":155,"line":181},[153,528,160],{"class":159},[153,530,469],{"class":163},[153,532,472],{"class":217},[153,534,221],{"class":159},[153,536,537],{"class":224},"\"apple-touch-icon\"",[153,539,540],{"class":217}," sizes",[153,542,221],{"class":159},[153,544,545],{"class":224},"\"180x180\"",[153,547,488],{"class":217},[153,549,221],{"class":159},[153,551,552],{"class":224},"\"\u002Fapple-touch-icon.png\"",[153,554,167],{"class":159},[153,556,557,559,561,563,565,568,570,572,575],{"class":155,"line":187},[153,558,160],{"class":159},[153,560,469],{"class":163},[153,562,472],{"class":217},[153,564,221],{"class":159},[153,566,567],{"class":224},"\"manifest\"",[153,569,488],{"class":217},[153,571,221],{"class":159},[153,573,574],{"class":224},"\"\u002Fsite.webmanifest\"",[153,576,167],{"class":159},[153,578,579,581,584,587,589,592,595,597,599],{"class":155,"line":193},[153,580,160],{"class":159},[153,582,583],{"class":163},"meta",[153,585,586],{"class":217}," name",[153,588,221],{"class":159},[153,590,591],{"class":224},"\"theme-color\"",[153,593,594],{"class":217}," content",[153,596,221],{"class":159},[153,598,406],{"class":224},[153,600,167],{"class":159},[27,602,604,607],{"id":603},"sizesany-の罠",[31,605,606],{},"sizes=\"any\""," の罠",[12,609,610,612,613,616],{},[31,611,606],{}," を SVG に付けると、ブラウザが SVG を ICO より優先するようになります。基本的に意図通りですが、古い iOS で誤解される例があったため、2026 年時点では",[39,614,615],{},"書かないのが無難","です。",[22,618,620],{"id":619},"ファビコン生成アプローチの-3-類型と向き不向き","ファビコン生成アプローチの 3 類型と向き不向き",[27,622,624],{"id":623},"アップロード型のオンライン-saas","アップロード型のオンライン SaaS",[12,626,627],{},"高機能で一発生成。ただしロゴ画像を一度サーバーに送ります。公開済みのロゴなら気にならないケースが多いです。",[27,629,631],{"id":630},"デスクトップ-ローカルアプリ","デスクトップ \u002F ローカルアプリ",[12,633,634],{},"ImageMagick \u002F Sketch \u002F Figma 等。CLI や GUI で手元だけで生成できますが、セットアップが必要です。",[27,636,637],{"id":637},"ブラウザ内完結型",[12,639,640,641,643,644,647],{},"Zerosend の ",[16,642,19],{"href":18}," がこの型。",[39,645,646],{},"インストール不要 + 手元完結","で、NDA 下の未公開ロゴでも気兼ねなく使えます。",[27,649,651],{"id":650},"nda-下未公開ブランド社内案件での選び方","NDA 下・未公開ブランド・社内案件での選び方",[12,653,654,655,657],{},"受託案件や新規ブランドの立ち上げでは、ロゴ画像の取り扱いに神経を使います。この場合は",[39,656,637],{},"を選ぶか、デスクトップアプリで手元処理するのが安心です。",[22,659,661],{"id":660},"zerosend-でブラウザ内完結で作る手順","Zerosend でブラウザ内完結で作る手順",[12,663,664],{},"1 枚の PNG または SVG から、必要なファイル一式 (ICO \u002F PNG 複数サイズ \u002F apple-touch-icon \u002F site.webmanifest \u002F HTML スニペット) を ZIP で一気に生成できます。",[666,667,668,673,676,679,682,685],"ol",{},[77,669,670,672],{},[16,671,18],{"href":18}," にアクセス",[77,674,675],{},"ロゴ画像をドラッグ&ドロップ (推奨: 512×512 以上の正方形)",[77,677,678],{},"アプリ名 \u002F theme_color \u002F background_color を入力",[77,680,681],{},"「ファビコン一式を生成する」",[77,683,684],{},"生成されたプレビューを確認し、ZIP をダウンロード",[77,686,687,688,691,692,694,695,698],{},"ZIP に同梱の ",[31,689,690],{},"snippet.html"," の内容を ",[31,693,45],{}," に貼り付け、各ファイルをサイトのルート (",[31,696,697],{},"\u002F",") に配置",[12,700,701],{},"ブラウザ内完結なので、ロゴ画像が外部に送られることはありません。",[22,703,704],{"id":704},"よくある失敗",[27,706,708],{"id":707},"retina-で滲む","Retina で滲む",[12,710,711],{},"タブで綺麗に見せるには 32×32 や 48×48 も用意する必要があります。Zerosend は 16\u002F32\u002F48 のマルチサイズ ICO を自動で作ります。",[27,713,715],{"id":714},"ios-ホーム画面で余白が出る","iOS ホーム画面で余白が出る",[12,717,718,720,721,724],{},[31,719,87],{}," は",[39,722,723],{},"背景透過に対応していません","。透過 PNG を渡すと iOS が黒背景で埋めてしまうので、背景色を明示的に塗った PNG を用意しましょう。",[27,726,728,730],{"id":727},"faviconico-だけしか指定していない",[31,729,81],{}," だけしか指定していない",[12,732,733,734,736],{},"モダンブラウザで SVG を使うメリットを取りこぼします。少なくとも ",[31,735,104],{}," は併用するのが 2026 年の標準です。",[22,738,739],{"id":739},"まとめ",[12,741,742,743,746],{},"2026 年のファビコン運用は「SVG を第一選択 + ICO \u002F apple-touch-icon \u002F PWA アイコン + webmanifest」の組み合わせで完成します。1 枚の画像から一式を生成するなら、ブラウザ内で完結する ",[16,744,745],{"href":18},"Zerosend のファビコン生成ツール"," が手早くておすすめです。",[12,748,749,750],{},"関連: ",[16,751,753],{"href":752},"\u002Fblog\u002Ffavicon-generator-intro","ファビコン生成ツールの舞台裏",[176,755,756],{},"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":149,"searchDepth":170,"depth":170,"links":758},[759,764,770,775,779,783,789,790,796],{"id":24,"depth":170,"text":25,"children":760},[761,763],{"id":29,"depth":181,"text":762},"\u003Clink> タグで参照される機能の総称",{"id":60,"depth":181,"text":61},{"id":67,"depth":170,"text":68,"children":765},[766,767,769],{"id":71,"depth":181,"text":72},{"id":100,"depth":181,"text":768},"推奨: favicon.svg",{"id":114,"depth":181,"text":114},{"id":131,"depth":170,"text":132,"children":771},[772,773,774],{"id":135,"depth":181,"text":135},{"id":241,"depth":181,"text":242},{"id":252,"depth":181,"text":252},{"id":265,"depth":170,"text":266,"children":776},[777,778],{"id":269,"depth":181,"text":269},{"id":441,"depth":181,"text":442},{"id":451,"depth":170,"text":452,"children":780},[781],{"id":603,"depth":181,"text":782},"sizes=\"any\" の罠",{"id":619,"depth":170,"text":620,"children":784},[785,786,787,788],{"id":623,"depth":181,"text":624},{"id":630,"depth":181,"text":631},{"id":637,"depth":181,"text":637},{"id":650,"depth":181,"text":651},{"id":660,"depth":170,"text":661},{"id":704,"depth":170,"text":704,"children":791},[792,793,794],{"id":707,"depth":181,"text":708},{"id":714,"depth":181,"text":715},{"id":727,"depth":181,"text":795},"favicon.ico だけしか指定していない",{"id":739,"depth":170,"text":739},"tech",null,"ファビコンのサイズは結局どれが必要? ICO と SVG の使い分けは? 2026 年時点で本当に必要なアイコンセットと、1 枚の画像からブラウザ内で一式生成できる方法を解説します。",false,"md","ja",{},true,"\u002Fblog\u002Ffavicon-complete-guide-2026","2026-04-19",{"title":6,"description":799},"favicon-complete-guide-2026","blog\u002Ffavicon-complete-guide-2026",[811,812,813],"ファビコン","Web制作","SVG","6QfQxvS0o-pta89QeqPnRWk9obonVRERhxv04nW3nso",1777617518025]