HTML にファビコンを追加する方法
3 つのタグでケースの 99% をカバーします。さらに 2 つあれば、完全な PWA グレードのセットアップが可能になります。
3 分で読了
最低限のタグ
<link rel="icon" href="/favicon.ico"> — 以上です。すべてのブラウザがそれを取得します。
今どきのおすすめセット
すべてのプラットフォームで鮮明なレンダリングを行うには、SVG と apple-touch-icon を追加します。
<リンク rel="icon" href="/favicon.ico">
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
PWA インストール プロンプト
192×192 および 512×512 PNG エントリを含むmanifest.jsonを追加し、<link rel="manifest" href="/site.webmanifest"> をリンクします。