ファビコンとは？
ファビコン(favicon)とはFavorite icon(フェイバリット・アイコン）の略で、ウェブサイトのブラウザに表示されるURLの左横に付いているアイコンのことです。
主にサイトのロゴやシンボルマークが使用されています。
ファビコンを設定すると、ウェブサイトをお気に入りに追加した場合や、ウェブサイトを複数開いている場合にタブブラウザで表示されるなど多くの場でサイトの目印として見つけてもらいやすくなるというメリットがあります。
また、ファビコンを設定することにより、サイトとしての信頼度・完成度が上がりアクセスの向上に貢献する重要な要素になります。
ファイルの種類
最近は、gifやpngでも表示されるブラウザが多くなりましたが、InternetExplorerではico形式にのみ対応しているため、ico形式での作成が一般的です。
アイコンには「シングルアイコン（単一アイコン）」と「マルチアイコン（複数アイコンを格納)」の2種類で拡張子はicoです。
マルチアイコンは、サイズ別の複数のアイコンを一つのファイルにまとめて、環境に合わせて適切なサイズを表示することができます。
ファビコン(favicon)のサイズについて
表示される場所やデバイスによって表示されるサイズが違います。
最近は、スマートフォンの登場やデバイスの多様化によってファビコンのサイズも多種多様です。
主要なサイズの「16×16」「32×32」には最低限対応させておきましょう。
| サイズ 単位(px) | 表示場所 |
|---|---|
| 16×16 | ブラウザのアドレス欄・ブックマーク |
| 24×24 | IE9のピン留め機能 |
| 32×32 | IEの新しいタブ・多くのブラウザのタブやブックマーク |
| 48×48 | Windowsのサイトアイコン |
| 64×64 | 高解像度デバイスのWindowsサイトアイコン |
他にも、 57×57、64×64、72×72、96×96、114×114、128×128、195×195、258×258を使用するOSもありますが、 大きなサイズのアイコンを同梱すると容量が大きくなるので注意が必要です。
今回は、最低限用意したいサイズの「16×16」「32×32」に「48×48」「64×64」を加えた４種類のマルチアイコンを作成したいと思います！
ファビコン作成のながれ
１.ファビコンに設定する画像を作成する
画像編集ソフトでファビコン用の画像を作成します。
通常表示されるファビコンはとても小さいのではっきりとしたシンプルなデザインをおすすめします。
いろんな方法がありますが、今回は使い慣れているIllustratorのソフトを使用してファビコンの画像を作りました。
photoshopや他のフリーソフトなど自分が使いやすいソフトで作ってOKです。
＜Illustratorイラストレーター編＞
◆サイズ：正方形であればサイズは問いませんが、今回は使用するサイズの中で一番大きいサイズの64pxで作りました。
◆ファイル形式：背景透過のPNG（おすすめ)・またはGIF形式
◆ポイント：［表示］⇒［ピクセルプレビュー］にチェックを入れたまま作成すると仕上がりを確認しながら作れるので便利です。（下記）
右側がピクセルプレビューで確認しながら作成したもの。サイズが小さいだけに見づらいですが、左の画像よりは綺麗です。
※サイズを変える場合は、画像サイズの変更後のサイズ ー幅・高さに数値を入れ適用する
対応させるサイズ分のPNGファイルで書き出すとこんな感じになります。
２. ico形式で保存する
ico形式でマルチアイコンとして書き出したいと思います。
アイコンの作成、画像からアイコンへ変換・ico形式で保存できる便利なフリーソフトがありますのでまずダウンロードします。
＜＠iconソフト手順＞
ソフトを開いて、作成したファビコンPNG画像をドラッグします。
ファビコン全サイズを選択して、（ ［リスト］⇒［すべて選択］で選んでもOK）［ファイル］⇒［マルチiconとして保存］をクリック！
ファイル名は ［favicon.ico］で保存します。
favicon.ico を開くとこんな感じで４つ入っているのが確認できます。
これで、マルチアイコンが作成できました！とても簡単ですね!(^^)!
３. 作成した favicon.ico をサーバーにアップロードする
favicon.ico をサーバーのルートディレクトリ（一番上の階層）にアップロードします。
通常は、サーバーのトップページ”index.html”ファイルのあるルートディレクトリに設置すると認識されます。
ルートディレクトリに設置できない場合や、ディレクトリごとに違うファビコンを表示させたい場合は、<head></head>内に以下のコードを追加します。
※href=以降は適宜パスを記述してください。
ルートディレクトリにアップロードしただけでhead内に記述しなくてもIEで表示出来ましたが、ブラウザにより異なる場合がありますので、念のため記述しておくといいです。
ワードプレスでファビコンを設置する
ワードプレスでのファビコンの設置方法は２種類あります。
ファビコンをアップロード後head内にコードを追加する方法と、ファビコンのプラグインを使用する方法です。
方法１．head内にコードを追加する方法
FTPを使って favicon.ico をサーバーの”wp-admin”や”wp-contents”フォルダがある場所にアップロードします。
管理画面 ー［外観］⇒［テーマ編集］⇒［ヘッダーheader.php］をクリックする。header.php の<head></head>内に以下のソースを追加します。＜/head＞の直前でOK。
追加したら、［ファイルを更新］をクリックして完了です！
方法２．ファビコンのプラグインを使用して設定する方法
管理画面 ー［プラグイン］の［新規追加］をクリックして、キーワード検索に「Shockingly Simple Favicon」と入力して検索してインストールする。
［プラグイン］の［インストール済みプラグイン］をクリックし、「Shockingly Simple Favicon」を有効化し、下記のように設定項目に［S.Simple Favicon］が表示されていればOKです。
まずfavicon.ico のファイルを［メディア］⇒［新規追加］にアップロードして画像のURLをコピーします。
管理画面の［設定］⇒［S.Simple Favicon］をクリックすると下記のような画面になります。
先ほどコピーしたパスをFavicon URLのところに入れます。
Admin faviconを［Blog］に変更して、［Save Changes］をクリックで完了です！
ブラウザで確認してみましょう。
アドレスバー・ブックマーク・新しいタブ・デスクトップへショートカットした場合でそれぞれ表示されました♪
ファビコンが表示されるまで時間がかかる場合があります。
今回は、ファビコンの変更で新しいファビコンがなかなか表示されませんでしたが、ブラウザを閉じたり更新を何回もしたりしているうちに変更できていました。
コメントを残す