favicon(ファビコン)の作成と設定

更新2023/02/04

ブラウザのタブに表示される小さいアイコンやブックマークやお気に入りの際に表示されるアイコンがfavicon(ファビコン)です。サイトのシンボルマークとも言えます。

別になくてもサイトは見れるので、公開するのに必須というわけではありません。
ただしいろいろなところで使われ、検索ではリピーターの人がアイコンを見てクリックしてくれることもあるそうです。
忘れがちになってしまうファビコンですが、サイトを認識させやすくブランディング効果もあるので忘れずに設定しておきたいものです。

そんなファビコンについて作成方法や注意点、htmlやwordpressでの設定方法などをまとめています。

ファビコンが使用される箇所

ファビコンが使用される箇所はこれだけあります。それぞれのところで、ちゃんとファビコンが表示されるか確認しましょう。

  • ブラウザのタブ
  • お気に入り・ブックマーク
  • スマホでのGoogleの検索結果
  • ホーム画面に追加
  • Windowsのスタートメニュー
  • Windowsタスクバーのピン留め
ブラウザタブに表示されるファビコン
スマホの検索結果画面

faviconが設定されていないと、これらのところにテキスト1文字だけ表示されたり、ブラウザのデフォルト画像などが自動的に設定されてしまいます。
アイコンがいまいちだとなんとなくホーム画面に置いておきたくなくなってしまうことも…スマホユーザー向けのサイトなら特に、ユーザー体験を考える上で必須とも言えます。

ファビコンを作成する前にチェック

ファビコン作成の注意事項を確認しておきましょう。

  • シンプルなデザイン、ファビコンをパッと見てどのサイトかわかりやすいものにする。(複雑なデザインにしても見づらくわかりづらい)
  • iOS、safariは角丸になるので、角丸でもデザインが変わらないものにする。
  • 形は正方形。
  • サイズは 48pxの倍数(48、96、144…)が良い。
  • favicon.ico と apple-touch-icon.png を作る。

Googleガイドラインも確認しておいてください。これができていないと検索結果画面に出てこない可能性があります。
検索結果に表示されるファビコンを定義する – Google Developers

iPhoneのApp Iconサイズが180pxなので、apple-touch-icon.pngはそのサイズが良いです。
App Icon – Icons and Images – iOS – Human Interface Guidelines – Apple Developer

対応させたいところのサイズを知って、ぼやけたりしないように作成することが大切です。最大サイズを一つ設定しておけば、他では自動的に縮小して表示してくれるので、いくつものサイズを作成する必要はありません。
うまく表示されない場合は、設定したサイズと別のサイズでも試していい感じのものを設定してください。

ファビコンの拡張子は「.ico」

.gif や .png も使えますが、.ico にしておけば設定の記述が少なくて済むので、特に問題がなければ .ico で作成しましょう。gifやpngの設定方法はこちら

ツールを使って簡単にファビコン作成

簡単にファビコン画像を作成できるツールをいくつか紹介します。

ファビコンに使える画像がある場合

私がよく使うのはこちら。

Favicon Generator for perfect icons on all browsers

先に画像を作ってfaviconファイルに変換するもの。どのように表示されるかチェックもできます。これひとつでファビコン作成は十分。

こちらは英語表記のみなので、日本語がいいなという場合は以下のツールもおすすめです。

Faviconジェネレーター

また念には念を!という方のために、豊富なサイズのファビコンや必要なファイルを一括生成してくれるこちらのジェネレーターがおすすめです。
HTMLのサンプルコードもあるので、コードが苦手な方でも設定しやすいと思います。

様々なファビコンを一括生成。favicon generator

faviconに使う画像がない場合

まずfaviconに設定する画像を作りましょう。もし使用している画像作成ツールがない方は簡単に作成できるツールがあるのでご紹介します。

favicon.cc

favicon.ico Generator

とても手軽に作れる生成ツールです。正方形の四角いマスが並べられていて、ピクセルアートのような感じで作成できます。サイズは16px × 16pxのみ。
とりあえず仮で、簡易的でもOKといった場合におすすめです。

