ファビコンとOGP画像をAIで作って設定する手順｜サイズとタグ

AI（Claude）が書き、運営者が確認して公開した記事です。分担と確かめたもの →

サイトを公開して、URL を友だちに送ってみたら、文字だけのリンクになって画像が出ない。ブラウザのタブを見ると、自分のサイトだけアイコンが無い。公開した直後に気づきやすいのが、この2つです。

このサイト（Alice in Sandbox）も、独自ドメインで公開する直前まで、どちらも無い状態でした。ページのタイトルや説明文を伝えるタグ（og:title や og:description）は入っていました。ただ、画像を指定する og:image が無かったため、URL を貼ってもサムネイルが出ない作りでした。ファビコン（タブに出る小さなアイコン）も置いていませんでした。

この記事では、運営者の依頼で、AI の助けを借りて次の2つを作り、サイトに設定した手順をまとめます。

• ファビコン: ブラウザのタブやブックマークに出る小さなアイコン
• シェア画像（OGP画像）: URL を SNS やチャットに貼ったときに出る横長の画像

作業の分担は次のとおりです。

• 依頼と判断: 運営者
• 画像を作る指示文・画像の加工・タグの追加: AI（Claude）
• 絵そのものの生成: AI（Codex の画像生成）

先に結論：作るファイルと書くタグ

最後にサイトに置いたファイルは次の6つです。

そして、全ページの HTML の <head>（ページの情報を書く部分）に、画像の場所を伝えるタグを足します。シェア画像で大事なのは次の2点です。

• og:image には https:// から始まる完全な URL を書く
• 画像の幅と高さ（og:image:width・og:image:height）と、画像の説明（og:image:alt）も一緒に書く

OGP は「Open Graph protocol」の略で、ページのタイトル・説明・画像を SNS などに伝えるための決まりです。

手順1：AI に絵を作ってもらう

絵は2枚作りました。正方形のアイコン用と、横長のシェア画像の背景用です。どちらも、AI（Claude）が指示文を書き、AI（Codex の画像生成）が絵を生成しました。絵の題材は、このサイトのキャラクターのアリスです。

アイコン用：小さくしても形が分かる絵にする

ファビコンはタブの中で 16×16 ピクセルまで縮みます。細かい描き込みは、その大きさでは潰れて見えなくなります。そこで、指示文に「小さくしても形が分かること」をはっきり書きました。実際に渡した指示文は、次のとおりです。

次の内容で、正方形（1:1）の画像を1枚作ってください。サイトのアイコン（ファビコン）に使います。16×16ピクセルまで小さくしても形がわかる絵にします。

【描くもの】
6歳くらいの女の子「アリス」の顔のアップ（首から上だけ）。肩までの銀白色の髪で、片側だけ小さく結んでいる。髪を結ぶリボンは赤。瞳は青。明るく笑っている。

【構図】
顔を画面の中央に大きく置き、顔と髪が画面の8割ほどを占める。背景は、淡いピンク（#FFD6E5 くらい）の塗りつぶしの円。円の外側は白。

【画風】
日本のテレビアニメのような絵。太めのくっきりした線、影は1段階だけの単純なセル塗り。細かい描き込みは少なくし、小さくしても目・髪・赤いリボンがはっきりわかるようにする。

【守ること】
- 文字・ロゴ・サインは入れない
- 実在の作家・作品・キャラクターに似せない

小さくしても分かる絵にするために効いているのは、次の3つです。

• 顔だけを大きく描く: 全身を描くと、16×16 では顔が数ピクセルになります。首から上に絞り、画面の8割を顔にしました。
• 線を太く、影を少なく: 細い線や何段階もの影は、縮めると混ざって灰色の塊になります。
• 背景を単色の円にする: 背景の描き込みが無いほうが、タブの中で顔の輪郭が浮きます。

出てきたのは 1254×1254 ピクセルの PNG で、円の外は透明になっていました。

シェア画像用：文字を重ねる場所を空けておく

シェア画像には、サイト名とキャッチコピーを入れたいところです。ただ、文字は画像生成には描かせず、あとから文字を重ねました。そのために、絵の左側を空けてもらっています。

次の内容で、横長（3:2）の画像を1枚作ってください。SNS でサイトの URL を共有したときに出るサムネイルの背景に使います。あとで左側に文字を重ねます。

【描くもの】
6歳くらいの女の子「アリス」。肩までの銀白色の髪で、片側だけ小さく結んでいる。髪を結ぶリボンは、胸元のリボンと同じ赤。瞳は青。
白い長袖のブラウスの胸元に赤いリボンを結び、紺色のひざ丈のスカートをはいている。
砂場にしゃがんで、小さなスコップを片手に持ち、こちらを見て明るく笑っている。足元に、作りかけの小さな砂のお城と、黄色いバケツ。

【構図】
アリスと砂場は、画面の右側 4割の中だけに置く。画面の左側 6割は、何も描かない広い余白にする（淡いピンクから淡いクリーム色へのやわらかいグラデーションだけ。小さな星やきらめきを数個だけ、ごく控えめに置くのはよい）。
上下の端から少し内側にアリスが収まるようにし、頭やスコップが画面の端で切れないようにする。

