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

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画像の作成を参照ください。

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

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

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

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

アイコンファイルの生成 

[rakuten]guruguru2:11031384[/rakuten]

プラグインの利用

Favicon Rotatorの利用

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

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

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対応”]

*本ページ内に記載されされた各社ブランド、サービス名、商標、登録商標については、
各社ブランドのロゴや商標等に関する帰属についてをご確認ください

最後までお読みいただきありがとうございました。

お勧めさせて頂きたい投稿です

• 【巧妙な仕組】Google+へAndroidの写真が勝手にアップロードされてしまう流れは設定ミスではない

• JetPackサイト統計データが消えた場合に復活する手順(してもらう)

• 【待望】WALLET ポイントがauID(au電話番号)間で相互にやりとりできるようになりました

• 禁断の機能がau公式解禁！WALLETポイントの現金化がついに開放。

• 何もしないと、auポイントが2014/05月分以降は携帯利用料から付与されなくなります

• au WALLET™カードはauを解約してもプリペイドとして使い続けられるが、有効期限には注意

• じぶん銀行が動いた！コンビニATM利用が無料・他行振込無料（回数制限なし）で使える

• 【旬】「白すぎる」と賛否両論？姫路城見るなら今秋がおすすめ！その理由は？｜castlehimeji.com

• Google+の投稿が勝手に自動でブログになっていくPluCialが便利



アイキャッチ画像に利用させて頂いております、各社ブランドのロゴやシンボルに関しては、
各社ブランドのロゴや商標等に関する帰属についてをご確認頂けますようお願い致します。

AdMax Promotion

ブログ記事のご紹介

すべて展開 | すべて省略

Rakuten Promotion

ページ

すべて展開 | すべて省略