fbrfg1

プラグインFavicon by RealFaviconGeneratorでマルチ対応ファビコン設置

2014/11/09[公開] 2015/12/20[最終更新]

 私が使っているWordPressデフォルトテーマ「Twenty Fourteen」にファビコンを設置しました。ファビコンだけじゃなく、色々なOSに対応したサイトアイコンも設定できるプラグイン「Favicon by RealFaviconGenerator」の紹介です。

 PCブラウザはもちろん、iOS、Androidで「ホーム画面に追加」したときのサイトアイコンも設定できます。さらにwindows8/8.1のスタート画面にピン留めしたときのタイル風アイコンも設定できます。

 コチラはwordpress.orgのプラグイン紹介ページです。

Favicon by RealFaviconGenerator

ファビコン用画像ファイルを用意する

 最低57×57pix以上、推奨260×260pix以上のファビコン用画像を用意します。ファビコン用としては大きすぎじゃない?と思うかもしれませんがサイトアイコンやwindowsタイルまで考慮すると推奨サイズを用意しましょう。

 今回はこんな画像を用意しました。

iktmemo
260×260pixで透過PNGファイルです。

インストールと有効化

 管理画面のプラグイン新規追加から「Favicon by RealFaviconGenerator」で検索してインストールして有効化。いつものインストール方法です。

 今回インスールしたバージョンは1.2.5でした。

ファビコンの設定

favicon1

 管理画面の設定の中に「Favicon」という項目が追加されているのでクリック

favicon2

「Appearance>Favicon」のリンクをクリック

favicon3

  1. 「Select from Media Library」をクリックして用意したファビコン用画像ファイルを選択します。
  2. 「Generate favicon」をクリック

 クリックしたら、realfavicongenerator.netというサイトが開きます。

favicon4

 iOSのホーム画面にアイコンを保存したときの設定ができます。iOSの場合は背景を設定したほうが他のアイコンとのバランスがいい気がするので背景を設定しました。スライダーでfavicon部分の大きさを調整できました。

favicon5

 windows8のタイルの設定ができます。私はタイルの背景色をDark Blueにして、ファビコン部分を白抜きにしました。windowsのタイルっぽい設定になりました。

favicon6

 詳細オプションの項目は設定せずに「Generate your Favicons and HTML code」をクリック

favicon7

 設定はこれで完了です。

 「Check your favicon」で各端末の設定状況が確認できます。

favicon8

 PC、Android、iOS、Windowsタイルすべて設定OKのようです。ここで未設定警告が出る場合、キャッシュ関係の更新状態を確認したほうがいいでしょう。

動作確認

 私の手持ちの端末で、いろいろ確認してみました。

PCのブラウザ

favicon9

 アドレスバー、タブ、お気に入りにファビコンが表示されています。

iOS

DSC_0046 (640x360)

 私のは古いiOSですが、ホーム画面に保存したアイコンが出ています。

Android

Screenshot_2014-11-10-01-48-34 (360x640)

 Androidはブラウザの種類によって違います。上からChrome、標準ブラウザ、Firefoxです。

windows8

win8favi

 windowsアプリ版IEから「スタート画面にピン留めする」を選び追加すると、設定した通りのパネルが出ています。

Windows10プレビュー版

win10start

 左がアプリとして登録したIEのお気に入り、右がデスクトップ版のお気に入りをピン留めしたもの。白抜きに設定したはずですが、なっていませんね。プラグインのバージョンアップに期待です。

感想

 ホーム画面にアイコンとして保存して使うのなんて、サイトオーナー自身しかやらないんじゃないですかって感じですが、iPhoneユーザーの多い日本では、自分のサイトのアイコンがかっこよく登録できるってだけでうれしいですね。

2015/12/20追記: WordPress4.3以降の標準機能でサイトアイコンが設定できるようになりました。私は現在そちらでサイトアイコンを設定しています。だたし、このプラグインの方が詳細設定機能は優れていると思います。

サイトアイコン(favicon)をWordPress標準機能で設定する

こちらの記事もどうぞ

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です