【WordPress】ファビコンとアップルタッチアイコンを実装してサイトの注目度を高める

Total 2,814 views
この記事の所要時間は約 9分です。

ネットビジネスで重要な項目の一つにサイトの注目度信用度があります。

だれもうさんくさいサイトから何かを購入するという気にはならないでしょう。

スポンサーリンク


もちろんそれらは、
サイトに書いてある内容やサイトデザイン、執筆者の人柄によるところが大きいですが、
ちょっとした見た目の変更だけでもだいぶ変わってきます。

たとえばファビコンの有り無し。

 

ファビコンというのは、下の画像を見てもらえばわかると思いますが、
ブラウザのタブ部分に表示される小さなアイコンのことです。

ブックマークの先頭にも表示されます。

キャプチャ画像

 

いかがでしょう。

上のブックマークのところをご覧になっても、
ファビコンがあるところとないところでは目立ち度がだいぶ違ってきませんか。

 

ファビコンの重要性

ファビコンってあまりに小さいし違和感なく溶け込んでいるので、
その重要性についてきちんと考えてる人は少ないと思います。

しかしよくよく考えれば、
ヘッダー画像と共にファビコンも"サイトの顔"と言えます。

それに文字だけの情報よりもファビコンが付いてた方が
サイトの区別がしやすいというのもあります。

 

さらにはファビコンがあることで、
サイトの存在が強調されてより印象に残りやすくもなります。

きちんとしたサイト、安心感のおけるサイトというイメージまで
抱いてもらいやすくもなります。

その結果、サイトの信頼度もアップし、
ひいてはクリック率も高くなる効果も期待できます。

 

アップルタッチアイコン(apple-touch-icon)も同様です。

ファビコンはパソコン上での表示機能ですが、
iPhone や iPad などの iOS 機器(Android でも表示可能)で、
ファビコンと同じようなモノを実装させるのがアップルタッチアイコンです。

iPhoneやiPad、Androidにアイコンを表示させるapple-touch-iconを設置してみたでも簡単にご説明してました。
今回は内容を簡潔化して加筆してます。

iPhone や iPad などでサイトを閲覧している最中、
気に入ったサイトがあれば
そのままホーム画面に登録した経験がきっとおありでしょう。

キャプチャ画像

 

その時サイトに何も手を付けていなければ、
単純にページの内容が縮小されただけのもや~としたアイコンにしかなりません。

これは実にもったいないです。

ここであなたのサイトをしっかり印象付けておけば、
その後も優先的にタップしてくれる可能性が高くなるでしょう。

スマホの普及率を考えたら、
アップルタッチアイコンは必ず作っておくべきです。

ということで今回は、
パソコン・タブレット・スマートフォンのどれで見ても
自サイトのオリジナルアイコンが表示されるよう、
貪欲(どんよく)にそしてできるだけ簡単に実装できるよう考えていきたいと思います。

 

ファビコン作成の前に

ファビコンとはもともと Internet Explorer 用に考えられたもので、
favicon.ico というファイルが必要です。

そのファイルの中に実際に表示させる画像が入っています。

画像は正方形です。

ファビコンを作るには、
ファビコンに変換するための画像を作る必要があります。

web上の画像加工サービスなら「x-icon editor」といったような無料サービスがあるので、
興味がある人はご利用になってみてください。

ただしどの web サービスも"慣れ"がかなり必要になるので、
思い通りのアイコンを短時間で作るのは
ちょっと難しいかもしれません^^;

一方、画像編集アプリを使えば、イメージに近いモノは仕上げやすいです。

新たにお金をかけたくない方は、
GIMP(無料) などを利用してみてはいかがでしょう。

各アプリの使い方等はヘルプなどをお調べください。

ファビコン作成に必要な画像

この画像作成で戸惑いました。

ファビコン

ファビコン用の画像を作成する際、
画像サイズ作成枚数が気になるところでしょう。

たとえばブラウザのタブに表示されるファビコンのサイズは 16×16(px) で、
デスクトップに表示されるショートカットファビコンは 32×32 というサイズが多いようです。

その他、24×24 や 48×48、96×96 といったサイズもあればなお便利です。

しかしあまり多くてもしょうがないので、ここでは比較的需要の多い

16×16(タブ・ブックマーク用)
32×32(デスクトップ用?)
48×48(その他?)

の 3種類のサイズのファビコンを作ることにします。

といっても上記 3つのファビコン用画像をそれぞれ別個に作るわけではありません。

1枚の大きな画像を作っておいて、
それを元に webサービスを利用して 3つのファビコンを自動で作り出します。

実際には 2枚の画像を作ることになるでしょう。

というのは、大きなサイズの画像を縮小した時 16×16 だけどうしても画像がつぶれて見にくくなってしまいます。

そのため 16×16 と他サイズ用の 2枚の画像が必要になってきます。
(もちろん画像を縮小した時に何の問題もなければ 1枚画像だけでも大丈夫です)

そして上記 3種類のサイズの画像をまとめて 1つのファビコン(favicon.ico)を作ります。

これであれば、ほぼどの状態でもファビコンが表示されるようになります。

アップルタッチアイコン

続いてアップルタッチアイコンですが、細かく言えば、

57×57(iPhone用)
72×72(iPad用)
114×114(Retina iPhone用)
144×144(Retina iPad用)

の 4種類のサイズが必要です。

画質にこだわるなら全部用意すべきでしょうが、
そこまでやっても自己満足でしかないので 1個の画像だけで済ませちゃいましょう。

どうせ自動縮小してくれますので。

 

画像サイズ

では、画像幅はいくつにして作ればいいのでしょう。

