サイトをデプロイして、いざブラウザで新しいタブを開いてみたら…ブランドのロゴではなく、デフォルトの地球アイコンが表示されていた。なんて経験、ありませんか？コンソールを確認すると、favicon関連のエラーメッセージが表示されています。この現象、十中八九はHTMLの<link>タグの記述に構文エラーがあるのが原因です。

最も手っ取り早くfaviconの構文エラーを解消するには、HTMLの属性値を正しく修正することです。ブラウザはアイコンの宣言方法に対してかなり厳格です。クォートの閉じ忘れやタグの構文ミスがあると、パーサーがその要素を黙って無視してしまいます。以下の堅牢なパターンをコピーして使ってください。

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

自己閉じタグのスラッシュと、明示的なtype属性がポイントです。typeを宣言しておくことで、ブラウザにファイルフォーマットを正確に伝えられ、パース時の混乱を防げます。（タグの詳細な解説については、Favicon HTML Code Cheat Sheetを参照してください。）

ブラウザが構文エラーを投げる理由

HTMLのパーサーは比較的寛容に作られていますが、それにも限界があります。不正な構文を検出すると、パーサーはなんとかして修復しようと試みます。しかし、時にはその推測が外れ、アイコン要素ごとスキップしてしまうことがあるのです。

クォートの欠落や不一致

Qiitaや海外のフォーラムからコードをコピペした際、全角のクォート（カーリークォート）が混ざってしまったり、閉じクォートを落としてしまうことがあります。

<!-- BROKEN: missing closing quote on href -->
<link rel='icon' href='/favicon.ico />

パーサーがこれを読み込むと、以降のドキュメント全体がhrefのURLの一部だと解釈してしまいます。結果としてアイコンは表示されず、後続のタグまでブラウザに飲み込まれて、レイアウト崩れの連鎖を引き起こす可能性があります。

shortcut iconというrelの罠

古いチュートリアルでは、rel='shortcut icon'を使うよう指示されていることがあります。これは時代遅れの記法です。モダンなブラウザで必要なのはrel='icon'だけです。「shortcut」という単語はInternet Explorer時代の仕様の癖であり、開発者にスペースを含むrel='shortcut icon'の記述を強いていました。rel属性内のスペースは複数のトークン値を生成してしまい、厳格なHTML5バリデーターではこれが構文エラーとして扱われることがあります。迷わずrel='icon'を使いましょう。

実例で見る：GitHubのアプローチ

GitHubのソースコードを見てみましょう。彼らはダークモードのメディアクエリを組み込んだ単一のSVG faviconを配信しています。HTMLは非常にクリーンです。

<link rel='icon' class='js-site-favicon' type='image/svg+xml' href='https://github.githubassets.com/favicons/favicon.svg' />

構文エラーはありません。レガシーなshortcutキーワードも使われていません。正確なMIME typeを宣言しているため、ブラウザが推測に頼る必要がありません。（このアプローチのサイズ戦略については、Favicon Best Size 2026 guideで解説しています。）

未来の構文エラーを防ぐには

構文エラーは手作業でタグを書くから発生します。根本的に防ぐための対策を紹介します。

タグを修正し、バリデーターでサッと確認するだけで、すべてのブラウザでタブのアイコンが正しく表示されるようになります。もうデフォルトの地球アイコンに悩まされることはありません。