ブックマークのアイコンって重要ですよ!WordPressで簡単に設定する方法

ブラウザでサイトを見ているときやお気に入り登録やブックマークしたときに小さなアイコンが表示されていますよね。このアイコンのことを“favicon”(favorite + icon)と言います。

このfavicon、想像以上しっかり活用されてます。例えば、大量のブックマークからアイコンを頼りにクリックしたり、ブラウザ上のたくさんのタブからアイコンを見て表示するページを変更したりしてます。ほとんど無意識のうちに認識しているので普段は気付きませんが、faviconがないとかなりストレス感じると思いますよ。

そう考えると、このfaviconを設定していないはブログを運営する上でかなり損ですよね。というわけで、僕も早速、faviconの設定を行いました!

スポンサーリンク
スポンサーリンク

WordPressでのfavicon設定方法

画像の準備

faviconを設定するために一番初めに行うのは、アイコンとして使用する画像の準備です。

PCの設定によってはかなり小さく表示されますから、それなりにシンプルなデザインでなければいけません。

なおかつ、一目見て「あのサイトだな!」と認識してもらう必要もありますからシンボリックであることも重要です。

象徴的なカラーで頭文字を描くのがトレンド

多くのサイトではサービス名やサイトタイトルの頭文字がドンッ!と描かれています。ですが、頭文字だと他のサイトと被ってくるので、色や字体、デザインで差別化を図っています。

例えば、Googleとギズモードは同じ「G」を使っています。Googleは白地にGoogleカラーの赤、黄、緑、青の4色を使った「G」。一方、ギズモードは黒地に白で「G」になっています。

僕のブックマークを眺めると、海外の木工機材・資材屋さんのGrizzly.comも緑のGです。海外の犬の写真と動画のまとめサイトのDogistoに至っては、ギズモードと同様に黒地に白で「G」になってしまってます。まぁ、読者層が違うので問題はないんでしょう・・・

というわけで当ブログは「じ」

じゃあ、うちは「じ」でいきましょう!筆っぽい字体なので白地に黒で!めっちゃシンプル(笑)

favicon

分かりやすいし、いいんじゃない?サイズはこの後使うプラグインの関係で260×260px以上がベストです!

ちなみにあんまり大きい声では言えないですけど、wordで打って画像出力しただけです。

HTMLとか、CSSとかよくわからないのでプラグインで!

丁寧な設定方法だと、HTMLのヘッダー部分に書き込みが必要らしいのですが、変にいじっておかしなことになっても仕方がありません。特に、PCブラウザやiOSなど表示される端末によって必要なコードが異なるので、似たようなコードをたくさん書き込まないとダメらしいです。

これはやめといた方がいいな・・・

というわけで、今回はWordPressのプラグインを使用した簡単な設定方法にしました。

Favicon by RealFaviconGenerator

使用するプラグインは“Favicon by RealFaviconGenerator”です。

Favicon by RealFaviconGeneratorをインストールすると、WordPressのダッシュボード左の外観に”favicon”という項目ができます。

これをクリックすると画像の選択画面が出てきますので、先ほど用意した画像を選択します。

すると、別サイトに接続され、各種設定画面が表示されます。PCブラウザ、iOS、Android、Windows8、それぞれで表示されたときの細かい設定が行えますが、特にいじる必要はないかな?Androidでの名前の表示設定だけしておけば問題ないです。

これだけで終了です。簡単です!

2015-09-23 2.18.40

「じ」も見やすいし、成功じゃないでしょうか。

まとめ

やっぱりfaviconを設定するだけでブログがワンランクアップした気持ちになりますね(笑)

WordPressでブログ書いているけど、設定がまだだという人は早速試してみてはいかがですか?wordやパワポでも十分いいものが作れると思うので、専門的な技術も要らないと思いますし。

スポンサーリンク
スポンサーリンク
スポンサーリンク
  • このエントリーをはてなブックマークに追加

コメントをどうぞ

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