ブラウザタブのアイコン設定でサイトを埋没させない
2015/12/20
目次
タブに設置された画像「ファビコン」の重要性
インターネットで調べ物をしていると
ブラウザが複数のタブで一杯になって
今自分がどこにいるのか分からなくなること
ありませんか？
↓こんな状態↓
[br num=”1″]
白いページアイコンの横に
文字がズラッと並んで
右端の文字は省略されます。
ブックマークで見ると一目瞭然ですが
ブラウザのタブにアイコンを設置しないと
お目当てのページが埋もれて
パッと探しにくいですよね。
[br num=”1″]
有名な企業やサイトは
必ずブラウザのタブに
アイコンを設定しています。
[br num=”1″]
これなら複数のタブを開いていても
迷うことなくページを見つけることが出来ますね。
ブックマークやブラウザタブの左にある
小さなアイコンは
「ファビコン（Favicon）」と言って
Favourite（お気に入り）と
Icon （図形・象徴）を組み合わせた言葉です。
[br num=”1″]
ファビコンは16×16ピクセルと
とても小さな小さなマークですが
タブにアイコンを設定してあるだけで
ひと目でサイトを見分けられるので
小さいながらも役割は重要です。
ファビコンの色やデザインはシンプルな方が
小さくても潰れませんので
私は白の背景に「ワ」と一文字
バカみたいに単純化してみました。
[br num=”2″]
wordpressタブアイコンを変更する超簡単な方法
ファビコンを設定するには
用意した画像を16×16ピクセルの
「.ico 」形式の拡張子に
変換する必要があります。
ファビコン変換ツール「Favicon Converter」に
画像をアップロードして
プルダウンメニューでサイズを選択し
「アイコン作成」をクリックすると
リサイズされた「.ico 」形式の拡張子の
画像がパソコンにダウンロードされます。
[br num=”2″]
Macで.ico形式に変換するならプレビューが便利
Macをお使いなら「プレビュー」で簡単に
.ico形式で保存することができます。
[br num=”1″]
今回私が用意した
「ワ」の画像は「.png」ですので
「.png」をico形式に
変換してみたいと思います。
[br num=”1″]
プレビューの「ファイル」から
「書き出す」を選びます。
[br num=”1″]
ところが、この状態だと保存形式は
次の通りで「.ico 」形式の拡張子は
選択できません。
[br num=”1″]
「.ico 」形式の拡張子を表示させるには
「書き出す」をクリックし
[br num=”1″]
その後に「option」をクリックします。
すると「GIF」など、
保存形式の選択肢が増えました。
[br num=”1″]
「Microsoft アイコン」を選択して保存すると
[br num=”1″]
「.ico」形式で画像が保存されます。
いやいや「プレビュー」って
奥が深いんですよね。
[br num=”2″]
wordpressにプラグインをインストールする
「.ico」形式の画像が用意できたら
wordpressにプラグインをインストールします。
プラグイン→新規追加から
「All in one Favicon」と
検索窓に入力します。
[br num=”1″]
「いますぐインストール」で
インストールが完了した後に
「プラグインを有効化」すると
サイドバーの「設定」に
「All in one Favicon」が表示されます。
[br num=”1″]
後は「ICO Frontend」に用意した
ICO画像をアップロードして
「変更を保存」するだけです。
ちなみに「Check box to delete favicon. 」に
チェックを入れると削除されますので
ご注意ください。
[br num=”2″]
ファビコン画像なんて作れない！？
もし、あなたが
ファビコン画像なんて作れないよ〜
という場合は
ファビコンを簡単に作成できる
ジェネレーターを使うと便利です。
「favicon.cc」なら
プレビューで見た目を確認しながら簡単に
ファビコンを作ることができます。
他にもインターネットで
「無料オンラインジェネレーター ファビコン」
など入力して検索すると、
ファビコンを作成できるジェネレーターは
たくさんヒットします。
ぜひお試しください。
[br num=”2″]
最後まで読んでいただき
ありがとうございました。
[br num=”2″]
ランキングに参加中です。
少しでも私の記事がお役に立ちましたら、
応援していただけると励みになります。
↓ ↓ ↓
[br num=”3″]
