HTMLにファビコンを追加する方法
プレーン HTML ページへのファビコンの追加は 1 行の変更ですが、最新の完全なセットアップは 6 行で、iOS、Android、ダーク モード、PWA のインストールをカバーします。
すべてのブラウザが考慮する単一のタグは <link rel="icon" href="/favicon.ico"> です。 favicon.ico をサイトのルートにドロップすれば、80% 完了です。
残りの 20% (apple-touch-icon、PNG バリアント、ダークモード サポート付き SVG、および Web マニフェスト) は、デフォルトのアイコンと洗練されたブランド エクスペリエンスを分けるものです。
使い方
- 1
ファビコン パッケージを生成する
FetchFavicon パッケージ ジェネレーターを使用すると、必要なすべてのファイルと貼り付け可能なマークアップが生成されます。
- 2
サイトのルートにファイルをドロップします
favicon.ico、apple-touch-icon.png、android-chrome-192/512.png、site.webmanifest。
- 3
スニペットを <head> に貼り付けます
6 つの <link> タグ + 1 つの <meta name="theme-color">。
今すぐ試す
HTML スニペットを取得する
ファビコンジェネレーターよくある質問
<link> タグはどこに行くのでしょうか?+
<head> 内のどこでも、</head> より前にあれば順序は関係ありません。
.ico と PNG の両方が必要ですか?+
はい。 .ico はユニバーサルフォールバックです。 PNG は高 DPI 画面で最も鮮明にレンダリングします。
ダークモードはどうですか？+
<style> ブロック内に、prefers-color-scheme メディア クエリを埋め込む SVG バリアントを出荷します。