faviconはサイトを作成すると必ず必要になる16px、
32px、64pxの画像です。
favicon(ファビコン)はサイトの象徴となる1文字か、
マークを使います。
YahooならY!、Facebookならf、Googleならgを使っています。
これまではサイトにfaviconの画像ファイルをアップロード
して、1行HTMLのコードを書いて使うのが一般的でした。
ワードプレスも例外ではなく、同じようにドメイン直下に
favicon画像ファイルをアップロードして使っていました。
それが、Jetpackのサイトアイコンは512pixel x 512pixel
以上の画像ファイルを用意すれば誰でも簡単に使えます。
やり方はとっても簡単ですぐにできます。
それとモバイルアイコンに対応しています。
モバイルアイコンは後ほど画像で確認してくださいね。
※Jetpackプラグインがインストールされていることを
前提に書いています。
Contents
Jetpack サイトアイコンの設定
簡単な設定をすすめていきましょう。
Jetpck > 設定 > サイトアイコンで有効にします。
有効後に設定に進みます。
![siteicon1](https://i0.wp.com/retina-plus.com/wp-content/uploads/2015/03/siteicon1.png?resize=535%2C297)
サイトアイコンを有効にすることで設定の一般の下部に
サイトアイコンが追加されています。
一般設定に切り替わりますので、設定に進みます。
![siteicon2](https://i0.wp.com/retina-plus.com/wp-content/uploads/2015/03/siteicon2.png?resize=530%2C380)
サイトアイコンにつかうファイルを選択し画像をアップ
ロードします。
![siteicon3](https://i0.wp.com/retina-plus.com/wp-content/uploads/2015/03/siteicon3.png?resize=533%2C289)
画像の切り抜き範囲を設定します。
プレビュー画面でfaviconとモバイルアイコンのプレビューが
見えます。
![siteicon4](https://i0.wp.com/retina-plus.com/wp-content/uploads/2015/03/siteicon4.png?resize=523%2C332)
サイトアイコンがアップロードされて反映されました。
設定は完了です。
お疲れ様でした。
![siteicon5](https://i0.wp.com/retina-plus.com/wp-content/uploads/2015/03/siteicon5.png?resize=222%2C152)
faviconの確認とモバイルアイコンの確認
反映も早いのがJetpackサイトアイコンの特徴です。
サンプルはFirefoxですが、設置後すぐに反映してました。
ブラウザにより諸事情がある様ですが、半日のうちに
反映してました。
![siteicon6](https://i0.wp.com/retina-plus.com/wp-content/uploads/2015/03/siteicon6.png?resize=165%2C50)
今回の一番の特徴がモバイルアイコン
どんなのか見た方が早いです。
iPhoneのsafariのブックマーク追加の表示。
![siteicon7](https://i0.wp.com/retina-plus.com/wp-content/uploads/2015/03/siteicon7.png?resize=320%2C568)
iPhoneのsafariで新規ページを開くとサイトアイコンが
反映しています。
コンパス表示は設定していないサイトです。
FC2は無料ブログに反映させていますね。
![siteicon8](https://i0.wp.com/retina-plus.com/wp-content/uploads/2015/03/siteicon8.png?resize=320%2C568)
Jetpackサイトアイコンのまとめ
favicon(ファビコン)のモバイル対応を考えている方なら
今すぐに設定しましょう。
スマホ・タブレット対応のサイトを運営されているなら
すぐに導入を。
スマホとタブレットでブックマークしてもらうとその後も
ずっとあなたのサイトをPRしてくれます。
他のサイトと違う【良いサイト】にうつるに違いありません。