使い方
- 「文字から作る」か「画像から作る」を選びます。文字なら1〜2文字と色を、画像ならロゴなどの画像を選びます。
- 形（四角・角丸・丸）を選ぶと、実際の大きさのプレビューが出ます。
- 必要なファイルを保存し、サイトのいちばん上のフォルダ（トップページと同じ場所）に置きます。
- 「HTMLの <head> に貼るコード」をコピーして、各ページの <head> の中に貼ります。
作られるファイル
| favicon.ico | ブラウザのタブに出るアイコン。16・32・48pxの3つの大きさが1つのファイルに入っています。 |
|---|---|
| favicon-16x16.png favicon-32x32.png | PNG形式のファビコン。新しいブラウザはこちらを使います。 |
| apple-touch-icon.png | iPhoneで「ホーム画面に追加」したときのアイコン（180px）。 |
| android-chrome-192x192.png android-chrome-512x512.png | Androidのホーム画面や、アプリのように使えるサイト（PWA）用のアイコン。 |
最低限、favicon.ico と apple-touch-icon.png の2つを置いておけば、ほとんどの環境で表示されます。
見やすいファビコンにするコツ
- タブに出るのは16pxほどのとても小さい絵です。ロゴをそのまま縮めると何か分からなくなるので、頭文字1文字や、ロゴの一部だけにするのがおすすめです。
- 背景に色をつけると、ブラウザのタブが白でも黒（ダークモード）でも見やすくなります。
- プレビューの16pxの絵を見て、何のサイトか分かるかを確かめてください。
よくある質問
- ファビコンを置いたのに表示が変わりません。
- ブラウザが古いアイコンを覚えていることがあります。ページを再読み込みするか、しばらく時間をおいてから確かめてください。Googleの検索結果に出るアイコンは、反映までに数日〜数週間かかることがあります。
- WordPressではどうすればいいですか？
- WordPressは管理画面の「サイトアイコン」の設定から登録できます（多くのテーマでは「外観」→「カスタマイズ」→「サイト基本情報」にあります）。そこに android-chrome-512x512.png を選ぶと、各サイズが自動で作られます。
- 使った画像はどこかに送られますか？
- 送られません。ファビコンはお使いのブラウザの中で作っています。