WEBデザイン小ネタ集：ちっちゃいアピール！タイトルバーアイコン(ファビコン)を設定してみよう！
2015/12/27
初めまして、東雲です。
初めてじゃない人はこんにちわでしょうか？
記事を見てくださってる皆々様に感謝の言葉を送りつつ、今回もやっていきたいと思います。
では早速、今回のお題を発表しましょう。
今回のお題は…こいつです。
そう、今回はタイトルバーのアイコンについて触れて行きます。
ちなみにこのアイコン部分は
favorite(お気に入り)とicon(アイコン)をくっつけた造語で、
元を辿るとはブックマーク項目の表示用に作られたものらしいです。
ここって変えれるんだ…
と、驚愕している方は…まぁ少ないかと思われます。
なぜなら…
Googleも
楽天も
Yahoo!も
Amazonも
どこもかしこもオリジナルでタイトルバーアイコンを使用していますからね。
このようにオリジナルのアイコンを設定することでタブの区別がつきやすくなるので凄く分かりやすいです。
変えてみよう！
では、アイコンの変え方をザックリと見て行きましょう。
かなり簡単です。
・アイコンの用意
まずはアイコンを用意します。
サイズは32×32、Bmp(ビットマップ)形式で作成しましょう。
名前は”favicon.bmp”として保存します。
その後に、
・タグの追加
続いて、ソースファイルをいじっていきます。
<head>
<LINK rel="SHORTCUT ICON" href="favicon.ico">
</head>
こんな感じでHEADタグの中に2行目のコード(太字のもの)を書くとあら不思議。
ちゃんとアイコンが変わりました。
こんな感じにちょっとした手間でオリジナル感を出せるので
やってみる価値はありますよ！
ということで、タイトルバーのアイコン通称ファビコンの紹介でした。
今では結構当たり前の機能になりつつあるのかなという印象が強いのですが、
流石に個人でサイトを作っている場合だとやり方を知らないからそのままでというパターンも多いのではないでしょうか？
そんな方々の参考資料になれば幸いです。
アイコンのデザインで悩んでいる方は実際に探してみると良いですよ。
おすすめの方法はタブを大量に作って並べてみるという方法。
タブを大量に作ってファビコンを並べてみるとカラフルで面白いですし、法則性なんてものを見つかるかもしれませんよ。
