こんな経験ありませんか？競合サイトで、16x16でもぼやけず、ダークモード対応でRetinaディスプレイでもくっきり表示される、美しいファビコンを見つけたとします。DevToolsを開いて<head>を調べると…PNGやICOファイルがごちゃごちゃと。SVGは見当たりません。

それが問題です。ほとんどのファビコン抽出ガイドでは、PNGやICOファイルの取得方法しか教えてくれません。しかし2026年、本当に価値があるのはSVGファビコンです。無限に拡大可能で、prefers-color-schemeによるダークモード対応、そしてラスター画像の数分の一のファイルサイズを誇ります。ここでは、実際にSVGファビコンを抽出する方法をご紹介します。

SVGファビコンを探す価値

抽出方法に入る前に、なぜこれが重要なのかをお話しします。GitHubはSVGファビコンを使用しています。StripeもAppleも同様です。これらの企業がSVGを選んだのは、流行っているからではなく、たった一つのSVGファイルで6つのPNG、ICO、そしてWebマニフェストのエントリを置き換えられるからです。

SVGファビコンはダークモードでも幽霊のように見えません。@media (prefers-color-scheme: dark)をSVGに直接埋め込めるので、アイコンが自動的に反転したり色が変わったりします。PNGでそれをやってみてください。

手動抽出のワークフロー

ステップ1: ページソースを調べる

ChromeまたはFirefoxで任意のWebサイトを開きます。右クリックして「検証」を選択（またはCtrl+Shift+Iを押下）。「Elements」タブに移動し、<head>内でrel='icon'を検索します。SVGリンクを探します:

<link rel='icon' type='image/svg+xml' href='/favicon.svg'>

これが見つかれば成功です。hrefの値をクリックして新しいタブでSVGを開き、保存します。ただし、多くのサイトではsizes属性の背後にSVGファビコンを隠していたり、Safari用にrel='mask-icon'を使用していたりします。最初に見つけたリンクだけで諦めないでください。

ステップ2: Webマニフェストを確認する

最近のプログレッシブWebアプリ（PWA）は、site.webmanifestファイル内でSVGファビコンを宣言していることがよくあります。<head>内でrel='manifest'を検索します:

<link rel='manifest' href='/site.webmanifest'>

そのJSONファイルを新しいタブで開きます。iconsというプロパティを探します。これはオブジェクトの配列です。typeが'image/svg+xml'のエントリを見つけてください。それがSVGファビコンのURLです。コピーしてファイルをダウンロードします。

ステップ3: フォールバックとしてFavicon APIを使用する

一部のサイトでは、HTMLでSVGファビコンを公開していません。ブラウザの自動/favicon.icoリクエストに依存しています。その場合、パスを推測する必要があります。一般的な場所は次のとおりです:

これらをドメインの後にアドレスバーに入力してみてください。サーバーが404を返した場合、そのサイトはSVGファビコンを使用していないか、うまく隠している可能性があります。

Mzu favicondl でSVGファビコンを抽出する

手動での調査は有効ですが、複数のサイトからファビコンを抽出する場合、面倒です。そこでMzu favicondlの出番です。このツールは、ページの<head>、Webマニフェスト、さらには一般的なファイルパスをスキャンして、SVGファビコンを自動的に見つけます。

ワークフローは次のとおりです:

  1. Mzu favicondlにアクセスします。
  2. 入力フィールドにWebサイトのURLを貼り付けます。
  3. 「抽出」をクリックします。
  4. ツールが見つけたすべてのファビコン（SVG、PNG、ICO、Apple Touchアイコンを含む）を一覧表示します。
  5. SVGエントリの横にあるダウンロードボタンをクリックします。

以上です。ツールは、ダウンロード前に検査したい場合に備えて、生のSVGコードも表示します。広告も、サインアップも、無駄なものも一切ありません。

SVGファビコン抽出のプロのコツ

相対パスに注意

多くのサイトは/assets/favicon.svgのような相対パスを使用しています。DevToolsからhrefの値をコピーする場合、ドメインを先頭に付加する必要があります。Mzu favicondlはこれを自動的に処理しますが、手動で行う場合はベースURLを忘れないでください。

ダークモードバリアントを確認する

一部のサイトでは、ユーザーのカラースキームに応じて異なるSVGファビコンを提供しています。<link>タグにmedia='(prefers-color-scheme: dark)'属性がないか確認してください。見つかった場合は、ライトモードとダークモードの両方のバリアントを抽出する必要があります。

SVGを検証する

すべてのSVGファイルが有効なファビコンであるとは限りません。外部参照、JavaScript、または巨大なviewBox値が含まれているものもあります。抽出したSVGファビコンを使用する前に、テキストエディタで開き、自己完結型であることを確認してください。<script>タグは削除してください。ブラウザはファビコン内では無視しますが、良い習慣です。

抽出後に行うこと

SVGファビコンを入手したら、自分のサイトに実装しましょう。正確なHTMLコードとダークモードの設定については、SVGファビコン: モダンなアプローチのガイドをご覧ください。レガシーブラウザ向けにSVGをICOに変換する必要がある場合は、SVGからICOへのコンバーターがワンクリックで処理します。

結論: SVGファビコンの抽出は難しいことではありませんが、どこを探すべきかを知っている必要があります。PNGはスキップしてください。直接SVGを狙いましょう。ブラウザのタブが喜びます。

}