2015/10/2422 Shares

Stingerシリーズのファビコンをオリジナル画像に変更する方法

buttons

無料国産テーマ「Stinger」には、専用のファビコンがあらかじめ同梱されています。そのため、一目で『あ、このブログはStinger使ってるんだ!』とわかります。

わかって困ることはないんですが、たとえば「はてなブックマーク」の新着一覧などに入るとStingerファビコンが表示されるので、他のブログと差別化しづらいということはありますね。

というわけで、オリジナルファビコンの作成と設定にチャレンジしてみましょう。カンタンにできます!

ファビコンとは

ファビコン favicon は「Favorite icon」を略したもの。ブログを含むWEBサイトのシンボルマークですね。

ブラウザではタブやブックマークの左側にこのファビコンが表示されます。

たとえば、Googleならこのように「g」マークが表示されるので、視覚的にGoogle関連のサイトだということがすぐわかります。

google-favicon

ちなみにStinger3のファビコンはこちら。

stinger-favicon

ちょっとわかりづらいですが、「STINGER」と書かれています。

ファビコン設置のためにプラグインは不要

WordPressで簡単にファビコンを設置できるプラグインはいくつかあります。

しかし、Stingerはプラグインを極力使わない仕様のテーマなので、ファビコンもプラグインを使わずに設置してみましょう。

あまりプラグインを入れすぎると、それだけで表示速度が重くなってしまいます。少しでも軽くしとかないとね。

ファビコン用アイコンの作り方

手っ取り早く16pxのファビコンを作る方法

まず、「.jpg」「.gif」「.png」のいずれかで正方形の画像を用意します。ブラウザで表示されるファビコンの大きさは四方が16pxですが、編集しづらいので64pxぐらいの大きさで。

透過させたい場合は PNG 形式で作り、16pxに縮小しておきます。

作成後、「.ico」形式に変換します。専用ツールを使えば、縮小から変換まで一気にやってくれます。いろいろありますが、今回はこちらを使わせてもらいました。

アイコン(icon)変換ツール – Favicon Converter

ダウンロードしたら、わかりやすい名前に変更しておきます。僕はメジャーなところで「favicon.ico」としました。

マルチアイコンにしたい場合

意外と知られていませんが、「.ico」は複数のファイルを格納することができます。たとえば、16px四方のアイコンと32px四方のアイコンを同じ「favicon.ico」とすることができます。

ブラウザの表示は16pxですが、デスクトップでは32px、エクスプローラでは48pxで表示されます。各サイズにぴったりの画像を用意しておけば、どこでも綺麗に表示されるというメリットがあります。

通常はブラウザでしか表示させないことが多いので、16pxのアイコンだけでかまいません。こだわるなら3サイズ用意しましょう。マルチアイコンもツールで簡単に作れます。

下記のサービスが一番キレイに仕上がりました。

無料で半透過マルチアイコンやファビコン(favicon.ico)作成

ファビコンを表示させる方法

ファビコンを管理画面からアップロードする場合

アイコンができたら管理画面の[メディア]からアップロードします。

アップロード後、「編集」をクリックして編集画面に移動しましょう。「ファイルのURL」を確認してテキストエディタなどに貼りつけおきます。

メディア編集画面

続いて、テーマ本体の「header.php」を少しいじります。

Stinger3のファビコン表示はこの部分。

これを下記のように変更します。

簡単ですね!

アイコンそのものを入れ替える場合

FTPソフトで、テーマファイルに直接アップロードすることもできます。

ファビコンは「image」ディレクトリ内に格納されているので、先ほど作成したアイコンの名前を「rogo.ico」として上書きします。

この場合、header.phpを編集する必要はありません。FTPに慣れているなら、こちらのほうが簡単です。

これからStingerを使うなら、テーマをアップロードする前にファビコンを入れ替えておくと楽ですよ。

ファビコンを変更したら、必ずリロード

変更後はブログを再表示して確認してみてください。

ファビコンはブラウザが記憶しているので、「F5」で更新するかキャッシュをクリアしないと反映されません。

また、一度ブックマークしたサイトのファビコンは自動的に更新されないので、ブックマークしなおしておきましょう。

まとめ

ファビコンを入れ替える作業は下記のとおりです。

  • 画像を用意してWEBサービスで「.ico」に変換
  • アップロードして該当する部分を書き換え

少しでも訪問者の記憶に残ってもらえるよう、オリジナリティあふれるファビコンを作ってみてください。簡単なところから始めていきましょう!

それでは、また。

この記事が気に入ったら
いいね!しよう

Twitter で