クライアントのモックアップを作成したり、競合分析ダッシュボードを構築したり、あるいはZennがどのようにダークモード対応のタブアイコンを処理しているのかをリバースエンジニアリングしようとしたりして、壁にぶつかったことはありませんか？URLの末尾に /favicon.ico を追加してみても、404エラーが返ってくるだけです。ブラウザの仕様は、単一のルートファイルからすでに大きく進化しています。現在、ウェブサイトのファビコンをコピーする方法（how to copy a website favicon）を正確に知りたいなら、DOMを見る必要があります。
私はクライアントのサイトを監査する際、常にこの作業を行っています。アイコンの設定を修正する前の第一歩は、既存の設定をコピーすることです。ここでは、ブラウザから直接サイトのファビコン実装をコピーする、私の具体的なワークフローを紹介します。
開発者のワークフロー：ウェブサイトのファビコンをコピーする方法
「ページのソースを表示」は無視してください。Next.jsやNuxtなどの最新のJavaScriptフレームワークは、これらのタグを動的に注入することがよくあります。必要なのはレンダリングされたDOMです。
ステップ1：要素パネルを開く
対象のウェブページ上の任意の場所を右クリックし、「検証」を選択します。Elementsパネル内で Cmd+F（または Ctrl+F）を押し、rel='icon' を検索します。
ステップ2：HTMLノードをコピーする
おそらく複数のタグが見つかるはずです。例えばZennでは、SVGとフォールバック用のPNGを組み合わせて使用しています。<link> ノードを右クリックし、「コピー」から「要素をコピー」を選択します。これにより、アイコンを提供するために使用されている正確なマークアップを取得できます。
ステップ3：コンソール経由でアセットを抽出する
画像ファイル自体だけが欲しい場合、相対パス（/assets/images/icon.svg など）を掘り下げるのは面倒です。DevToolsのConsoleに移動し、この短いスニペットを実行してください。
const icon = document.querySelector('link[rel="icon"]').href;
console.log(icon);これにより、絶対URLが即座に解決されます。それをクリックして、画像を保存します。
アイコンをコピーする際のよくある落とし穴
アイコンを取得するのは簡単ですが、盲目的に再利用すると大抵問題が起きます。以下の罠に注意してください。
- 相対パス： HTMLタグをローカルプロジェクトに直接コピーした場合、
href='/favicon.svg'のようなパスはlocalhost上のファイルを探すため、タブが空白になります。 - Apple Touch Iconの欠落： 標準の
rel='icon'はiOSのホーム画面をカバーしていません。多くの場合、rel='apple-touch-icon'を別途探す必要があります。 - SVGメディアクエリ： SVGファビコンをコピーした場合、ダークモード用の内部CSSが含まれている可能性があることに注意してください。モックアップ環境が一致しないと、見えなくなる可能性があります。
複数のサイトでこれを手動で行っているなら、時間の無駄です。コンソールのテクニックは単発の作業には最適ですが、私はこれを自動化するために Mzu favicondl を構築しました。ターゲットURLを解析し、すべてのパスを解決して、アイコンをパッケージ化します。
代替の抽出方法についてさらに深く知りたい場合は、任意のウェブサイトからファビコンをダウンロードするガイドをチェックするか、最新のサイトがそもそもなぜ SVGファビコン を使用するのかを学んでください。URLを推測するのはやめて、DOMの検証を始めましょう。