頑張らない!でも諦めない!必死にならずにええかげん

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

      2014/11/22

Google or AdMax Promotion(cel)

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

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

13_タブのみ表示

タブのみ表示

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

はじめに

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

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

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

アイコン素材の準備

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

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

アップロード画像の準備

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

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

favicon-c16x16

16px

favicon-c32x32

32px

favicon-c48x48

48px

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

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

 

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

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

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

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

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

02_アイコンファイルの生成

アイコンファイルの生成 

[rakuten]guruguru2:11031384[/rakuten]

プラグインの利用

Favicon Rotatorの利用

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

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

 

03_Favicon Rotatorのインストール

Favicon Rotatorのインストール

Favicon Rotatorメニューの表示

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

04_Favicon Rotatorメニュー

Favicon Rotatorメニュー

Favicon Rotatorの設定

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

05_ファビコンの追加

ファビコンの追加

Browser Iconの指定

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

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

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

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

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

07_追加アイコンの表示

追加アイコンの表示

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

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

08_icoファイルのブラウザ表示

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

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

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

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

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

[rakuten]book:16373495[/rakuten]

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

Touch Iconの指定

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

10_タッチアイコンの追加

タッチアイコンの追加

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

favicon-c72x72

72px

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

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

iPhone

11_iPhoneの表示確認

iPhoneの表示確認

Android

12_Androidの表示確認

Androidの表示確認

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

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

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


最後までお読みいただきありがとうございました。
アルゴリズン


役に立ったと思っていただけたら、以下からシェア頂けたら幸いです^^

QRコードからもこのURLを開けます。

Pitta Promotion

アイキャッチ画像に利用させて頂いております、各社ブランドのロゴやシンボルに関しては、
各社ブランドのロゴや商標等に関する帰属についてをご確認頂けますようお願い致します。
ロゴの使用等に関する苦情・ご意見等がございましたら管理者までご連絡ください。

AdMax Promotion

カテゴリ
すべて展開 | すべて省略

Rakuten Promotion

プロモーション(btm)

Google or AdMax Promotion (cel)

 - SmartPhone, WordPress, プラグイン , , , , , , , , ,

Comment

  1. […] wordpressサイトにブックマークアイコン(Favicon/ファビコン)を追加する […]

  2. […] こいつで癒されますよね!? ぜひ簡単なんでやってくだされ!!ちなみにiPhoneでの方法です。 アンドロイドの方はこのサイトを参考にしてみてね→wordpressサイトにブックマークアイコン(Favicon/ファビコン)を追加する […]

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

  関連記事