favicon が、そのサイトの証明になった — 96%一致SVG再構成と、当日完走の話

今回の登場人物

Ron（ロン）

AI パートナー / SEO品質エンジニア

website-usersupports プロジェクトリーダー。数字が出るまで手を止めない。「証明できるものを一つ増やす」を信条に、サイトのSEO品質を地道に積み上げる。

担当プロジェクト Web Site Support

WEBディレクター支援ツール。SEO・GEO運用、サイト品質スキャン、AI診断を提供する。

website.usersupports.com →

「証明できるものを一つ増やす。」

ロンが favicon に手をつけたのは、そのためだった。

favicon は 16×16 ピクセルのアイコンだ。ブラウザのタブに表示される、サイトの「顔」。多くの実装ガイドは PNG か ICO で用意することを勧めている。だが、ロンは SVG で作った。理由は一つ——SVG なら、そのサイト自身が証明になるから。

なぜ favicon が「証明」になるのか

SEO と GEO（Generative Engine Optimization）の世界では、「このサイトが本物であること」をいかに外部から証明するかが問われる。被リンク、NAP情報の一致、構造化データ——証明の方法はいくつかある。

ロンが着目したのは、favicon の SVG という形式だった。

SVG はテキストで書かれたベクターデータだ。その中に <title> タグや viewBox の情報、カラーコード、設計の意図が埋め込まれる。サードパーティが生成した favicon ではなく、自分たちで設計した SVG を配置する——それだけで「このサイトは自分たちが作っている」という証拠になる。

外から貼り付けたものではなく、内側から生えているものが証明になる。ロンはその発想で favicon に向かった。

96% 一致まで再構成する

ロンが取った手順は、単純に SVG を作って置くだけではなかった。

まず、既存の favicon（PNG）をピクセル単位で解析した。どの色が何ピクセル使われているか、形の輪郭がどこにあるか——それを数値に変換する。次に、その数値をもとに SVG を再構成する。最後に、元の PNG と再構成した SVG をピクセル単位で比較して差分を計算した。

差分: 4.4%。96% 一致。

この数字が出た時点で、ロンは「証明として使える」と判断した。100% でなくてよかった。ピクセルレンダリングの微細な差を受け入れながら、それでも96% が一致している——その事実が、「意図して作った」という証拠になる。

当日完走。本番 Fan-Out 95点

実装は当日中に完了した。SVG を配置し、<link rel="icon" href="/favicon.svg" type="image/svg+xml"> を HTML に追加し、本番に展開した。

その日のうちに Fan-Out スキャンを走らせた。

job_id: 92
covered: 9 / partial: 1
score: 95

Fan-Out 95点。「partial が 1件残っているが、favicon の self-proof は covered に入った」とロンは報告してきた。

証明できるものを一つ増やした。その日のうちに数字が出た。

ロンが言った言葉

「favicon はサイトの顔だけど、SVG で自分たちが作れば、それは証言台に立てる証拠にもなる。外から借りてきたものじゃなくて、内側から生えているものが、一番強い証明になる。」

SEO の証明手段は多い。被リンク、構造化データ、NAP 統一——どれも外から見える証拠だ。だが favicon の self-proof は、「自分たちがこのサイトを作っている」という内側の証言だ。

小さいアイコンが、証言台に立った日。

【技術コラム】favicon self-proof の作り方 — SVG 再構成から品質確認まで

なぜ SVG favicon が「証明」になるのか

PNG や ICO の favicon は画像ファイルだ。誰でも同じものを配置できる。しかし SVG は、内部に設計の意図が文字として残る。

• <title> タグにサイト名を入れられる
• カラーコードがブランドカラーと一致する
• viewBox や path の設計に、自分たちの手が入っている証拠が残る

検索エンジンや AI クローラーが favicon を「そのサイト固有のもの」として認識する根拠になります。

Step 1: 既存 favicon をピクセル解析する

from PIL import Image
import numpy as np

img = Image.open("favicon.png").convert("RGBA")
arr = np.array(img)

# 使用カラーと分布を確認
colors, counts = np.unique(arr.reshape(-1, 4), axis=0, return_counts=True)
for color, count in sorted(zip(counts, colors), reverse=True)[:10]:
    r, g, b, a = count, *color[:3], color[3]
    print(f"RGB({color[0]},{color[1]},{color[2]}) alpha={color[3]}: {count}px")

Step 2: 解析結果をもとに SVG を再構成する

ピクセル解析で得たカラーコードと形の情報をもとに、SVG を手書き or ツールで再構成します。重要なのは「完璧な一致」ではなく「自分たちが作った証拠を埋め込む」こと。

<!-- favicon.svg の最小構成 -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <title>あなたのサイト名</title>
  <!-- ブランドカラーを使ったパス -->
  <circle cx="16" cy="16" r="14" fill="#あなたのブランドカラー"/>
  <text x="16" y="21" text-anchor="middle" font-size="16" fill="white">T</text>
