こんにちは！コーダーのゆうしです。
ブラウザのタブやブックマークに表示される小さなアイコン、ファビコン。サイト制作でほぼ必ず必要になる設定ですが、ファイル形式やサイズ・設置方法など意外と細かいところで詰まることがあります。この記事ではファビコンの基本的な設置方法から画像の作り方、アップルタッチアイコンの設定まで解説します。
ファビコンとは？
ファビコン（favicon）はブラウザのタブ・アドレスバー・ブックマーク一覧などに表示される小さなアイコンです。サイトの顔になる部分なので、しっかり設定しておくとサイトの信頼感が上がります。
ファビコン画像を用意する
推奨サイズとファイル形式
| ファイル形式 | 推奨サイズ | 用途 |
|---|---|---|
| .ico | 16×16 / 32×32px | 標準的なファビコン |
| .png | 32×32px | モダンブラウザ向け |
| .svg | – | SVGファビコン（対応ブラウザ限定） |
最も互換性が高いのは .ico 形式です。古いブラウザも含めて対応したい場合は .ico を使うのが安全です。
ファビコン画像の作り方
以下のサービスを使うと画像から簡単にファビコン用のファイルに変換できます。
① ファビコン favicon.ico を作ろう！ https://ao-system.net/favicon/ PNGやJPG画像をアップロードするだけで .ico ファイルに変換できます。無料で使えてシンプルで使いやすいです。
② favicon.io https://favicon.io/ テキスト・絵文字・画像からファビコンを生成できます。英数字のテキストからファビコンを作りたいときに便利です。
ファビコンを設置する
基本の設置コード
<head> タグ内に以下のコードを追加します。
<link rel="shortcut icon" href="img/favicon.ico">href のパスはファビコンファイルの実際の場所に合わせて変更してください。
PNGファイルを使う場合
<link rel="icon" type="image/png" href="img/favicon.png">.png ファイルを使う場合は type="image/png" を指定してください。
複数サイズを指定する場合
異なるサイズのファビコンを用意している場合は sizes 属性で指定できます。
<link rel="icon" type="image/png" sizes="32x32" href="img/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="img/favicon-16x16.png">アップルタッチアイコンも設定する
スマートフォンのホーム画面にサイトを追加したときに表示されるアイコンが アップルタッチアイコン です。iPhoneやiPadでは apple-touch-icon が参照されます。
<link rel="apple-touch-icon" href="img/apple-touch-icon.png">推奨サイズは 180×180px の PNG ファイルです。設定しておくとホーム画面追加時にきれいなアイコンが表示されるので、念のため入れておくのがおすすめです。
WordPressの場合
WordPressでファビコンを設定する場合は管理画面から設定できます。
管理画面の「外観」→「カスタマイズ」→「サイト基本情報」→「サイトアイコン」から画像をアップロードするだけでOKです。コードを書かずに設定できるのでWordPressの場合はこの方法が手軽です。
まとめ
ファビコンはサイト制作でほぼ必須の設定です。基本の .ico ファイルの設置とアップルタッチアイコンをセットで設定しておけば、ほとんどの環境で対応できます。ファビコン生成サービスを使えば手軽に画像を作れるので、サイト公開前に忘れずに設定しておきましょう。
ご不明な点やコーディングのご依頼はお問い合わせからお気軽にどうぞ。
