WEBデザイン小ネタ集:ちっちゃいアピール!タイトルバーアイコン(ファビコン)を設定してみよう!

2015/12/27

初めまして、東雲です。
初めてじゃない人はこんにちわでしょうか?
記事を見てくださってる皆々様に感謝の言葉を送りつつ、今回もやっていきたいと思います。

では早速、今回のお題を発表しましょう。
今回のお題は…こいつです。

titleicon01
そう、今回はタイトルバーのアイコンについて触れて行きます。

ちなみにこのアイコン部分は“favicon(ファビコン)”と呼ばれています。
favorite(お気に入り)icon(アイコン)をくっつけた造語で、
元を辿るとはブックマーク項目の表示用に作られたものらしいです。

ここって変えれるんだ…

と、驚愕している方は…まぁ少ないかと思われます。
なぜなら…

titleicon02
Googleも

titleicon03
楽天も

titleicon04
Yahoo!も

titleicon05
Amazonも

どこもかしこもオリジナルでタイトルバーアイコンを使用していますからね。
このようにオリジナルのアイコンを設定することでタブの区別がつきやすくなるので凄く分かりやすいです。

変えてみよう!

では、アイコンの変え方をザックリと見て行きましょう。
かなり簡単です。

・アイコンの用意
まずはアイコンを用意します。

titleicon06
サイズは32×32、Bmp(ビットマップ)形式で作成しましょう。
名前は”favicon.bmp”として保存します。
その後に、拡張子をicoに変更(この場合はファイル名が”favicon.ico”になっていればOK)するとアイコンの用意は完了です。

・タグの追加
続いて、ソースファイルをいじっていきます。

<head>
<LINK rel="SHORTCUT ICON" href="favicon.ico">
</head>

こんな感じでHEADタグの中に2行目のコード(太字のもの)を書くとあら不思議。

titleicon07
ちゃんとアイコンが変わりました。

こんな感じにちょっとした手間でオリジナル感を出せるので
やってみる価値はありますよ!


ということで、タイトルバーのアイコン通称ファビコンの紹介でした。
今では結構当たり前の機能になりつつあるのかなという印象が強いのですが、
流石に個人でサイトを作っている場合だとやり方を知らないからそのままでというパターンも多いのではないでしょうか?

そんな方々の参考資料になれば幸いです。
アイコンのデザインで悩んでいる方は実際に探してみると良いですよ。
おすすめの方法はタブを大量に作って並べてみるという方法。
タブを大量に作ってファビコンを並べてみるとカラフルで面白いですし、法則性なんてものを見つかるかもしれませんよ。

投稿者情報

東雲楓

店内装飾やらPOPを作り続け、今ではWEB関係にも手を出してます。
色々広く浅く勉強中だけど、そろそろ一本に絞りたい今日このごろ。

>> 東雲楓が執筆した他の記事を読む

法人向け人気レンタルサーバー
法人向け人気専用サーバー
個人向け人気レンタルサーバー