[{"data":1,"prerenderedAt":1491},["ShallowReactive",2],{"blog-tag-ja-web-design":3},[4,188,386,662],{"id":5,"title":6,"author":7,"body":8,"category":169,"coverImage":170,"description":171,"draft":172,"extension":173,"locale":174,"meta":175,"navigation":176,"noindex":172,"path":177,"publishedAt":178,"seo":179,"slug":180,"stem":181,"tags":182,"updatedAt":178,"__hash__":187},"blog\u002Fblog\u002Fqr-code-business-card.md","QRコード付き名刺を無料で作成する方法｜初心者でも5分で完成","Zerosend Editorial",{"type":9,"value":10,"toc":158},"minimark",[11,16,20,23,26,29,33,36,43,49,55,61,63,66,77,84,88,122,124,128,131,137,143,149,151],[12,13,15],"h2",{"id":14},"qrコード付き名刺が今どき求められる理由","QRコード付き名刺が今どき求められる理由",[17,18,19],"p",{},"名刺交換の場面で「URLが長くて打ち込むのが大変」「SNSのプロフィールを伝えたいけど口頭では難しい」と感じたことはないでしょうか。QRコードを名刺に載せておくと、スマートフォンをかざすだけでWebサイト・ポートフォリオ・SNSページへ誘導できます。相手の手間が大幅に減るため、展示会や商談、フリーランスの営業活動など幅広いシーンで活用が広がっています。",[17,21,22],{},"また、QRコードを使うメリットはアクセスのしやすさだけではありません。URLを後から変更したい場合でも、QRコードが指すリンク先（自分のプロフィールページなど）を更新すれば対応できるため、名刺を刷り直す手間を減らせることも見逃せないポイントです。",[17,24,25],{},"一方で「QRコードってどうやって作るの？」「無料でちゃんとしたものが作れるの？」という疑問を持つ方も多いでしょう。結論から言えば、専用ソフトを購入したりデザイン会社に依頼したりしなくても、無料のオンラインツールで十分なクオリティのQRコードが作れます。",[27,28],"hr",{},[12,30,32],{"id":31},"qrコードを無料で作成するときに気をつけたいこと","QRコードを無料で作成するときに気をつけたいこと",[17,34,35],{},"無料ツールは数多く存在しますが、選ぶ際に注意したい点がいくつかあります。",[17,37,38,42],{},[39,40,41],"strong",{},"画質・サイズの問題","\n名刺に印刷するQRコードは、画面表示とは異なり一定以上の解像度が必要です。低解像度のPNGしか出力できないツールだと、印刷時にぼやけて読み取りエラーが起きることがあります。SVG形式（拡大しても劣化しないベクター形式）で出力できるツールを選ぶと安心です。",[17,44,45,48],{},[39,46,47],{},"個人情報の取り扱い","\n名刺に載せるURLには、自分のWebサイトや連絡先ページなど、ある程度個人に紐づいた情報が含まれます。ツールによっては入力した文字列をサーバーに送信・ログとして記録しているケースもあるため、プライバシーの観点から確認が必要です。",[17,50,51,54],{},[39,52,53],{},"登録不要かどうか","\nメールアドレス登録やアカウント作成が必須のツールは、手軽さという面でハードルが上がります。すぐに試せる登録不要のツールを選ぶと、作業効率が上がります。",[17,56,57,60],{},[39,58,59],{},"有料機能への誘導","\n「無料で使えると思ったら、ダウンロードだけ有料だった」というパターンも珍しくありません。出力まで完全無料かどうかを事前に確認しましょう。",[27,62],{},[12,64,65],{"id":65},"ブラウザだけで完結する無料ツールを使った作成手順",[17,67,68,69,76],{},"上記の注意点をまとめると、「高解像度出力・プライバシー配慮・登録不要・完全無料」の4条件を満たすツールが理想的です。そのひとつとして紹介したいのが、",[70,71,75],"a",{"href":72,"rel":73},"https:\u002F\u002Fzerosend.site\u002Ftools\u002Fqr-create",[74],"nofollow","QR コード生成ツール","です。",[17,78,79,80,83],{},"このツールの大きな特徴は、",[39,81,82],{},"入力したテキストやURLをサーバーに送信しない","点です。QRコードの生成処理がすべてブラウザ内で完結するため、入力した情報が外部に漏れる心配がありません。名刺に載せるURLや連絡先情報を扱う場合、この「ローカル処理」という仕組みは安心感につながります。",[85,86,87],"h3",{"id":87},"実際の操作手順",[89,90,91,98,104,110,116],"ol",{},[92,93,94,97],"li",{},[39,95,96],{},"ツールページを開く","\nブラウザでツールにアクセスします。アカウント登録やインストールは不要です。",[92,99,100,103],{},[39,101,102],{},"テキスト・URLを入力する","\n名刺に載せたいURL（自社サイト、ポートフォリオ、SNSプロフィールなど）を入力欄に貼り付けます。vCard形式のテキストを入力すれば、連絡先情報をまとめてQRコードに埋め込むこともできます。",[92,105,106,109],{},[39,107,108],{},"プレビューを確認する","\n入力と同時にQRコードのプレビューが表示されます。スマートフォンのカメラで試し読みして、正しくリンク先に飛べるか確認しましょう。",[92,111,112,115],{},[39,113,114],{},"ダウンロードする","\n問題がなければダウンロードボタンからQRコード画像を保存します。PNG・SVGなど用途に合わせて形式を選べます。名刺印刷用にはSVGを選ぶと、印刷会社に入稿する際に拡大・縮小しても画質が落ちません。",[92,117,118,121],{},[39,119,120],{},"名刺デザインに配置する","\nダウンロードした画像をIllustratorやCanva、Word、PowerPointなど使い慣れたソフトの名刺テンプレートに貼り付ければ完成です。QRコードのサイズは名刺上で最低でも1.5cm角を確保すると読み取りやすくなります。",[27,123],{},[12,125,127],{"id":126},"名刺qrコードをより効果的に使うための3つのコツ","名刺QRコードをより効果的に使うための3つのコツ",[17,129,130],{},"QRコードを名刺に入れるだけで満足せず、もう一歩工夫すると効果が高まります。",[17,132,133,136],{},[39,134,135],{},"① リンク先をスマートフォン対応ページにする","\nQRコードを読み取るのはスマートフォンがほとんどです。リンク先のページがモバイル非対応だと、せっかくアクセスしてもらっても離脱されてしまいます。リンク前にスマートフォンで表示確認をしておきましょう。",[17,138,139,142],{},[39,140,141],{},"② QRコードの近くに一言添える","\n「詳細はこちらから」「ポートフォリオを見る」など、QRコードの下に小さくテキストを入れると、読み取る動機づけになります。特に年配の方や普段QRコードを使い慣れていない方への配慮として有効です。",[17,144,145,148],{},[39,146,147],{},"③ 定期的にリンク先をチェックする","\nURLが変わった、ページを削除したなどの理由でQRコードが無効になるケースがあります。名刺を大量に印刷する前に、そして印刷後も定期的にリンク先が有効かどうか確認する習慣をつけましょう。",[27,150],{},[17,152,153,154,157],{},"QRコード付き名刺は、紙の名刺とデジタル情報をつなぐシンプルながら強力な手段です。無料ツールを使えば費用をかけずに導入できるので、まだ試していない方はぜひ一度作成してみてください。プライバシーを気にする方には、ブラウザ内処理で安全に使える",[70,155,75],{"href":72,"rel":156},[74],"が選択肢のひとつになるはずです。",{"title":159,"searchDepth":160,"depth":160,"links":161},"",2,[162,163,164,168],{"id":14,"depth":160,"text":15},{"id":31,"depth":160,"text":32},{"id":65,"depth":160,"text":65,"children":165},[166],{"id":87,"depth":167,"text":87},3,{"id":126,"depth":160,"text":127},"tech",null,"QRコード付き名刺を無料で作る手順を分かりやすく解説。ブラウザだけで完結するツールを使えば、個人情報をサーバーに送らず安全に作成できます。",false,"md","ja",{},true,"\u002Fblog\u002Fqr-code-business-card","2026-05-14",{"title":6,"description":171},"qr-code-business-card","blog\u002Fqr-code-business-card",[183,184,185,186],"業務","プライバシー","ツール","Web制作","hrm-tYjDGxrWDI7oF94te57zkkMH6fyHYcsGGqLe9PM",{"id":189,"title":190,"author":7,"body":191,"category":169,"coverImage":170,"description":374,"draft":172,"extension":173,"locale":174,"meta":375,"navigation":176,"noindex":172,"path":376,"publishedAt":377,"seo":378,"slug":379,"stem":380,"tags":381,"updatedAt":377,"__hash__":385},"blog\u002Fblog\u002Fogp-image-size-optimization.md","OGP画像のサイズ最適化ガイド｜SNSでキレイに表示される設定と作り方",{"type":9,"value":192,"toc":368},[193,197,200,208,215,217,221,224,229,244,249,260,265,273,278,283,290,293,295,299,302,307,310,315,318,323,332,337,340,342,346,353,356,359,366],[12,194,196],{"id":195},"ogp画像が崩れる切れる原因はサイズ指定にある","OGP画像が「崩れる」「切れる」原因はサイズ指定にある",[17,198,199],{},"SNSでURLをシェアしたとき、サムネイル画像が途中で切れていたり、極端に小さく表示されたりした経験はないでしょうか。あるいは、自分のサイトをX（旧Twitter）やFacebookに投稿したら、想定と全く違う画像が表示された、というケースもよく聞かれます。",[17,201,202,203,207],{},"こうした問題の多くは、OGP（Open Graph Protocol）画像のサイズが各プラットフォームの仕様と合っていないことが原因です。OGPはHTMLのmetaタグで設定するもので、",[204,205,206],"code",{},"og:image","に指定した画像がSNSカードのサムネイルとして使われます。しかし、画像サイズや縦横比が規定から外れていると、プラットフォーム側でトリミングされたり、表示をスキップされたりします。",[17,209,210,211,214],{},"さらに見落とされがちなのが、",[39,212,213],{},"ファイルサイズ（容量）の上限","です。画像の縦横ピクセル数が正しくても、ファイルが重すぎるとSNSのクローラーが取得に失敗し、画像なしのカードとして表示されることがあります。OGP画像の最適化は「ピクセル寸法」と「ファイル容量」の両方を意識する必要があります。",[27,216],{},[12,218,220],{"id":219},"各snsプラットフォームの推奨サイズ一覧","各SNS・プラットフォームの推奨サイズ一覧",[17,222,223],{},"OGP画像の最適なサイズはプラットフォームによって異なります。主要サービスの推奨値をまとめました。",[17,225,226],{},[39,227,228],{},"X（旧Twitter）",[230,231,232,235,238,241],"ul",{},[92,233,234],{},"Summaryカード（小さいサムネイル）：144×144px以上、縦横比1:1",[92,236,237],{},"Summary Card with Large Image（横長サムネイル）：300×157px以上、縦横比2:1",[92,239,240],{},"推奨サイズ：1200×628px",[92,242,243],{},"ファイルサイズ上限：5MB（JPG\u002FPNG\u002FWebP）",[17,245,246],{},[39,247,248],{},"Facebook \u002F Meta",[230,250,251,254,257],{},[92,252,253],{},"最小サイズ：200×200px",[92,255,256],{},"推奨サイズ：1200×630px（縦横比1.91:1）",[92,258,259],{},"推奨ファイルサイズ：1MB以下",[17,261,262],{},[39,263,264],{},"LinkedIn",[230,266,267,270],{},[92,268,269],{},"推奨サイズ：1200×627px",[92,271,272],{},"ファイルサイズ上限：5MB",[17,274,275],{},[39,276,277],{},"Slack \u002F チャットツール",[230,279,280],{},[92,281,282],{},"og:imageを取得してプレビュー表示。1200×630px前後が無難",[17,284,285,286,289],{},"これらを横断的に見ると、",[39,287,288],{},"1200×630px（または1200×628px）"," という解像度がほぼすべてのサービスに対応できる事実上の標準サイズです。縦横比は約1.91:1を維持しつつ、JPEG品質を80〜85程度に抑えてファイルサイズを300KB以内に収めると、どの環境でも安定して表示されます。",[17,291,292],{},"ただし、既存の画像を流用する場合や、デザイン素材が別のアスペクト比で作られている場合は、リサイズ作業が必要になります。",[27,294],{},[12,296,298],{"id":297},"実践ogp画像を正しいサイズにリサイズする手順","実践：OGP画像を正しいサイズにリサイズする手順",[17,300,301],{},"OGP画像のリサイズ自体は難しい作業ではありませんが、いくつか気をつけたいポイントがあります。",[17,303,304],{},[39,305,306],{},"① 元画像の縦横比を確認する",[17,308,309],{},"元画像が正方形（1:1）や縦長の場合、単純にリサイズすると1200×630pxに収まらず、余白が生じたり主要な被写体が切り取られたりします。リサイズ前に、画像をどこを中心にトリミングするかを先に決めておくと作業がスムーズです。",[17,311,312],{},[39,313,314],{},"② 出力形式はJPEGかWebPを選ぶ",[17,316,317],{},"OGP画像には透過（アルファチャンネル）が不要なケースがほとんどです。PNGは品質が高い反面ファイルが重くなりやすいため、JPEGかWebPで書き出すのが現実的です。SNSのクローラーはWebPにも対応していますが、古いクローラーを考慮してJPEGを第一候補にするのが無難です。",[17,319,320],{},[39,321,322],{},"③ ツールを選ぶ：Photoshopがなくても問題ない",[17,324,325,326,331],{},"プロ向けの画像編集ソフトがなくても、ブラウザだけで完結するツールが充実しています。その一つとして ",[70,327,330],{"href":328,"rel":329},"https:\u002F\u002Fzerosend.site\u002Ftools\u002Fimage-resize",[74],"画像リサイズツール"," があります。このツールの特徴は、アップロードした画像がサーバーに送信されない点です。画像データはブラウザ内だけで処理されるため、社内資料や未公開のバナー画像を扱う場合でも、情報漏洩リスクを気にせず使えます。縦横のピクセル数を数値で直接指定できるので、1200×630pxに合わせる作業が直感的に行えます。",[17,333,334],{},[39,335,336],{},"④ リサイズ後にOGPキャッシュをクリアする",[17,338,339],{},"画像を差し替えても、SNS側のキャッシュが残っていると古い画像が表示され続けます。Xであれば「Card Validator」、Facebookであれば「Sharing Debugger」を使ってキャッシュを強制更新してください。ツールにURLを入力して「スクレイプ」または「デバッグ」を実行するだけで、新しい画像が反映されます。",[27,341],{},[12,343,345],{"id":344},"ogp画像の最適化がseoにも影響する理由","OGP画像の最適化がSEOにも影響する理由",[17,347,348,349,352],{},"OGPはSNS表示のための仕様であり、Googleの検索順位に直接影響するわけではありません。しかし、",[39,350,351],{},"間接的にSEOへのプラス効果","が期待できます。",[17,354,355],{},"SNSでシェアされたときに魅力的なサムネイルが表示されれば、クリック率が上がり、リンクが拡散されやすくなります。これがサイトへの流入増加につながり、滞在時間や被リンク獲得に好影響を与えます。また、画像ファイルのサイズを適切に絞ることはページの読み込み速度改善に直結し、Googleが重視するCore Web Vitalsの指標（特にLCPやFID）にも貢献します。",[17,357,358],{},"OGP画像を「SNS用の飾り」として後回しにしがちですが、サイトのパフォーマンスとブランド品質を底上げする実務的な施策として捉えると、優先度が変わってくるはずです。",[17,360,361,362,365],{},"まず手元にあるキービジュアルやアイキャッチ画像を1200×630px・300KB以内に整えるところから始めてみてください。専用ソフトが不要な環境であれば、前述した ",[70,363,330],{"href":328,"rel":364},[74]," のようなブラウザベースのツールを活用すると、余計な手間をかけずに作業を完結できます。",[27,367],{},{"title":159,"searchDepth":160,"depth":160,"links":369},[370,371,372,373],{"id":195,"depth":160,"text":196},{"id":219,"depth":160,"text":220},{"id":297,"depth":160,"text":298},{"id":344,"depth":160,"text":345},"OGP画像の推奨サイズや各SNSの仕様を解説。Twitterやog:imageが正しく表示されない原因と、ブラウザだけで完結する無料ツールを使った具体的な対処法を紹介します。",{},"\u002Fblog\u002Fogp-image-size-optimization","2026-05-12",{"title":190,"description":374},"ogp-image-size-optimization","blog\u002Fogp-image-size-optimization",[382,383,186,384],"画像","リサイズ","SEO","mIit_bdGiULblUiC2FeigxS7qW8uxuS9f-pKvrNhJKM",{"id":387,"title":388,"author":7,"body":389,"category":169,"coverImage":170,"description":651,"draft":172,"extension":173,"locale":174,"meta":652,"navigation":176,"noindex":172,"path":653,"publishedAt":654,"seo":655,"slug":656,"stem":657,"tags":658,"updatedAt":654,"__hash__":661},"blog\u002Fblog\u002Fwebp-convert-seo.md","WebP変換でSEOを改善する方法｜画像最適化の効果と手順を解説",{"type":9,"value":390,"toc":636},[391,395,402,409,416,418,422,425,429,436,439,443,450,454,457,459,463,466,473,486,489,492,494,498,505,508,511,514,521,609,613,616,618,622,625,632],[12,392,394],{"id":393},"画像が重いはseoの大敵見落とされがちなボトルネック","「画像が重い」はSEOの大敵——見落とされがちなボトルネック",[17,396,397,398,401],{},"Webサイトのパフォーマンス改善に取り組む際、JavaScriptの最適化やキャッシュ設定に目が向きがちです。しかし実際には、",[39,399,400],{},"画像ファイルの容量","がページ速度のボトルネックになっているケースが非常に多く見られます。",[17,403,404,405,408],{},"Google Search Consoleや PageSpeed Insights でサイトを計測してみると、「画像を次世代フォーマットで配信してください」という指摘を受けた経験がある方も多いでしょう。ここで言う「次世代フォーマット」とは、主に ",[39,406,407],{},"WebP（ウェブピー）"," のことを指します。",[17,410,411,412,415],{},"JPEGやPNGと比較して、WebPは同等の画質を保ちながらファイルサイズを ",[39,413,414],{},"平均25〜35%程度削減"," できると言われています。この差は、特に画像を多く使うECサイトやブログ、ポートフォリオサイトでは非常に大きなインパクトをもたらします。",[27,417],{},[12,419,421],{"id":420},"webp変換がseoに与える具体的な効果","WebP変換がSEOに与える具体的な効果",[17,423,424],{},"WebPに変換することがSEOにどう効くのか、具体的なポイントを整理してみましょう。",[85,426,428],{"id":427},"core-web-vitalsのスコアが改善する","① Core Web Vitalsのスコアが改善する",[17,430,431,432,435],{},"Googleは2021年からCore Web Vitals（CWV）を検索順位の評価指標に加えています。その中でも特に重要な ",[39,433,434],{},"LCP（Largest Contentful Paint）"," は、ページ内で最も大きな要素が表示されるまでの時間を測るものです。多くの場合、LCPの対象はメインビジュアルや商品画像など、大きな画像要素です。",[17,437,438],{},"WebPへの変換によってこれらの画像ファイルが軽くなれば、ダウンロード時間が短縮され、LCPスコアが改善します。結果として、Googleからの評価が高まりやすくなります。",[85,440,442],{"id":441},"ページの読み込み速度が体感レベルで上がる","② ページの読み込み速度が体感レベルで上がる",[17,444,445,446,449],{},"SEOの指標改善だけでなく、",[39,447,448],{},"ユーザー体験（UX）"," への直接的な効果も見逃せません。ページの表示が速くなれば直帰率が下がり、セッション時間が延びる傾向があります。Googleはこうしたユーザー行動のシグナルも評価に組み込んでいると考えられており、間接的にSEOへも好影響を与えます。",[85,451,453],{"id":452},"モバイル環境での優位性が上がる","③ モバイル環境での優位性が上がる",[17,455,456],{},"スマートフォンからのアクセスが主流となった現在、モバイル環境でのパフォーマンスは特に重要です。モバイル回線はWi-Fiよりも通信速度が不安定なことが多く、画像の軽量化がより体感しやすい差として現れます。WebPはモバイルファーストインデックスへの対応という観点でも有効な施策です。",[27,458],{},[12,460,462],{"id":461},"実際にどうやってwebpへ変換するか","実際にどうやってWebPへ変換するか",[17,464,465],{},"WebPへの変換方法はいくつかあります。サーバー側でImageMagickやlibwebpを使ってバッチ処理する方法、CMSのプラグインを使う方法、そしてブラウザ上で動作する変換ツールを使う方法などです。",[17,467,468,469,472],{},"サーバー環境を持たない方や、手軽に試してみたい方には、",[39,470,471],{},"ブラウザ上で完結する変換ツール","が最も手軽です。",[17,474,475,476,481,482,485],{},"その選択肢の一つとして、",[70,477,480],{"href":478,"rel":479},"https:\u002F\u002Fzerosend.site\u002Ftools\u002Fimage-convert",[74],"画像形式変換ツール"," があります。このツールの特徴は、",[39,483,484],{},"ファイルをサーバーに送信せず、ブラウザ内だけで処理する","という点です。",[17,487,488],{},"業務で扱う画像の中には、公開前の商品写真や社内資料のスクリーンショットなど、外部に送信したくないものも含まれることがあります。クラウド型のサービスでは、アップロード時にファイルがサーバーを経由するため、情報漏えいのリスクをゼロにはできません。一方、ブラウザ内処理であれば、その心配がありません。",[17,490,491],{},"操作はシンプルで、変換したい画像ファイルをドラッグ＆ドロップし、出力形式としてWebPを選択するだけです。JPEGやPNGはもちろん、複数形式に対応しているため、様々な用途で活用できます。",[27,493],{},[12,495,497],{"id":496},"webp変換を運用に組み込むためのポイント","WebP変換を運用に組み込むためのポイント",[17,499,500,501,504],{},"WebPへの変換は一度やれば終わりではなく、",[39,502,503],{},"継続的な運用","として組み込むことが大切です。",[85,506,507],{"id":507},"既存ページと新規ページの両方に対応する",[17,509,510],{},"まず既存の記事や製品ページに使われている画像を洗い出し、ファイルサイズの大きいものから優先的に変換していきましょう。次に、新規コンテンツを作成する際のルールとして「アップロード前にWebP変換を行う」というフローを定めておくと、徐々に全体の最適化が進みます。",[85,512,513],{"id":513},"ブラウザの対応状況を確認する",[17,515,516,517,520],{},"WebPは主要なモダンブラウザではほぼすべて対応していますが、ごく一部の古いブラウザでは表示されない場合があります。HTMLの ",[204,518,519],{},"\u003Cpicture>"," タグを使ってWebPとJPEGをフォールバックとして両方指定する方法が、安全性の高い実装です。",[522,523,527],"pre",{"className":524,"code":525,"language":526,"meta":159,"style":159},"language-html shiki shiki-themes github-light github-dark","\u003Cpicture>\n  \u003Csource srcset=\"image.webp\" type=\"image\u002Fwebp\">\n  \u003Cimg src=\"image.jpg\" alt=\"説明テキスト\">\n\u003C\u002Fpicture>\n","html",[204,528,529,545,574,599],{"__ignoreMap":159},[530,531,534,538,542],"span",{"class":532,"line":533},"line",1,[530,535,537],{"class":536},"sVt8B","\u003C",[530,539,541],{"class":540},"s9eBZ","picture",[530,543,544],{"class":536},">\n",[530,546,547,550,553,557,560,564,567,569,572],{"class":532,"line":160},[530,548,549],{"class":536},"  \u003C",[530,551,552],{"class":540},"source",[530,554,556],{"class":555},"sScJk"," srcset",[530,558,559],{"class":536},"=",[530,561,563],{"class":562},"sZZnC","\"image.webp\"",[530,565,566],{"class":555}," type",[530,568,559],{"class":536},[530,570,571],{"class":562},"\"image\u002Fwebp\"",[530,573,544],{"class":536},[530,575,576,578,581,584,586,589,592,594,597],{"class":532,"line":167},[530,577,549],{"class":536},[530,579,580],{"class":540},"img",[530,582,583],{"class":555}," src",[530,585,559],{"class":536},[530,587,588],{"class":562},"\"image.jpg\"",[530,590,591],{"class":555}," alt",[530,593,559],{"class":536},[530,595,596],{"class":562},"\"説明テキスト\"",[530,598,544],{"class":536},[530,600,602,605,607],{"class":532,"line":601},4,[530,603,604],{"class":536},"\u003C\u002F",[530,606,541],{"class":540},[530,608,544],{"class":536},[85,610,612],{"id":611},"変換後はpagespeed-insightsで効果を確認する","変換後はPageSpeed Insightsで効果を確認する",[17,614,615],{},"変換前後でPageSpeed Insightsのスコアを比較することで、改善の効果を数値として確認できます。特にモバイルのスコアに注目しながら、優先度の高いページから順に対応を進めると効率的です。",[27,617],{},[12,619,621],{"id":620},"まとめ小さな変換が大きな差を生む","まとめ——小さな変換が、大きな差を生む",[17,623,624],{},"WebPへの変換は、特別な技術知識がなくても取り組めるSEO改善施策の一つです。ファイルサイズを削減することで、Core Web Vitalsの改善、ページ速度の向上、そしてユーザー体験の向上につながります。",[17,626,627,628,631],{},"「まずは手元の画像を一枚変換してみる」という小さな一歩から始めることが、継続的な改善への入り口になります。プライバシーを気にしながら手軽に試したい方は、ブラウザ内処理で動作する ",[70,629,480],{"href":478,"rel":630},[74]," を一度使ってみてください。ツールを使った体験を通じて、変換の効果を実感するのが一番の近道です。",[633,634,635],"style",{},"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":159,"searchDepth":160,"depth":160,"links":637},[638,639,644,645,650],{"id":393,"depth":160,"text":394},{"id":420,"depth":160,"text":421,"children":640},[641,642,643],{"id":427,"depth":167,"text":428},{"id":441,"depth":167,"text":442},{"id":452,"depth":167,"text":453},{"id":461,"depth":160,"text":462},{"id":496,"depth":160,"text":497,"children":646},[647,648,649],{"id":507,"depth":167,"text":507},{"id":513,"depth":167,"text":513},{"id":611,"depth":167,"text":612},{"id":620,"depth":160,"text":621},"WebPへの変換がSEOに与える効果を具体的に解説。ページ速度の改善やCore Web Vitalsへの影響、無料ツールを使った実践的な変換手順まで分かりやすく紹介します。",{},"\u002Fblog\u002Fwebp-convert-seo","2026-05-07",{"title":388,"description":651},"webp-convert-seo","blog\u002Fwebp-convert-seo",[384,659,660,186],"変換","Core Web Vitals","ohRygyiARrZiiJTtMjcj1pIeCMmom8JQlMu5cJV0TS8",{"id":663,"title":664,"author":7,"body":665,"category":169,"coverImage":170,"description":1480,"draft":172,"extension":173,"locale":174,"meta":1481,"navigation":176,"noindex":172,"path":1482,"publishedAt":1483,"seo":1484,"slug":1485,"stem":1486,"tags":1487,"updatedAt":178,"__hash__":1490},"blog\u002Fblog\u002Ffavicon-complete-guide-2026.md","ファビコン 完全ガイド 2026 — サイズ・形式・HTML 設置まで全部入り",{"type":9,"value":666,"toc":1438},[667,675,679,686,708,712,715,719,723,746,753,760,763,777,781,784,791,867,871,878,881,891,895,898,905,1067,1071,1077,1081,1086,1228,1235,1243,1247,1251,1254,1258,1261,1264,1274,1278,1284,1288,1291,1324,1327,1330,1334,1337,1341,1350,1356,1362,1365,1368,1407,1411,1418,1421,1428,1435],[17,668,669,670,674],{},"ファビコン (favicon) は地味なアセットですが、種類・サイズ・形式の選択肢が多く、毎回「結局どれが必要なんだっけ?」となる人も多いはずです。本記事では 2026 年時点で本当に必要なアイコン一式と、HTML への組み込み、Zerosend の ",[70,671,673],{"href":672},"\u002Ftools\u002Ffavicon-generator","ファビコン生成ツール"," の活用法を整理します。",[12,676,678],{"id":677},"ファビコンとは何か-1-分で復習","ファビコンとは何か (1 分で復習)",[85,680,682,685],{"id":681},"link-タグで参照される機能の総称",[204,683,684],{},"\u003Clink>"," タグで参照される機能の総称",[17,687,688,689,692,693,696,697,700,701,700,704,707],{},"ファビコンはブラウザのタブ表示に使われるアイコン、だけではなく",[39,690,691],{},"タブ \u002F ブックマーク \u002F PWA ホーム画面 \u002F 検索結果","など複数の文脈で使われる画像の総称です。",[204,694,695],{},"\u003Chead>"," 内の ",[204,698,699],{},"\u003Clink rel=\"icon\">"," \u002F ",[204,702,703],{},"\u003Clink rel=\"apple-touch-icon\">",[204,705,706],{},"\u003Clink rel=\"manifest\">"," で参照されるアセット群です。",[85,709,711],{"id":710},"表示場所によって最適なサイズ形式が違う","表示場所によって最適なサイズ・形式が違う",[17,713,714],{},"タブ用には 16×16 \u002F 32×32 の小さいアイコンが必要ですが、iPhone のホーム画面には 180×180 の PNG、Android の PWA には 192×192 と 512×512 の PNG が必要です。場所ごとに要件が違います。",[12,716,718],{"id":717},"_2026-年時点で本当に必要なアイコン","2026 年時点で本当に必要なアイコン",[85,720,722],{"id":721},"必須-3-つ","必須 3 つ",[230,724,725,731,737],{},[92,726,727,730],{},[204,728,729],{},"favicon.ico"," — デスクトップブラウザのタブ \u002F ブックマーク (16\u002F32\u002F48px のマルチサイズ)",[92,732,733,736],{},[204,734,735],{},"apple-touch-icon.png"," (180×180) — iOS のホーム画面",[92,738,739,700,742,745],{},[204,740,741],{},"icon-192.png",[204,743,744],{},"icon-512.png"," — Android \u002F PWA 対応",[85,747,749,750],{"id":748},"推奨-faviconsvg","推奨: ",[204,751,752],{},"favicon.svg",[17,754,755,756,759],{},"モダンブラウザ (Chrome \u002F Firefox \u002F Safari の最新版) は SVG ファビコンに対応済みです。ベクターなのでどのサイズでもシャープに表示されます。ダークモード切替にも対応できるので、2026 年は ",[39,757,758],{},"SVG を第一選択","にして ICO をフォールバックにする運用がおすすめです。",[85,761,762],{"id":762},"不要になったもの",[230,764,765,771],{},[92,766,767,770],{},[204,768,769],{},"browserconfig.xml"," (Windows 8\u002F10 タイル用) — IE 系と一緒に役目を終えています",[92,772,773,776],{},[204,774,775],{},"*.png"," の 70×70 \u002F 150×150 \u002F 310×310 (IE\u002FEdge Legacy 向け)",[12,778,780],{"id":779},"svg-ファビコンのメリットと対応ブラウザ","SVG ファビコンのメリットと対応ブラウザ",[85,782,783],{"id":783},"ダークモード自動切替",[17,785,786,787,790],{},"SVG 内に ",[204,788,789],{},"@media (prefers-color-scheme: dark)"," のスタイルを書くだけで、OS のダークモードに合わせて色を切り替えられます。Chrome \u002F Firefox の最新版は対応済みです。",[522,792,794],{"className":524,"code":793,"language":526,"meta":159,"style":159},"\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",[204,795,796,805,813,818,823,829,839,858],{"__ignoreMap":159},[530,797,798,800,803],{"class":532,"line":533},[530,799,537],{"class":536},[530,801,802],{"class":540},"svg",[530,804,544],{"class":536},[530,806,807,809,811],{"class":532,"line":160},[530,808,549],{"class":536},[530,810,633],{"class":540},[530,812,544],{"class":536},[530,814,815],{"class":532,"line":167},[530,816,817],{"class":536},"    @media (prefers-color-scheme: dark) {\n",[530,819,820],{"class":532,"line":601},[530,821,822],{"class":536},"      .logo { fill: #fff; }\n",[530,824,826],{"class":532,"line":825},5,[530,827,828],{"class":536},"    }\n",[530,830,832,835,837],{"class":532,"line":831},6,[530,833,834],{"class":536},"  \u003C\u002F",[530,836,633],{"class":540},[530,838,544],{"class":536},[530,840,842,844,847,850,852,855],{"class":532,"line":841},7,[530,843,549],{"class":536},[530,845,846],{"class":540},"rect",[530,848,849],{"class":555}," class",[530,851,559],{"class":536},[530,853,854],{"class":562},"\"logo\"",[530,856,857],{"class":536}," \u002F>\n",[530,859,861,863,865],{"class":532,"line":860},8,[530,862,604],{"class":536},[530,864,802],{"class":540},[530,866,544],{"class":536},[85,868,870],{"id":869},"アニメーション-限定的","アニメーション (限定的)",[17,872,873,874,877],{},"SMIL \u002F CSS アニメーションは技術的には可能ですが、ブラウザが",[39,875,876],{},"アイドル時には動かさない","等の最適化を入れるケースが多く、過信は禁物です。原則は静止画として設計しましょう。",[85,879,880],{"id":880},"非対応ブラウザへのフォールバック",[17,882,883,886,887,890],{},[204,884,885],{},"\u003Clink rel=\"icon\" type=\"image\u002Fsvg+xml\">"," と ",[204,888,889],{},"\u003Clink rel=\"alternate icon\" type=\"image\u002Fx-icon\">"," を並べておけば、対応ブラウザは SVG、非対応は ICO を使います。",[12,892,894],{"id":893},"sitewebmanifest-と-pwa","site.webmanifest と PWA",[85,896,897],{"id":897},"必須プロパティ",[17,899,900,901,904],{},"PWA 対応を見据えると ",[204,902,903],{},"site.webmanifest"," を用意します。最低限の中身はこうなります。",[522,906,910],{"className":907,"code":908,"language":909,"meta":159,"style":159},"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",[204,911,912,917,932,944,952,989,1020,1025,1037,1050,1061],{"__ignoreMap":159},[530,913,914],{"class":532,"line":533},[530,915,916],{"class":536},"{\n",[530,918,919,923,926,929],{"class":532,"line":160},[530,920,922],{"class":921},"sj4cs","  \"name\"",[530,924,925],{"class":536},": ",[530,927,928],{"class":562},"\"My Site\"",[530,930,931],{"class":536},",\n",[530,933,934,937,939,942],{"class":532,"line":167},[530,935,936],{"class":921},"  \"short_name\"",[530,938,925],{"class":536},[530,940,941],{"class":562},"\"MySite\"",[530,943,931],{"class":536},[530,945,946,949],{"class":532,"line":601},[530,947,948],{"class":921},"  \"icons\"",[530,950,951],{"class":536},": [\n",[530,953,954,957,960,962,965,968,971,973,976,978,981,983,986],{"class":532,"line":825},[530,955,956],{"class":536},"    { ",[530,958,959],{"class":921},"\"src\"",[530,961,925],{"class":536},[530,963,964],{"class":562},"\"\u002Ficon-192.png\"",[530,966,967],{"class":536},", ",[530,969,970],{"class":921},"\"sizes\"",[530,972,925],{"class":536},[530,974,975],{"class":562},"\"192x192\"",[530,977,967],{"class":536},[530,979,980],{"class":921},"\"type\"",[530,982,925],{"class":536},[530,984,985],{"class":562},"\"image\u002Fpng\"",[530,987,988],{"class":536}," },\n",[530,990,991,993,995,997,1000,1002,1004,1006,1009,1011,1013,1015,1017],{"class":532,"line":831},[530,992,956],{"class":536},[530,994,959],{"class":921},[530,996,925],{"class":536},[530,998,999],{"class":562},"\"\u002Ficon-512.png\"",[530,1001,967],{"class":536},[530,1003,970],{"class":921},[530,1005,925],{"class":536},[530,1007,1008],{"class":562},"\"512x512\"",[530,1010,967],{"class":536},[530,1012,980],{"class":921},[530,1014,925],{"class":536},[530,1016,985],{"class":562},[530,1018,1019],{"class":536}," }\n",[530,1021,1022],{"class":532,"line":841},[530,1023,1024],{"class":536},"  ],\n",[530,1026,1027,1030,1032,1035],{"class":532,"line":860},[530,1028,1029],{"class":921},"  \"theme_color\"",[530,1031,925],{"class":536},[530,1033,1034],{"class":562},"\"#0a0a0a\"",[530,1036,931],{"class":536},[530,1038,1040,1043,1045,1048],{"class":532,"line":1039},9,[530,1041,1042],{"class":921},"  \"background_color\"",[530,1044,925],{"class":536},[530,1046,1047],{"class":562},"\"#ffffff\"",[530,1049,931],{"class":536},[530,1051,1053,1056,1058],{"class":532,"line":1052},10,[530,1054,1055],{"class":921},"  \"display\"",[530,1057,925],{"class":536},[530,1059,1060],{"class":562},"\"standalone\"\n",[530,1062,1064],{"class":532,"line":1063},11,[530,1065,1066],{"class":536},"}\n",[85,1068,1070],{"id":1069},"ios-の癖","iOS の癖",[17,1072,1073,1074,1076],{},"iOS は ",[204,1075,735],{}," を優先するため、webmanifest 側に icon を書いても iOS ホーム画面には適用されません。Android と iOS で別々のファイルを用意する前提で運用しましょう。",[12,1078,1080],{"id":1079},"html-に設置する正しい書き方","HTML に設置する正しい書き方",[17,1082,1083,1085],{},[204,1084,695],{}," に並べる順序のお手本:",[522,1087,1089],{"className":524,"code":1088,"language":526,"meta":159,"style":159},"\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",[204,1090,1091,1123,1152,1182,1204],{"__ignoreMap":159},[530,1092,1093,1095,1098,1101,1103,1106,1108,1110,1113,1116,1118,1121],{"class":532,"line":533},[530,1094,537],{"class":536},[530,1096,1097],{"class":540},"link",[530,1099,1100],{"class":555}," rel",[530,1102,559],{"class":536},[530,1104,1105],{"class":562},"\"icon\"",[530,1107,566],{"class":555},[530,1109,559],{"class":536},[530,1111,1112],{"class":562},"\"image\u002Fsvg+xml\"",[530,1114,1115],{"class":555}," href",[530,1117,559],{"class":536},[530,1119,1120],{"class":562},"\"\u002Ffavicon.svg\"",[530,1122,544],{"class":536},[530,1124,1125,1127,1129,1131,1133,1136,1138,1140,1143,1145,1147,1150],{"class":532,"line":160},[530,1126,537],{"class":536},[530,1128,1097],{"class":540},[530,1130,1100],{"class":555},[530,1132,559],{"class":536},[530,1134,1135],{"class":562},"\"alternate icon\"",[530,1137,566],{"class":555},[530,1139,559],{"class":536},[530,1141,1142],{"class":562},"\"image\u002Fx-icon\"",[530,1144,1115],{"class":555},[530,1146,559],{"class":536},[530,1148,1149],{"class":562},"\"\u002Ffavicon.ico\"",[530,1151,544],{"class":536},[530,1153,1154,1156,1158,1160,1162,1165,1168,1170,1173,1175,1177,1180],{"class":532,"line":167},[530,1155,537],{"class":536},[530,1157,1097],{"class":540},[530,1159,1100],{"class":555},[530,1161,559],{"class":536},[530,1163,1164],{"class":562},"\"apple-touch-icon\"",[530,1166,1167],{"class":555}," sizes",[530,1169,559],{"class":536},[530,1171,1172],{"class":562},"\"180x180\"",[530,1174,1115],{"class":555},[530,1176,559],{"class":536},[530,1178,1179],{"class":562},"\"\u002Fapple-touch-icon.png\"",[530,1181,544],{"class":536},[530,1183,1184,1186,1188,1190,1192,1195,1197,1199,1202],{"class":532,"line":601},[530,1185,537],{"class":536},[530,1187,1097],{"class":540},[530,1189,1100],{"class":555},[530,1191,559],{"class":536},[530,1193,1194],{"class":562},"\"manifest\"",[530,1196,1115],{"class":555},[530,1198,559],{"class":536},[530,1200,1201],{"class":562},"\"\u002Fsite.webmanifest\"",[530,1203,544],{"class":536},[530,1205,1206,1208,1211,1214,1216,1219,1222,1224,1226],{"class":532,"line":825},[530,1207,537],{"class":536},[530,1209,1210],{"class":540},"meta",[530,1212,1213],{"class":555}," name",[530,1215,559],{"class":536},[530,1217,1218],{"class":562},"\"theme-color\"",[530,1220,1221],{"class":555}," content",[530,1223,559],{"class":536},[530,1225,1034],{"class":562},[530,1227,544],{"class":536},[85,1229,1231,1234],{"id":1230},"sizesany-の罠",[204,1232,1233],{},"sizes=\"any\""," の罠",[17,1236,1237,1239,1240,76],{},[204,1238,1233],{}," を SVG に付けると、ブラウザが SVG を ICO より優先するようになります。基本的に意図通りですが、古い iOS で誤解される例があったため、2026 年時点では",[39,1241,1242],{},"書かないのが無難",[12,1244,1246],{"id":1245},"ファビコン生成アプローチの-3-類型と向き不向き","ファビコン生成アプローチの 3 類型と向き不向き",[85,1248,1250],{"id":1249},"アップロード型のオンライン-saas","アップロード型のオンライン SaaS",[17,1252,1253],{},"高機能で一発生成。ただしロゴ画像を一度サーバーに送ります。公開済みのロゴなら気にならないケースが多いです。",[85,1255,1257],{"id":1256},"デスクトップ-ローカルアプリ","デスクトップ \u002F ローカルアプリ",[17,1259,1260],{},"ImageMagick \u002F Sketch \u002F Figma 等。CLI や GUI で手元だけで生成できますが、セットアップが必要です。",[85,1262,1263],{"id":1263},"ブラウザ内完結型",[17,1265,1266,1267,1269,1270,1273],{},"Zerosend の ",[70,1268,673],{"href":672}," がこの型。",[39,1271,1272],{},"インストール不要 + 手元完結","で、NDA 下の未公開ロゴでも気兼ねなく使えます。",[85,1275,1277],{"id":1276},"nda-下未公開ブランド社内案件での選び方","NDA 下・未公開ブランド・社内案件での選び方",[17,1279,1280,1281,1283],{},"受託案件や新規ブランドの立ち上げでは、ロゴ画像の取り扱いに神経を使います。この場合は",[39,1282,1263],{},"を選ぶか、デスクトップアプリで手元処理するのが安心です。",[12,1285,1287],{"id":1286},"zerosend-でブラウザ内完結で作る手順","Zerosend でブラウザ内完結で作る手順",[17,1289,1290],{},"1 枚の PNG または SVG から、必要なファイル一式 (ICO \u002F PNG 複数サイズ \u002F apple-touch-icon \u002F site.webmanifest \u002F HTML スニペット) を ZIP で一気に生成できます。",[89,1292,1293,1298,1301,1304,1307,1310],{},[92,1294,1295,1297],{},[70,1296,672],{"href":672}," にアクセス",[92,1299,1300],{},"ロゴ画像をドラッグ&ドロップ (推奨: 512×512 以上の正方形)",[92,1302,1303],{},"アプリ名 \u002F theme_color \u002F background_color を入力",[92,1305,1306],{},"「ファビコン一式を生成する」",[92,1308,1309],{},"生成されたプレビューを確認し、ZIP をダウンロード",[92,1311,1312,1313,1316,1317,1319,1320,1323],{},"ZIP に同梱の ",[204,1314,1315],{},"snippet.html"," の内容を ",[204,1318,695],{}," に貼り付け、各ファイルをサイトのルート (",[204,1321,1322],{},"\u002F",") に配置",[17,1325,1326],{},"ブラウザ内完結なので、ロゴ画像が外部に送られることはありません。",[12,1328,1329],{"id":1329},"よくある失敗",[85,1331,1333],{"id":1332},"retina-で滲む","Retina で滲む",[17,1335,1336],{},"タブで綺麗に見せるには 32×32 や 48×48 も用意する必要があります。Zerosend は 16\u002F32\u002F48 のマルチサイズ ICO を自動で作ります。",[85,1338,1340],{"id":1339},"ios-ホーム画面で余白が出る","iOS ホーム画面で余白が出る",[17,1342,1343,1345,1346,1349],{},[204,1344,735],{}," は",[39,1347,1348],{},"背景透過に対応していません","。透過 PNG を渡すと iOS が黒背景で埋めてしまうので、背景色を明示的に塗った PNG を用意しましょう。",[85,1351,1353,1355],{"id":1352},"faviconico-だけしか指定していない",[204,1354,729],{}," だけしか指定していない",[17,1357,1358,1359,1361],{},"モダンブラウザで SVG を使うメリットを取りこぼします。少なくとも ",[204,1360,752],{}," は併用するのが 2026 年の標準です。",[85,1363,1364],{"id":1364},"ブラウザキャッシュが残って古いアイコンが表示される",[17,1366,1367],{},"ブラウザはファビコンを積極的にキャッシュします。差し替え後に古いアイコンのままになる時は次を試します。",[230,1369,1370,1383,1389,1400],{},[92,1371,1372,1375,1376,700,1379,1382],{},[39,1373,1374],{},"強制リロード"," (",[204,1377,1378],{},"Ctrl+Shift+R",[204,1380,1381],{},"Cmd+Shift+R",") で再取得",[92,1384,1385,1388],{},[39,1386,1387],{},"プライベート \u002F シークレットウィンドウ"," で確認 (キャッシュを噛まない)",[92,1390,1391,1392,1395,1396,1399],{},"本番では ",[204,1393,1394],{},"\u003Clink rel=\"icon\" href=\"\u002Ffavicon.ico?v=2\">"," のように",[39,1397,1398],{},"バージョンクエリ","を付けて即時反映を促す",[92,1401,1402,1403,1406],{},"Chrome は ",[204,1404,1405],{},"chrome:\u002F\u002Ffavicon\u002Fhttps:\u002F\u002Fyour-site.com\u002F"," でブラウザが認識しているファビコンを直接確認できる",[85,1408,1410],{"id":1409},"google-検索結果にファビコンが出ない","Google 検索結果にファビコンが出ない",[17,1412,1413,1414,1417],{},"Google モバイル SERP に表示されるには ",[39,1415,1416],{},"48×48 以上のアイコンがクロール可能","であること、かつ「サイト全体を代表するアイコン」というガイドラインに沿っていることが求められます。Zerosend のファビコン生成ツールは 16\u002F32\u002F48 のマルチサイズ ICO を自動で書き出すため、この要件は満たせます。サブドメインごとに別のファビコンを設定することも可能です。",[12,1419,1420],{"id":1420},"まとめ",[17,1422,1423,1424,1427],{},"2026 年のファビコン運用は「SVG を第一選択 + ICO \u002F apple-touch-icon \u002F PWA アイコン + webmanifest」の組み合わせで完成します。1 枚の画像から一式を生成するなら、ブラウザ内で完結する ",[70,1425,1426],{"href":672},"Zerosend のファビコン生成ツール"," が手早くておすすめです。",[17,1429,1430,1431],{},"関連: ",[70,1432,1434],{"href":1433},"\u002Fblog\u002Ffavicon-generator-intro","ファビコン生成ツールの舞台裏",[633,1436,1437],{},"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":159,"searchDepth":160,"depth":160,"links":1439},[1440,1445,1451,1456,1460,1464,1470,1471,1479],{"id":677,"depth":160,"text":678,"children":1441},[1442,1444],{"id":681,"depth":167,"text":1443},"\u003Clink> タグで参照される機能の総称",{"id":710,"depth":167,"text":711},{"id":717,"depth":160,"text":718,"children":1446},[1447,1448,1450],{"id":721,"depth":167,"text":722},{"id":748,"depth":167,"text":1449},"推奨: favicon.svg",{"id":762,"depth":167,"text":762},{"id":779,"depth":160,"text":780,"children":1452},[1453,1454,1455],{"id":783,"depth":167,"text":783},{"id":869,"depth":167,"text":870},{"id":880,"depth":167,"text":880},{"id":893,"depth":160,"text":894,"children":1457},[1458,1459],{"id":897,"depth":167,"text":897},{"id":1069,"depth":167,"text":1070},{"id":1079,"depth":160,"text":1080,"children":1461},[1462],{"id":1230,"depth":167,"text":1463},"sizes=\"any\" の罠",{"id":1245,"depth":160,"text":1246,"children":1465},[1466,1467,1468,1469],{"id":1249,"depth":167,"text":1250},{"id":1256,"depth":167,"text":1257},{"id":1263,"depth":167,"text":1263},{"id":1276,"depth":167,"text":1277},{"id":1286,"depth":160,"text":1287},{"id":1329,"depth":160,"text":1329,"children":1472},[1473,1474,1475,1477,1478],{"id":1332,"depth":167,"text":1333},{"id":1339,"depth":167,"text":1340},{"id":1352,"depth":167,"text":1476},"favicon.ico だけしか指定していない",{"id":1364,"depth":167,"text":1364},{"id":1409,"depth":167,"text":1410},{"id":1420,"depth":160,"text":1420},"ファビコンのサイズは結局どれが必要? ICO と SVG の使い分けは? 2026 年時点で本当に必要なアイコンセットと、1 枚の画像からブラウザ内で一式生成できる方法を解説します。",{},"\u002Fblog\u002Ffavicon-complete-guide-2026","2026-04-19",{"title":664,"description":1480},"favicon-complete-guide-2026","blog\u002Ffavicon-complete-guide-2026",[1488,186,1489],"ファビコン","SVG","rGRV7aRcqetLpG7f7z1cHwfvIdswbm-q-bojGTxqaWs",1778757806726]