Online Image Editor

Free Online Image Editor

こちらはもうちょっと自由度が高く普通にお絵かきができる感じ。簡易的だけど一通りのイラスト作成機能があります。

faviconを表示させるための設定

画像を作成したら、設置して表示させます。.ico を使用している場合のHTMLコードはこちら。

<link rel=”icon” href=“/favicon.ico”>
<!-- スマホ用アイコン -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

URLはfavicon画像のある場所。大体webサイトのファイルがある一番上の階層に設定します。難しい場合は任意の場所で。URLさえ間違えなければOKです。

ルートディレクトリにあればコードを書かなくても表示されます。(表示されなければコードを書く)

favicon.ico があれば、基本的に他の拡張子画像を用意する必要はありません。

IEの旧バージョンに対応する

IE11は他のブラウザと同様に簡単な記述でいいのですが、IE10・9・8以下は少し記述を追加する必要があります。

<!-- IE9 -->
<link rel=”icon” type=”/vnd.microsoft.icon” href=“/image/favicon.ico”>

<!-- IE10 -->
<link rel="icon" type="image/x-icon" href="image/icon.png">

<!-- IE8 以下 -->
<link rel=”shortcut icon” href=”/favicon.ico”>

IE10より前のブラウザははpngやgifが使用できないため、こちらもファビコン作成の際には注意しましょう。

shortcutの記述は基本必要なし

rel属性に shortcut が含まれていることがありますが、これはIE8に対応するための記述です。通常のサイトでも使われていることは多いですが、IE8対応でなければ必要ありません。MDN では「使用してはいけない」という記述があるくらいで、むしろ書かない方がいいようです。

icon より以前はリンク種別 shortcut がよく使用されていましたが、これは非準拠で無視されますのでウェブ作者は今後使用してはいけません

リンク種別 – HTML: HyperText Markup Language | MDN

サイトには不要(IE8への対応不要)なのに記述がある場合は削除しましょう。

.ico 以外の拡張子の場合はtype属性を追加

IE10・9にもtype属性が必要でしたが、pngやgifなどを使った場合もtype属性を追加します。拡張子が .ico であれば必要ありません。

<!-- .png -->
<link rel="icon" type="image/png" href="/favicon.png">

<!-- .gif -->
<link rel="icon" type="image/gif" href="/favicon.gif">

WordPressのファビコン設定

WordPressでは管理画面からfaviconの設定ができます。

管理画面の「外観」>「カスタマイズ」>「サイト基本情報」へと移動します。サイト基本情報の下にある「サイトアイコンを選択」というボタンをクリックするとメディアライブラリが開くので、ファビコン画像をアップロードして設定します。

設定する画面にも書かれていますが、ここから設定するサイトアイコンは「512px × 512px以上」が推奨となっています。

safariなどapple-touch-iconが必要なところでは表示されないので、必要であれば別途設定しなければなりません。とりあえずブラウザで表示されればいい、という場合はhtmlソースにコードを書かず、こちらの設定だけ簡単にできます。

faviconが表示されないときに確認したいこと

簡単に設定できるファビコンですが、思わぬところで表示されず悩んでしまうことも。もし表示されない場合は以下のような原因がないか確認してみてください。

ファビコンがある場所と画像パスが異なっていないか

まず見直したいのはファビコンの画像がある場所と設定したURL。これが異なっていると、画像が読み込まれないため表示されません。
どこにファビコンの画像があって、href属性にその画像パスが書かれているかチェックしましょう。

BASIC認証をかけていないか

サイトの閲覧制限をかけるBASIC認証ですが、これがあるとファビコンが表示されない場合があります。
BASIC認証解除して表示されるか確認してみてください。

キャッシュを削除する

画像変更後に反映されない、と言った場合はキャッシュが残っていることも考えられます。キャッシュを削除して表示されるか確認しましょう。

カテゴリー : HTML-CSS

タグ :

TOPへ