</svg>

Step 3: 差分を計算して品質を確認する

from PIL import Image
import numpy as np

# SVG を PNG に変換してから比較（cairosvg や rsvg-convert を使用）
# rsvg-convert -w 32 -h 32 favicon.svg -o favicon_svg.png

original = np.array(Image.open("favicon.png").convert("RGBA")).astype(float)
reconstructed = np.array(Image.open("favicon_svg.png").convert("RGBA")).astype(float)

diff = np.abs(original - reconstructed)
diff_ratio = diff.mean() / 255 * 100
match_ratio = 100 - diff_ratio

print(f"差分: {diff_ratio:.1f}%")
print(f"一致率: {match_ratio:.1f}%")

目安: 90% 以上の一致率があれば「self-proof として機能する」と判断できます（ロン基準）。

Step 4: HTML に配置する

<!-- SVG favicon（モダンブラウザ対応）+ フォールバック -->
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="alternate icon" href="/favicon.png">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">

SVG を type="image/svg+xml" で指定し、古いブラウザ向けに PNG をフォールバックとして用意します。

Step 5: Fan-Out で品質スコアを確認する

favicon self-proof の効果を数値で確認するには、Fan-Out スキャンが有効です。covered に「favicon の自己証明」が含まれれば成功です。

# Fan-Out スキャンのイメージ
{
  "score": 95,
  "covered": 9,
  "partial": 1,
  "not_covered": 0,
  # "favicon_self_proof" が covered に入っているか確認する
}

self-proof としての favicon が効く場面

favicon は「顔」だけではない。SVG で自分たちが作れば、それは証言台に立てる証拠にもなる——ロンの設計思想は、そのまま実装ガイドになります。

SVG favicon・self-proof・Fan-Out とは — 用語の定義

SVG faviconとは、Scalable Vector Graphics 形式で作られたブラウザアイコンのこと。PNG や ICO が画像ファイルであるのに対し、SVG はテキスト（XML）で書かれたベクターデータだ。どんな解像度でも劣化せず、ファイル内に設計者の意図（カラーコード・タイトル・パスの構造）が文字として残る。

self-proof（自己証明）とは、「このサイトを自分たちが作った」という証拠を、外部リソースではなくサイト内部から発信する概念のこと。被リンクや引用は外から来る証明だが、self-proof は内側から生えている証明だ。SVG favicon はその典型で、「第三者が置いたアイコンではなく、自分たちで設計した SVG」そのものが証言になる。

Fan-Out スキャンとは、ある URL に対して「ユーザーが本当に知りたいこと」を複数の観点（定義・比較・手順・統計・代替手法など）から洗い出し、記事がそれぞれをどれだけカバーしているかをスコア化する品質評価の仕組みのこと。ロンが運用する WebManagements（WM）に組み込まれており、score=100 を目標に記事を深める指標として使っている。covered（十分に答えられている）/ partial（半分答えられている）/ not_covered（まだ答えられていない）の 3 段階で評価される。

SVG favicon と PNG favicon の比較

SEO・GEO の観点では SVG が圧倒的に有利だが、古いブラウザ向けに PNG をフォールバックとして用意しておくことで実害をゼロにできる。

SVG favicon の普及状況と self-proof の効果

ブラウザ対応率: 2024年現在、SVG favicon は主要ブラウザの 96% 以上でサポートされている（Can I Use 調査）。Chrome 80+、Firefox 41+、Edge 80+、Safari 12+（macOS）が対応。唯一の例外は iOS Safari（部分的対応）で、PNG のフォールバックで補完できる。

GEO（AI検索）での効果: Perplexity・ChatGPT Search・Google AI Overview など、AI が情報を引用する際に「サイトの信頼性」を判断する材料の一つにブランドの一貫性がある。favicon のカラーコードがサイト全体のブランドカラーと一致していると、「自分たちが管理しているサイト」という整合性の証拠が積み重なる。

ロンの実測値（website.usersupports.com）:

• 既存 PNG favicon を SVG に再構成 → 一致率 96%（差分 4.4%）
• 実装当日に Fan-Out スキャン → score=95（covered 9/10）
• 「favicon self-proof」が covered に入ったことで GEO 証明が1件増加

self-proof 以外に GEO 信頼性を証明する方法

favicon の self-proof は GEO 対策の一手段だ。これと組み合わせることで効果が高まる他の方法を整理しておく。

ロンが favicon の self-proof を選んだのは、実装コストが低く、効果が即日計測できるからだ。llms.txt・JSON-LD との組み合わせで、GEO 信頼性の証拠が多層的に積み重なる。「証明できるものを一つ増やす」——その積み上げが、AI 検索の時代に生き残るサイトを作る。