【ホームページの育て方 14】
PCで調べモノをしていると
いつの間にかブラウザーのタブがたくさん増えていることありませんか？
数が多くなってくると文字も見えない。
一つずつクリックして
あ、これじゃなかった…
というものもあれば
ひと目でわかるものってありませんか？
YouTubeの赤に三角マークとか
フェイスブックのFマークとか
Twitteの鳥マークとか
この小さな画像がファビコンです。
ファビコンとは？
Favorite（お気に入り）Icon（アイコン)
でFavicon（ファビコン）
favicon.icoという名前のファイルです。
小さいながら何者であるかを示し
見つけやすくするパーツです。
スマホではタブがないので分からないし
絶対に必要なわけじゃないけど・・・
あると便利！
いや、一度見た人にとっては「あぁ、このアイコンのところね」記憶してもらえる
ブランディングとして使えるもの。
さらに、ブログを書く時にも自分のサイトが見つけやすい！ 笑
これは自分のホームページのシンボルと言ってもいいでしょう！
オリジナルのファビコンを作るには
サイズは
16 × 16 px
または
32 × 32px
があればいいかな。
画像編集ソフト（PhotoShop）などでもできますが
ブラウザーで画像を取り込んで変換するだけでできるサービス（無料）もあります。
「ファビコンfavicon.icoを作ろう！」
16 × 16 px 、32 × 32px 、42 × 42px
半透明も作れます。
「Iconifier」
こちらは16 × 16 px から512 × 512pxまで
IPhoneに表示するアイコンもできますよ。
「Real Favicon Generator」
こちらはファビコン、IPhone用アイコン、Windows用アイコンも作れて
コードまとめて作成してくれるので便利です。
ファビコンの設置方法
さて、ファビコンができたら次は設置です。
ワードプレスではファビコンをアップロードするだけで設置できるものもあります。
ない場合は、自分で設置します。
ワードプレスなら
header.php（必ず子テーマのものを使いましょう）
の</head>より前に下記コードをコピペ。
<link rel=”icon” href=”/favicon.ico” />
ファビコンをpngで作ったなら（.icoでなくても設置できるんです）
<link rel=”icon” type=”imge/png” href=”/favicon.png” />
Real Favicon Generatorで作成した場合はそこで出てきたコードをコピぺしてくださいね。
まとめ
必須ではないけれどPCでサイトを探すときにあるとすごく便利！
まだまだビジネスではスマホよりPCを使うことが多いので
ユーサビリティの点から考えてもあった方がいいですね。
さらに！
このファビコンがスマホのアイコンにもなるんですよ。
自分のサイトやブログをスマホのホーム画面にできます。
見つけやすいだけでなく誰かに見せることもすぐ探せます。
何と言っても自分のアイコンがスマホにあるのって嬉しくない？
ホームページが出来上がる頃までには作成して欲しいファビコン。
早速今から作ってはいかがですか？
次回は
『ロゴでブランディング』です。
お楽しみに♪
