ファビコンの作成方法
最新のファビコンは、16×16 の画像以上のものです。すべてのブラウザ、OS、デバイスで鮮明に見えるセットアップの完全なワークフローを次に示します。
Check favicons on any website
Install the FetchFavicon Chrome Extension to extract, preview, and validate favicons instantly.
ファビコンとは何ですか?
ファビコンは、ブラウザのタブ、ブックマーク バー、履歴リストに表示される小さなアイコンです。モバイルではホーム画面のアイコンです。 Windows では、これはショートカット アイコンです。
最近のサイトでは複数の解像度と形式が提供されているため、すべてのサーフェスが鮮明にレンダリングされます。
ソース画像を準備する
少なくとも 512 × 512 の正方形の画像から始めます。理想的には、正方形の viewBox を備えた SVG です。それより小さいものは縮小するとぼやけてしまいます。
細い線や小さな文字は避けてください。 16×16で消えます。
マルチサイズの .ico を生成する
16、32、48、64、128、および 256 を 1 つの favicon.ico 内にバンドルします。ブラウザは適切なサイズを自動的に選択します。
私たちのファビコン ジェネレーターは、クライアント側でこれを 1 秒以内に実行します。
HTML タグを追加します
favicon.ico をサイトのルートにドロップします。次に、SVG、apple-touch-icon、およびマニフェスト アイコンを <head> に追加して、セットアップを完了します。
すべてのブラウザで確認する
Chrome、Safari、Firefox、および Edge でのハードリフレッシュ。ブックマーク バー、タブ、ホーム画面のインストールを確認します。
よくある質問
What is a favicon?
A favicon is the small icon shown in browser tabs, bookmarks, and mobile home screens. Modern sites ship multiple sizes and formats for crisp rendering everywhere.
What size should my favicon source image be?
Start from a square image at least 512×512 pixels. SVG with a square viewBox works best for sharp downscaling.
Do I need both favicon.ico and PNG files?
Yes — ship a multi-size favicon.ico for universal fallback plus PNGs (180×180 and 192/512) for Apple, Android, and PWAs.
Where do I put favicon files on my website?
Place favicon.ico in your site root and add <link rel="icon"> tags in <head> for SVG and PNG variants.