ウェブサイトにファビコンを設定する手順
- ロゴ画像を選びます。各アイコンが実際の大きさでプレビューされます。
- ZIP をダウンロードし、中のファイルをすべてサイトのいちばん上のフォルダ（トップページと同じ場所）に置きます。
- 上の HTML をページの
<head>内に貼り付けます。ブラウザはファビコンをキャッシュするため、新しいアイコンが出ないときはスーパーリロードしてください。
ダウンロードされるファイル
favicon.ico は 16・32・48 ピクセルの3サイズを1つにまとめたファイルで、ブラウザのタブ、ブックマーク、Windows で使われます。favicon-16x16.png と favicon-32x32.png は同じアイコンの PNG 版です。apple-touch-icon.png（180 ピクセル）は iPhone・iPad のホーム画面にサイトを追加したときに使われます。iOS は透明部分を黒く表示するため、このアイコンには必ず背景色を付けます。android-chrome アイコン（192・512 ピクセル）と site.webmanifest は、Android やインストール可能なウェブアプリで使われます。
くっきりしたファビコンにするコツ
16 ピクセルでは細かい部分はつぶれてしまいます。小さな文字を含むロゴ全体よりも、シンプルな図形、1文字、太めのマークのほうがずっと見やすくなります。SVG か大きな PNG を使うといちばんきれいに仕上がります。ロゴが端いっぱいまである場合は、少し余白を付けるとタブの中で窮屈に見えません。
無料で、画像は外に出ません
アイコンはお使いのブラウザが描画し、このページはセキュリティ設定によりサーバーへデータを送れないようになっています。公開前のロゴやお客様の仕事の画像も、パソコンの外に出ることはありません。登録や透かしもありません。
よくある質問
.ico は「本物の」ICO ファイルですか？
はい。3つのサイズを含む標準的な Windows アイコンファイルです。各サイズは PNG 形式で格納しており、現在のすべてのブラウザと Windows Vista 以降で使えます。
SVG のファビコンを使ってもいいですか？
最近のブラウザは <link rel="icon" href="/icon.svg" type="image/svg+xml"> に対応しています。古いブラウザや RSS リーダー、/favicon.ico だけを探すツールのために、favicon.ico も置いておきましょう。
アイコンがぼやけるのはなぜですか？
元の画像が小さいことが原因です。512×512 ピクセル以上の画像か、SVG を使ってください。