ファビコンって！？

みなさんこんにちはミュンヘンのWeb担当mak utsunomiya(@munchen_stil)です！ファビコンはfavorite iconの略で、ウインドウのタブやお気に入りの先頭に表示されるアイコンです。

↓こんなのです。

ブックマークがたくさんあるとどうしても他のサイトの中で埋もれてしまいがちになるんですが、ファビコンを設定しておくとパッと目立つようになります。

タブの所もちょっとかっこいいですしね^^

難しそうなイメージもありますが、意外と簡単にできるので是非設定してみて下さい。

プラグインを使う理由

プラグインを使わなくても設定する方法がありますが、今回は「スマホ用のホームアイコン」を同時に設定したいためプラグインを使う事にしました。

 

設定手順

1. スマホ用のホーム画像を作る(72×72px、jpg、png、gif)
2. 1を元にファビコンを作る(16×16px、ico)
3. プラグイン「Favicon Rotator」で画像をアップロードする。

 

スマホ用ボタンを作ります。

72×72pxの画像を作成します。形式はjpg、png、gifからお好みで作成して下さい。ペイントなどの画像編集ソフトなど簡単なものでも作成が可能ですし、ロゴを作成されている方はそれを元に作成した方がブランド価値は上がるかもしれませんね。

簡単かつサイトのイメージがわかりやすいものにした方がいいと思います。

当サイトはこんな感じで作ってみました。

 

ico形式アイコンを作ります。

スマホ用のアイコンが完成したら、それをオンラインサービスでico形式に変換します。サイズはは16×16pxでOKです。かなり小さいので、文字はキレイ見えない可能性があります。

私はスマホホームボタンと同じデザインにしたかったのですが、上手く表示されなかったので、ロゴの頭文字だけをトリミングして作成しました。

ico形式に変換出来るサイト。 ：　favicon.icoを作ろう！

 

favicon.icoを作ろう！の使い方

パソコンローカル環境からico形式にする画像を選択して下さい。サイズは16×16です。favicon.ico作成ボタンでファビコンが出来上がります。

 

画面下にプレビューが表示されます。

 

完成したらダウンロードボタンでパソコンに保存して下さい。

 

プラグイン「Favicon Rotator」

導入方法

• プラグイン新規追加
• 「Favicon Rotator」で検索　インストール
• 有効化
• 管理画面＞外観＞Favicon設定

設定方法

Browser Iconでファビコンを設定します。Touch Iconでスマホのホーム登録ボタンを設定します。それぞれAdd IconとSet Iconボタンでアップロードもしくはメディアファイルより画像意を取り込んでください。

 

画像を取り込んだらSet Touch iconボタンをクリックするのをお忘れなく！

 

画像設定が完了したら、変更を保存ボタンをクリックして下さい。これで設定は完了です。
さて、確認です。

 

Internet Explorer

 

Google Chrome

OK OKいい感じで仕上がってます。他のブラウザは試していませんが、とりあえずヤフーとグーグルで表示されているので大丈夫そうですね！

 

スマホホームボタンもうまく設定できてます。少し暗いかな～。

 

まとめ

ちょっとしたところですが、サイトのブランド価値を高めてくれるのに一役買ってくれます。ユニークなファビコンなら、お気に入りの中でも目立ちますし、そこからまた見ていただける可能性も高まります。

簡単にできますので、まだ設定されてないなら導入しない手はありませんね！