PNG のロゴから favicon.ico を作る方法
ファビコンは、ブラウザのタブやブックマーク、検索結果でサイト名の横に表示される小さなアイコンです。設定していないと、ブラウザは汎用的な白紙のページアイコンを表示するため、サイトが未完成のように見えてしまいます。
このガイドでは、PNG や JPG のロゴをきちんとした favicon.ico に変換し、どんなウェブサイトにも追加する方法を紹介します。
ファビコンに必要なサイズは？
ブラウザはファビコンをさまざまなサイズで表示します。タブでは16×16ピクセル、高解像度の画面や一部のブックマークでは32×32、Windows では48×48、ショートカットではさらに大きなサイズが使われます。
ICO ファイルには複数のサイズを1つのファイルにまとめて保存でき、ブラウザが最適なものを選びます。PixShift は、16・32・48・256ピクセルの各サイズを含む ICO ファイルを自動で作成します。
画像を用意する
- 正方形の画像を使いましょう。ロゴが正方形でない場合は中央に配置され、周りは透明な余白になります。
- 大きいサイズでもくっきり見えるよう、256×256ピクセル以上の画像から始めましょう。
- シンプルなデザインにしましょう。細かい文字や細い線は16ピクセルでは見えなくなるため、1文字やシンボル1つだけのほうがうまくいくことが多いです。
- ブラウザのタブが明るくても暗くてもなじむようにしたいなら、背景が透明な PNG を使いましょう。
PNG を ICO に変換する
- PixShift の PNG → ICO 変換ツールを開きます。
- ロゴをボックスにドロップします。ブラウザ内ですぐに ICO ファイルが作成されます。
- ファイルをダウンロードし、名前を favicon.ico に変更します。
ウェブサイトにファビコンを追加する
- favicon.ico をウェブサイトのルートフォルダにアップロードし、https://your-site.com/favicon.ico で開けるようにします。
- 各ページの <head> セクション内に、下に示した1行を追加します。
- サイトを再読み込みします。古いアイコンが表示されたままの場合は、ブラウザのキャッシュを削除するか、プライベートウィンドウでサイトを開いてください。ブラウザはファビコンを長期間キャッシュするためです。
<link rel="icon" href="/favicon.ico" sizes="any">最近のブラウザでも ICO は必要？
最新のブラウザは PNG や SVG のファビコンにも対応しています。それでも、サイトのルートに置いた favicon.ico がいちばん互換性の高い方法であることに変わりはありません。一部のツールやフィードリーダー、古いブラウザは、まさにそのファイルを探しに行くからです。多くのサイトでは、ICO と、SVG または PNG 版の両方を用意しています。