はぴすぷ

ファビコンを設定する。←非常に重要。WordPressにも対応。

      2015/09/22

前回記事:WordPressに新しいテーマ(STINGER5)を適用させる

でWordPressのテーマを変更したのはいいんですが、テーマにファビコンも設定されていました。

SS_0289

ファビコンの設定は後回しにするつもりだったのに、ちょっと意味が分からなすぎるので最優先で対応してるところです(;´∀`)

2015/08/03 追記:
ファビコンだけじゃなく、スマホ用のWebクリップアイコンも同時に設定することをオススメします。こっちも、もれなくSTINGER5のものになってましたw
関連:スマホ用のWebクリップアイコンapple-touch-icon.png(ファビコンのようなもの)を設置する

スポンサーリンク

ファビコンの一般的な設定方法

ファビコンを設定するには、headタグの中に以下を追記したらOKです。
※赤文字は自分のサイトのドメインに変更してくださいね。

<link rel="shortcut icon" href="http://example.com/favicon.ico" type="image/vnd.microsoft.icon" />

一応、typeは拡張子が.icoのファイルを使う限りはなくても問題なさそうです。

実はこの.icoという拡張子のファイルですが、IE(InternetExplorer)の11未満を、サポートしないのであれば.png.gifでも大丈夫だそうです。

その代わり、.png.gifを使う場合はtypeはそれぞれ、
image/pngimage/gifにしましょう。

ちなみにfavicon.icoというファイル名と、そのファイルを配置する場所ですが、現在は特に制限はないそうで、ルートに置く必要もなく、好きな名前でいいそうです。

WordPressのテーマSTINGER5での設定方法

特にテーマによって変わるものでもないと思いますが、他のテーマで確認していないので、一応テーマ指定しておきます。

管理画面から、以下を選択。
外観>テーマの編集>テンプレート「ヘッダー(header.php)」

SS_0300その中のheadタグの中に、前述のlinkタグがあれば記述が合っているか確認します。
なければ、画像をどこかに配置して、前述のlinkタグを追記して下さい。

STINGER5の場合は、以下のようになっています。

<link rel=”shortcut icon” href=”<?php echo get_template_directory_uri(); ?>/images/logo.ico” />

テーマのディレクトリにある、images/logo.icoが使用されているわけです。

場所を変えてもいいのですが、今使われているlogo.icoを自分で用意したものに置き換えた方が楽なので、私は置き換える方法を取りました。

これでオリジナルのファビコンが表示されるようになります。

少しの間はキャッシュが効いていて、前のものが表示されたままになるかもしれませんが、何度か更新を繰り返せば切り替わると思います。

SS_0301

ファビコンの重要性

ファビコンのないサイトは、ブックマークバーにアイコンだけ置くという方法が取りづらくなります。

ブックマークバーに文字を残した状態で置いておくと、場所を取るため数がおけません。

なので邪魔になるからと、すぐに目のつかない、何かしらのフォルダに格納されてしまう可能性が高くなります。

そうなると、アクセスの頻度が落ちてしまう危険性があります。

また、タブが大量になった時に他との区別が付きません。

SS_0302

そうなった時に、パッと見て分からないタブは、閉じられる対象になりやすいでしょう。

確認する為に開いて、素晴らしい内容のサイトでなければ、ファビコンに関係なくそのまま閉じられます。

ちょっと気になるからブックマークしようかなと、迷うような場合に、「でもファビコンも設定出来ない人だしな…。」とマイナスに働く可能性もあります。

ファビコンくらい設定できるけど良いアイコンが思いつかないからと、放置してしまう気持ちは分かります。

それでも、サイトの頭文字だけの画像でもいいと思うので、ファビコンを設定することをお勧めいたします。

関連記事:
GIMPにフォントを追加して、ファビコン(.ico)を作成する
スマホ用のWebクリップアイコンapple-touch-icon.png(ファビコンのようなもの)を設置する

 - STINGER, Webサイト構築, WordPress