満員の通勤電車もプラス思考にチェンジ! ブログ媒体運営に欠かせない知識とスキルを身に付けて 1つの世界に依存しないワラジライフを楽しんでいます。

*

ブラウザタブのアイコン設定でサイトを埋没させない

      2015/12/20

タブに設置された画像「ファビコン」の重要性

インターネットで調べ物をしていると
ブラウザが複数のタブで一杯になって
今自分がどこにいるのか分からなくなること
ありませんか?

↓こんな状態↓


[br num=”1″]
白いページアイコンの横に
文字がズラッと並んで
右端の文字は省略されます。

ブックマークで見ると一目瞭然ですが
ブラウザのタブにアイコンを設置しないと
お目当てのページが埋もれて
パッと探しにくいですよね。

ブックマーク マネージャ 2015-08-23 06-28-23 [br num=”1″]
有名な企業やサイトは
必ずブラウザのタブに
アイコンを設定しています。

タブ
[br num=”1″]
これなら複数のタブを開いていても
迷うことなくページを見つけることが出来ますね。

ブックマークやブラウザタブの左にある
小さなアイコンは
「ファビコン(Favicon)」と言って
Favourite(お気に入り)と
Icon (図形・象徴)を組み合わせた言葉です。
[br num=”1″]
ファビコンは16×16ピクセルと
とても小さな小さなマークですが
タブにアイコンを設定してあるだけで
ひと目でサイトを見分けられるので
小さいながらも役割は重要です。

ファビコンの色やデザインはシンプルな方が
小さくても潰れませんので
私は白の背景に「ワ」と一文字
バカみたいに単純化してみました。
[br num=”2″]

wordpressタブアイコンを変更する超簡単な方法

ファビコンを設定するには
用意した画像を16×16ピクセルの
「.ico 」形式の拡張子に
変換する必要があります。

ファビコン変換ツール「Favicon Converter」に
画像をアップロードして
プルダウンメニューでサイズを選択し
「アイコン作成」をクリックすると
リサイズされた「.ico 」形式の拡張子の
画像がパソコンにダウンロードされます。

Favicon Converter

アイコン(icon)変換ツール - Favicon Converter 2015-08-16 15-12-25
[br num=”2″]

Macで.ico形式に変換するならプレビューが便利

Macをお使いなら「プレビュー」で簡単に
.ico形式で保存することができます。

プレビュー [br num=”1″]
今回私が用意した
「ワ」の画像は「.png」ですので
「.png」をico形式に
変換してみたいと思います。

わ.png [br num=”1″]
プレビューの「ファイル」から
「書き出す」を選びます。

プレビューで書き出す [br num=”1″]
ところが、この状態だと保存形式は
次の通りで「.ico 」形式の拡張子は
選択できません。

保存形式 [br num=”1″]
「.ico 」形式の拡張子を表示させるには
「書き出す」をクリックし

プレビューで書き出す [br num=”1″]
その後に「option」をクリックします。
すると「GIF」など、
保存形式の選択肢が増えました。

オプション [br num=”1″]
「Microsoft アイコン」を選択して保存すると

書き出す 2015-08-23 08-32-56 [br num=”1″]
「.ico」形式で画像が保存されます。

いやいや「プレビュー」って
奥が深いんですよね。
[br num=”2″]

wordpressにプラグインをインストールする

「.ico」形式の画像が用意できたら
wordpressにプラグインをインストールします。

プラグイン→新規追加から
「All in one Favicon」
検索窓に入力します。

All in one Favicon 2015-08-16 15-16-06 [br num=”1″]
「いますぐインストール」で
インストールが完了した後に
「プラグインを有効化」すると
サイドバーの「設定」に
「All in one Favicon」が表示されます。

All in one Favicon [br num=”1″]
後は「ICO Frontend」に用意した
ICO画像をアップロードして
「変更を保存」するだけです。

ちなみに「Check box to delete favicon. 」に
チェックを入れると削除されますので
ご注意ください。
[br num=”2″]

ファビコン画像なんて作れない!?

もし、あなたが
ファビコン画像なんて作れないよ〜
という場合は
ファビコンを簡単に作成できる
ジェネレーターを使うと便利です。

「favicon.cc」なら
プレビューで見た目を確認しながら簡単に
ファビコンを作ることができます。

favicon.cc

favicon.ico GeneratorPreview

他にもインターネットで
「無料オンラインジェネレーター ファビコン」
など入力して検索すると、
ファビコンを作成できるジェネレーターは
たくさんヒットします。

ぜひお試しください。
[br num=”2″]
最後まで読んでいただき
ありがとうございました。
[br num=”2″]
ランキングに参加中です。
少しでも私の記事がお役に立ちましたら、
応援していただけると励みになります。
↓ ↓ ↓

[br num=”3″]

 - 画像加工の方法, サイトの作成・運営 , , , ,