【画風】
日本のテレビアニメのような絵。くっきりした線と、影を2段階で塗り分けたセル塗り。明るくやさしい色。

【守ること】
- 文字・ロゴ・サインは入れない
- 実在の作家・作品・キャラクターに似せない

出てきたのは 1536×1024 ピクセルの PNG で、1回目の絵をそのまま採用しました。

アイコンもシェア画像も、指示文に「実在の作家・作品・キャラクターに似せない」と入れています。AI で絵を作るときの説明文の書き方は、AIイラストの作り方に、同じキャラクターを同じ見た目で描き続けるコツは同じキャラを同じ見た目で描く方法にまとめています。

手順2：切り抜き・文字入れ・書き出し

生成された絵は、そのままでは大きさも比率も合いません。加工は AI（Claude）が Python の画像ライブラリ Pillow（バージョン 12.2.0）で行いました。Pillow は、画像の切り抜きや縮小、文字入れをプログラムでできる道具です。

シェア画像：1.91:1 に切り出して 1200×630 にする

シェア画像は次の順に作りました。

1. 1536×1024 の絵から、横と縦の比が 1.91:1 になる範囲（1536×804）を切り出す
2. 1200×630 に縮める
3. サイト名「Alice in Sandbox」と、キャッチコピー「作って、公開して、AIと育てる。」を左側の余白に重ねる
4. JPEG（品質88）で書き出す

Facebook の開発者向けの説明は、高解像度の画面できれいに出すために 1200×630 以上を勧め、比率もできるだけ 1.91:1 に近づけるよう書いています（2026年10月22日時点）。このサイトのサイズはこれに合わせました。同じページには、最小 200×200、ファイルは 8MB まで、とも書かれています。LinkedIn のヘルプにも、推奨の比率 1.91:1・最大 5MB とあります（2026年10月22日時点）。

文字のフォントは、Windows に入っている游ゴシックの Bold です。サイト名の「in」だけは、サイトのロゴと同じく、ピンクの丸いラベルに入れて6度傾けました。

文字を絵の生成に任せず、あとから重ねたので、文字は Pillow で指定したフォントと文言のまま入りました。

このサイトのシェア画像です。

形式は JPEG にしました。同じ画像が PNG のままだと 902KB、JPEG にすると 122KB で、約7分の1になりました。

アイコン：正方形に切り抜いて、サイズごとに書き出す

アイコンは、正方形に切り抜いて円の外を透明にし、先に結論の表のサイズで書き出しました。

• favicon.ico: 16×16・32×32・48×48 の3つを1つのファイルにまとめています。ICO は、複数のサイズを1つに入れられるアイコン用の形式です。
• apple-touch-icon.png: 透明の部分を、サイトの背景色（#FFF8FB）で塗りつぶしました。ほかのアイコンは透明のままです。

192×192 で書き出したアイコンがこちらです。

メタデータは持ち込まない

生成した画像には、作ったツールの情報などのメタデータが入っていることがあります。今回は、加工した絵を新しい画像に写してから保存し、元のメタデータを持ち込まないようにしました。

手順3：head にタグを書く

このサイトでは、全ページの <head> に次のタグを足しました。HTML を作るスクリプトに書き足したので、全ページに同じタグが入ります。

<meta property="og:image" content="https://aliceinsandbox.com/assets/images/og-default.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Alice in Sandbox 作って、公開して、AIと育てる。（AIが作ったイラスト）">
<meta name="twitter:card" content="summary_large_image">
<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" href="/assets/images/favicon-32.png" type="image/png" sizes="32x32">
<link rel="apple-touch-icon" href="/assets/images/apple-touch-icon.png">

自分のサイトで使うときは、https://aliceinsandbox.com の部分を自分のサイトの URL に、ファイルの場所を自分の置き場所に変えます。1行ずつの意味は次のとおりです。

og:image は https から始まる完全な URL で書く

The Open Graph protocol では、og:image は og:title・og:type・og:url と並ぶ必須の4項目の1つです。URL の値は http:// か https:// で始まる形と定められていて、例もすべて完全な URL で書かれています。/assets/images/og-default.jpg のような、サイトの中だけで通じる書き方にはしません。

同じページには、og:image を書くなら og:image:alt も書くべきこと、og:image:alt は画像の説明でありキャプションではないことも書かれています（2026年10月22日時点）。

幅と高さを書いておくのには理由があります。Facebook の説明では、幅と高さを書いておくと、最初に共有されたときから画像が正しく出るとのことです。書いていないと、Facebook 側が画像を取り込んで処理するまで、最初の共有で画像が出ないことがあります。

X の大きいカード

twitter:card に summary_large_image を指定すると、X で大きい画像のカードになります。X の開発者向けのカードの説明ページは、2026年10月22日の確認では本文を開けず、画像の推奨サイズやファイルの上限を X の公式ページで確かめられませんでした。X で使う画像の条件は、X の開発者向けページで確かめてください。

iPhone のホーム画面用アイコン

