wordpressサイトにブックマークアイコン(Favicon／ファビコン)を追加する

2013/06/27 2014/11/22

WordPressを利用したサイトは多くありますが、
大抵のサイトではブラウザのタブなどに対して、
オリジナルのアイコンが表示されていると思います。
そのアイコンは通称Favicon(ファビコン)と呼ばれ、
サイトをお気に入りに追加した際にも表示されます。

私個人的にはGoogleChromeを多用しているため、
多くのタブを開いてもパッと見でどのタブかが、
わかりやすいというメリットを感じています。

タブのみ表示

私はこれまでサボって表示していませんでしたが、
簡単にプラグインにて表示が可能ですので設定を行いました。

はじめに

いつもお読みいただきありがとうございます。
皆さんはwordpressサイトのカスタマイズをどのようにされていますか。

今回もブックマークアイコン(Favicon／ファビコン)を
サイトに設定しようと思った際にソース改変なしに、
ちょうどいいプラグインはないかなと探すわけですが、
さすがwordpressといった感じに簡単にプラグインが見つかります。

他の無料ブログサービスではハック的に導入していたり、
結構大変な場合があるのですが独自運営が結局は効率的だなと感じるところですね。

アイコン素材の準備

通常、ブラウザに表示されるファビコンは後述するプラグインに対して、
GIFやPNGファイルを指定すれば表示されるようになりますが、
おそらく多くの人が利用されているInternet Explorerにおいては、
単なる画像ファイルを指定しても表示されません。

Internet Explorerに関しては正しく(？)アイコンファイルを利用して、
ブックマークアイコンを指定する必要があります。

アップロード画像の準備

アイコン化を行う前にアップロードを行う画像ファイルの準備を行います。
用意する画像は以下の３種類を用意します。
ファイル形式はPNG , GIF , JPG(JPEG)を利用します。

小画像(16×16)
中画像(32×32)
大画像(48×48)

16px

32px

48px

今回利用するプラグインFavicon Rotatorでは、
その他に iPhoneなどのスマホ用の
ホームアイコン用アイコンの設定も行えますので、
別途72pxサイズの画像も用意しておいた方が便利です。

作成の説明については、以下のIllustratorによるFavicon画像の作成を参照ください。

１つのアートボードを使ったIllustratorによるFavicon画像の作成

アイコン(.ico)ファイル作成

画像からアイコンファイルの作成に関しては、
変換サイトを作ってくれている方がおられるのでそちらのお力をお借りします。
ファビコン作成。favicon.ico 無料で透過マルチアイコンが作れます。
サイトに対してアイコンファイルをアップロードします。

アイコン画像のアップロード

アップロード後に[ダウンロード]ボタンを押下し、
作成されたアイコンファイルを保存します。

アイコンファイルの生成

[rakuten]guruguru2:11031384[/rakuten]

プラグインの利用

Favicon Rotatorの利用

今回はFavicon Rotatorというプラグインを利用します。
単純に作成したアイコンを設定して表示するという簡単なプラグインですが、
わざわざHTMLを直接編集するなどの必要がなく、
手軽に設定できるメリットがあります。

Favicon Rotatorプラグインの導入は、
プラグインの検索からのインストールと有効化で導入が可能です。

wordpressプラグインの検索から有効化

Favicon Rotatorのインストール

Favicon Rotatorメニューの表示

Favicon Rotatorを有効化すると、
[外観]メニューに対して[Favicon]メニューが追加されます。

Favicon Rotatorメニュー

Favicon Rotatorの設定

[Favicon]メニューをクリックし設定画面を開くと、
ブックマークアイコン(Favicon／ファビコン)の設定を行うBrowser Iconと
スマホのホーム画面に表示する際のTouch Iconの設定が表示されます。

ファビコンの追加

Browser Iconの指定

Browser Iconの[Add Icon]ボタンをクリックすることで、
表示したい画像の選択を行います。
先ほど作成したアイコンファイルを指定してアップロードします。

表示したいアイコンをドラックアンドドロップにてアップロードし、
[Add Blowser Icon]ボタンを押して登録します。

ファビコンアイコンの追加

登録が完了すると設定画面に設定したアイコンが表示されます。

追加アイコンの表示

ブラウザからの表示の確認

各社ブラウザからの表示を確認します。

icoファイルのブラウザ表示

単なる16px画像ファイルを割り当てた場合には、
以下のようにInternetExploreのみ表示されません。

gif画像ファイルのブラウザ表示

次に、スマートフォン向けのホーム用アイコンの設定を行います。

[rakuten]book:16373495[/rakuten]

スマートフォン向けアイコンの設定

Touch Iconの指定

Touch Iconの[Add Icon]ボタンをクリックすることで、
表示したい画像の選択を行います。

タッチアイコンの追加

今回利用したアイコンファイルは以下のようなものです。

72px

スマートフォンからの表示の確認

スマートフォンのホーム画面に設定し表示を確認します。

iPhone

iPhoneの表示確認

Android

Androidの表示確認

Web上で探せばいくらでも出てくるような内容ではありますが、
直接HTMLを触って設定するのではなく、
簡単にプラグインを利用して指定しておくことによって、
以後のメンテナンスが容易な形でファビコンの設置が可能です。

[amazonjs asin=”4798034711″ locale=”JP” title=”オープンソースブログ&ウェブサイト構築ソフト WordPressガイドブック Ver.3.X対応”]

- SmartPhone, WordPress, プラグイン favicon, Favicon Rotator, plugin, WordPress, お気に入りアイコン, タブアイコン, ファビコン, ブックマークアイコン, プラグイン, ワードプレス

Comment

Word Press でやったこと | FromYangon より:

2013/12/24 10:15 AM

[…] wordpressサイトにブックマークアイコン(Favicon／ファビコン)を追加する […]
[簡単にアイコン追加]スマフォのホーム画面で癒されてみませんか？より:

2014/09/21 6:56 PM

[…] こいつで癒されますよね！？ぜひ簡単なんでやってくだされ！！ちなみにiPhoneでの方法です。アンドロイドの方はこのサイトを参考にしてみてね→wordpressサイトにブックマークアイコン(Favicon／ファビコン)を追加する […]
Favicon Rotator | おやじのアニメ備忘録より:

2014/11/05 5:33 AM

[…] トを参考にさせていただきました。　wordpressサイトにブックマークアイコン(Favicon／ファビコン)を追加する […]