今すぐ Chrome で新しいタブを開いて、よくアクセスするサイトのグリッドを見てください。Zenn の鮮明なロゴや、Qiita のアイコンが並んでいるはずです。しかし、中にはぼやけたピクセルだらけの画像や、単なる文字が入ったグレーの丸になっているサイトはありませんか？これは、favicon for chrome new tab の設定が不十分な場合に発生します。

Chrome の新しいタブページ（NTP）は、ユーザーの目に留まりやすい重要なスペースです。ユーザーが頻繁に Web アプリを訪問すると、Chrome は自動的にこのグリッドに追加します。しかし、このショートカットグリッドには、通常のブラウザタブで使われる 16x16 ピクセルよりも大きく、高品質なアイコンが必要です。

Chrome がアイコンを取得する仕組み

Chrome は、ユーザーが新しいタブを開くたびにアイコンを再取得するわけではありません。代わりに、ユーザーのマシン内にある隠し SQLite データベースから読み込みます。

訪問時に、Chrome は HTML をスキャンし、利用可能な最適なアイコンをキャッシュします。低解像度の古いファイルしか提供していない場合、Chrome は NTP グリッドに合わせて無理やり引き伸ばします。その結果、ぼやけたプロらしくない見た目になってしまいます。（この問題をデバッグしている場合は、Chrome キャッシュのトラブルシューティング ガイドをご覧ください）。

2026 年の理想的なセットアップ

Chrome NTP でサイトを鮮明に表示させるには、単一の古いファイルに依存するのをやめる必要があります。SVG と高解像度 PNG のフォールバックを組み合わせたデュアルフォーマットのアプローチを推奨します。

ドキュメントの head に追加すべき正確なコードは以下の通りです：

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

NTP ショートカットのベストプラクティス

コードを正しく設定するのは半分に過ぎません。デザイン自体も Chrome の UI 仕様に対応する必要があります。

Chrome のショートカットを修正するために、まだ Photoshop で手動で画像をリサイズしているなら時間の無駄です。Mzu favicondl を使って、Chrome が要求する正確な SVG と PNG ファイルを、正しい HTML タグと共に一瞬で生成しましょう。