ファビコンの作り方
どこでも表示されるファビコンに必要なサイズ、形式、コード。
ファビコンは、ブラウザのタブやブックマーク、Googleのモバイル検索結果でサイト名の横に表示される小さなアイコンです。ファビコンがないとサイトが未完成に見え、ぼやけていればもっと悪い印象になります。よいものを作るのに数分しかかかりません。
適した素材から始める
ファビコンは16×16ピクセルという小ささで表示されるため、文字入りのロゴ全体では読めません。シンプルなマークを使いましょう。ロゴのシンボル部分、頭文字1字、ブランドカラーの力強い形などです。画面上で4分の1の大きさに縮めてみて、それでも何か分かれば大丈夫です。
512×512ピクセル以上の正方形の画像、できれば背景が透明なPNGから始めます。ロゴが正方形でなければ、比率を1:1に固定して切り抜いてください。
必要なファイル
| ファイル | サイズ | 使われる場所 |
|---|---|---|
| favicon.ico | 16、32、48ピクセルの版を含む | ブラウザ、古いシステム、/favicon.icoへの標準のリクエスト |
| PNGのアイコン | 32×32と192×192 | 最新のブラウザ、Androidのホーム画面 |
| apple-touch-icon.png | 180×180 | iPhoneやiPadのホーム画面のブックマーク |
Google検索も検索結果にファビコンを使います。48×48ピクセル以上の正方形で、サイト上でクロールできる必要があります。
ICOファイルを作る
正方形のPNGをPNGをICOに変換するツールに置きます。ブラウザが求める小さなサイズを含んだ本物の.icoファイルができます。PNG版は、同じ正方形の画像を180、192、32ピクセルにリサイズして作ります。
サイトに設置する
favicon.icoをサイトのルートにアップロードして、yoursite.com/favicon.icoで表示できるようにし、各ページのhead内に次の行を追加します。
<link rel="icon" href="/favicon.ico" sizes="any"> <link rel="icon" type="image/png" href="/icon-192.png" sizes="192x192"> <link rel="apple-touch-icon" href="/apple-touch-icon.png">
WordPressでは「外観」→「カスタマイズ」→「サイト基本情報」で正方形の画像をサイトアイコンとしてアップロードすれば、各サイズを自動で作ってくれます。Shopify、Wix、Squarespaceには、それぞれサイトかテーマの設定にファビコンの項目があります。
新しいファビコンが表示されないとき
ブラウザはファビコンをしつこくキャッシュします。シークレットウィンドウでサイトを開くか、yoursite.com/favicon.icoを直接開いて再読み込みしてください。Googleの検索結果に新しいアイコンが反映されるまでには、トップページが再クロールされてから数日から数週間かかることがあります。
よくある失敗
- 小さな文字入りのロゴ全体を使い、16ピクセルでにじんだ点になってしまう。
- 透明な背景に白いアイコンを置き、明るいタブで見えなくなる。
- 16ピクセルの小さなファイルしか用意せず、高解像度の画面でぼやけて見える。
- /favicon.icoのファイルを忘れる。ページの指定に関係なく、ここを要求するブラウザやクローラーがあります。