最終的には大きな 1枚画像を縮小してそれぞれのサイズの画像を作るわけですが、
画像を縮小すると少なからず"画像の荒れ"が生じます。

この"画像の荒れ"を最小限に抑えるためには、
できればそれぞれのサイズの偶数倍の大きさの画像を用意する必要があります。

つまり各サイズの最小公倍数の大きさで画像を作れれば、
どの画像も"荒れ"を最小限に抑えることができます。

ファビコンを例に挙げれば、16×16 が1枚。
そして 32×32 と 48×48 の最小公倍数である 96×96 というサイズが 1枚になります。

 

アップルタッチアイコンの方は、
57、72、114、144 と4つのサイズがあります。

これらも 1枚の画像から一緒に作る予定ですが、
これらのサイズとファビコンサイズの最小公倍数を出そうとしたら、
かなり大きなサイズの画像で作らなくてはなりません。

そのため今回の例に限っては 16×16 の画像以外には、
最大サイズである144×144 でファビコン用とアップルタッチアイコン用の 1枚画像を
作ることにします。

一応、48×48 と 72×72 は偶数倍になってますね。

この辺のサイズ決めに関しては特に決まったサイズというのはないので、それぞれやりやすいサイズで作っていただいて構いません。

ただし最大でも 256×256 以下の方がいいでしょう。
また画像にはあまり細かい装飾をかけない方がいいです。

縮小した時に全部潰れて逆に見にくくなってしまう場合がありますので。

ファビコン用画像の準備

下が当サイトで使っているファビコン用画像で、2枚用意してあります。

左が「favicon144.png」右が「favicon16.png」

キャプチャ画像

ファビコンだけなら JPEG でも PNG でも GIF でも問題ありません
ただしアップルタッチアイコンは PNG 画像だけなので、今回は PNG 形式で画像を書き出してあります。

また PNG 形式は背景を透過させる透過 PNG も作れますので、四角形にこだわらないファビコンを作ることもできます。
なお JPEG や透過 PNG 画像の違いについてはここでは割愛いたします。

また背景が透過するファビコンは一つ一つのサイズの画像を作成しなければならないことや、アップルタッチアイコンが透過 PNG に対応してないようなので、併せてここでの説明は割愛します。

ファビコン用画像への変換

画像が用意できたら「favicon.ico を作ろう」というサイトを開きます。

各ファイルをそれぞれ選択し「favicon.ico作成」をクリックします。

キャプチャ画像

 

すぐにサンプル画像が右に表示されますので、
問題なければ、ダウンロードをクリックして自分のパソコンに保存します。

キャプチャ画像

ダウンロードファイルは「favicon.ico」という名前で保存されます。

その中に、さきほどの 3つのサイズの画像が入っています。

favicon.ico は適当なところへ移動してサーバーにアップロードしておきましょう。

 

ワードプレスへの組み込み

続いてワードプレスへのファビコン設定手順をご説明します。

ファビコンやアップルタッチアイコンを手軽に実装できる「Favicon Rotator」といったプラグインもありますが、
できるだけプラグインは減らしたいので、直接書く方法を覚えておきましょう。

header.php を開きます。

<head></head>間に以下を書き込みます。

これは favicon.ico を、テーマフォルダ直下にアップロードした場合の書き方です。

もしも favicon.ico をテーマフォルダ内の「image」というフォルダの中に置いた場合は、以下のような書き方に変わります。

違いがわかりましたでしょうか。
/favicon.ico/image/favicon.ico に変わってますね。

『<head>と</head>間と言われても広すぎてどこに書いたらいいかわからない』という方は、とりあえず「<?php wp_head(); ?>」の前あたりに書いておけば大丈夫です。

これで設定は完了です。

 

ブラウザでサイトを開いてみましょう。(既に開いてある場合は F5 キーを押します)
ブラウザタブやブックマークに無事ファビコンが表示されてます。

キャプチャ画像

もしもうまく表示されないような時は、F5 キーを押してブラウザをリフレッシュ(更新)してみましょう。

それでもダメなら、ブラウザのキャッシュ等を一度全部クリアしてみてください。(履歴・クッキーのクリアなどです)

それでもダメな場合は、画像をアップロードした場所と書き方が一致してないなど設定に何らかのミスが発生している可能性があります。

続いてアップルタッチアイコンの設置です。

 

アップルタッチアイコンの組み込み

アップルタッチアイコン用の画像は、
既出の favicon144.png 画像をそのまま使います。

ただしファイル名を「apple-touch-icon.png」に変更しておきます。

そしてファビコンと同じ場所にアップロードしておきます。

ワードプレスへの設置方法はファビコンと基本は一緒です。

 

header.php を開きます。

さきほど記述したファビコン用構文の後ろに以下を書き足します。

下が実際に表示された時のアイコンです。

キャプチャ画像

設定構文の「rel="apple-touch-icon"」を「rel="apple-touch-icon-precomposed"」にすると上半分の光沢処理がなくなます。

もしもうまく表示されないような時は、ブラウザをリフレッシュ(更新)してみましょう。

それでもダメな時は、iPhone なら「設定」→「履歴」と「クッキーの削除」を、スマートフォンも同じように履歴とクッキーを削除してみましょう。

それでもダメな場合は、画像をアップロードした場所と書き方が一致してないなど設定に何らかのミスが発生している可能性があります。

以上です。

スポンサーリンク

ブログランキングに参加してます。よろしければポチッとな。

お気軽にフォロー↓してください。

ブログ更新情報はこちらからどうぞ。

follow us in feedly

2件のトラックバック

コメントを残す




日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)