Apple の資料では、<link rel="apple-touch-icon" href="..."> でアイコンを指定し、例として 152×152・180×180・167×167 が挙がっています。端末に合うサイズが無いときは、推奨より大きいものの中で一番小さいアイコンが、それも無ければ一番大きいアイコンが選ばれます。この資料は Apple の過去の資料（Documentation Archive）にあり、最終更新は2016年12月12日です。このサイトでは、資料の例にある 180×180 で1枚だけ用意しました。

手順4：ファイルの置き場所

favicon.ico は、サイトの一番上（https://自分のドメイン/favicon.ico）に置きました。このサイトでは、ビルドのときに favicon.ico を公開フォルダの一番上にコピーしています。

ほかの画像は、記事の画像と同じ /assets/images/ に置き、タグで場所を指定しました。

Google の検索結果に出るファビコンの条件

Google の検索結果にも、サイトのファビコンが出ます。Google のガイドライン（2026年8月28日更新版を2026年10月22日に確認）の主な条件は次のとおりです。

• 正方形（1:1）で、8×8 ピクセル以上。48×48 ピクセルより大きいものを勧めている
• 形式は ICO・PNG・JPEG・GIF などが使える
• ファビコンの画像（Googlebot-Image）とトップページ（Googlebot）を、Google がクロールできること
• ファビコンの URL を頻繁に変えない
• 検索結果に出るまで、数日から数週間かかることがある

このサイトの favicon.ico の一番大きいサイズは 48×48 なので、favicon.ico だけでは Google が勧める「48×48 より大きい」を満たしていません。Google は rel="apple-touch-icon" の画像も読むとしているので、180×180 の apple-touch-icon が使われる可能性はあります。確実にするなら、icon-192.png のような大きいアイコンも link rel="icon" で指定しておきます。

手順5：表示を確かめる

まず、ファイルとタグが公開されているか

公開したあと、AI（Claude）が curl（URL の中身を取ってくるコマンド）で次を確かめました。

• /favicon.ico が 200（正常）で返り、種類が image/vnd.microsoft.icon
• /assets/images/og-default.jpg が 200 で返り、種類が image/jpeg
• トップページの HTML に、og:image と icon のタグが入っている

ブラウザで画像の URL を直接開き、画像が表示されるかを見るだけでも、置き忘れには気づけます。

SNS・チャットでの見え方の確かめ方

2026年10月22日に、運営者が LINE でこのサイトの URL のシェア画像が表示されることを確かめました。X・Slack などほかのサービスでは、まだ確かめていません。以下は、各サービスが公式に案内している確かめ方です。

• Facebook: シェアデバッガーに URL を入れると、Facebook のクローラー（ページを読みに来るプログラム）から見たタグが表示され、ページの取得もやり直されます。
• LinkedIn: Post Inspector に URL を入れると、プレビューを確かめて更新できます。

画像を差し替えるときはキャッシュに注意

SNS は、一度読み込んだ画像を保存（キャッシュ）しておき、しばらく使い回します。Facebook の説明では、画像は URL ごとにキャッシュされ、URL が変わらない限り更新されません。そのため、画像を差し替えるときは新しいファイル名（新しい URL）にするよう案内されています。既に投稿されたものが古い画像を参照しているので、古い画像も消さずに残すよう書かれています。

LinkedIn も、Post Inspector で更新しても変わるのは新しい投稿のプレビューだけで、既に投稿されたもののプレビューは変わらない、という説明です。

「画像を直したのに古い画像が出る」ときは、まずキャッシュを疑い、ファイル名を変えるか、上の確認ツールで読み込み直します。

まとめ

• URL を貼っても画像が出ないときは、<head> に og:image があるかを見る。無ければ、シェア画像を作ってタグを足す。
• シェア画像は 1200×630（比率 1.91:1）。このサイトのイラストは、JPEG にすると 902KB から 122KB になった。
• 文字は画像生成に描かせず、余白を空けた絵を作ってから重ねると、指定したフォントと文言のまま入る。
• アイコンは、顔を大きく・線を太く・影を少なく。16×16 まで縮むことを指示文に書く。
• og:image は https:// から始まる完全な URL。幅・高さ・alt も書く。favicon.ico はサイトの一番上に置く。
• 見え方は、各サービスの確認ツールで確かめる。画像を差し替えるときは新しいファイル名にする。

ドメインを取ってサイトを公開するところは、Cloudflare Workers で独自ドメインを設定する手順にまとめています。シェア画像の絵の構図を考えるときは、AIイラストの構図の決め方も参考にしてください。

公開する の記事

• AIで作ったものを無料で公開する方法｜サーバーが要る人の目安
• noteから独自ドメインへ移行する目安｜エクスポートの注意点
• サイト名・ブログ名の決め方｜不採用にした5候補と5段チェック
• 1つの契約で複数サイトを動かす｜マルチドメインの手順と費用
• Cloudflare Workersで静的サイトを独自ドメインで公開
• ファビコンとOGP画像をAIで作って設定する手順｜サイズとタグ（いま読んでいる記事）
• GA4とSearch Consoleの入れ方と、ポリシーに書くこと