寒い日が続くこの頃ですが、皆さん体調は如何でしょうか。
本日は、Webサイト・blogを運営されている方向けの記事となりますが、自分用メモも兼ねて、ファビコン(favicon)の作成方法を紹介してみようと思います。
ファビコン(favicon)とは
先ず、ファビコンとはなんぞやというと、サイトやblogを表すようなシンボル・マークとして作成されたアイコンファイルのことです。
日常的にネットサーフィン(死語？)をされている方なら、お気づきかと思いますが、特定のWebサイトではブラウザのURLバーやブックマークリストに、アイコンが表示されている場合があります。そのアイコンこそが「ファビコン」にあたります。
※googleの場合は、頭文字の「g」。
Webサイトにファビコンを設定することによって、下記のような効果を得られると言われております。
- サイトに訪れた際、訪問者の印象に残りやすい
- ブックマークした際に、未設定のサイトより目立つ(=直感的にサイトを判別できる)
企業サイトや大手まとめblogなどでは、しっかりと設定されていることが多く、そのサイトの信頼性、愛着を持つことに、少なからず貢献している要素だと思います。
ファビコンの作成方法
ブラウザやデバイスによって、ファビコンの挙動が異なる為、最小サイズ(16×16)のアイコン設定だけでは、ぼやける場合があります。そこで、自分の場合はある程度カバー出来るように複数サイズを格納できるマルチアイコン(ico形式)でファビコンを作成してみました。
おおまかな作成方法としては、下記2ステップとなっており、簡単なアイコンファイルならば、小一時間もあれば作成できるかと思います。
- ベースとなる3種類のアイコン画像を作成。
こんな感じで大サイズ(64×64)、中サイズ(32×32)、小サイズ(16×16)の画像を、イラストエディタ等を用いて準備します。大サイズ 中サイズ 小サイズ 
小サイズは大～中サイズから縮小させて作成する場合、複雑なアイコンだとぼやける可能性があるので、小サイズだけ個別作成する、シャープ効果を適用する等、工夫が必要です。
尚、個別に作成するのが面倒いう方は、大き目の正方形画像を準備して、FaviconMakerというサイトに画像をドロップすると幸せになれます(笑)
- マルチアイコン化(http://ao-system.net/favicon/index.php)
ベース画像を準備できたなら、ファビコン favicon.ico ファブアイコン作成。へアクセスし、送信フォームに3種類のファイルを選択します。
特に難しい設定は必要ありませんが、大サイズを小サイズに設定する等の誤りには注意が必要です。ファイル選択が完了したら、[favicon.ico作成]を押下します。すると画面が遷移し、作成されたアイコンが表示されます。
最後に[ダウンロード]を押下すれば、ファイルをダウンロードできます！
ファビコンの設定方法
ファビコンを設定するには、icoファイルをサーバ上にアップロードし、サイト・blogのhead内に下記一文を挿入する必要があります。
<link rel="shortcut icon" href="icoファイルのURI" >
<head></head>内の他のタグに干渉しなければ何処でも問題ないので、</head>を文字検索(ctrl+F3でページ内検索)し、その一行上に挿入するのが無難かもしれません。
私のblogはfc2を利用されている方との相互リンクがメインなので、fc2 blog向けの参考URLを置いておきます。
参考サイト：初心者でもできる簡単FC2ブログの作り方 ファビコンをつけよう！
以上の手順で、サイトのURLバーやブックマーク画面で、設定したアイコンを表示させることが出来ます。二番煎じ、三番煎じと言わざる終えない内容ですが、ファビコンに興味のあるけど、やり方が判らなくて未設定だった方の参考になれば幸いです(笑)
追伸
最近で言うと、H1penさん、Rknightさんがアイコン設定を行われたようです。
私の味気ないアイコンと違って、スタイリッシュなので、アイコン作成の参考にしてみると良いかもしれません^^
コメント
ファビコンも奥が深いのですね。
私はRknightさんが作ってくれたものをお借りしてるだけなので、作り方を含めとても勉強になりました♪
>Hanpenさん
嬉しいお言葉、有難うございます！
さわり程度な内容でしたが、参考になったようで幸いです。
いつかHanpenさんのオリジナルも見てみたいです^^
ファビコン作成記事お疲れ様です！
スタイリッシュといって頂けて嬉しいですｗ
でもかっこつけてるところはフォント選んだだけ・・ですｗ
ちなみに自分の作ったファビコンは128×128のが一つだけしかないですｗ
だから若干ぼやけてるのかな・・・（苦笑）
すみませんはんぺんさんー！
しかしこれであの方もファビコンをつけてくれますかねっ・・・！！（期待）
>RKnightさん
コメント、どうもですー。なるほど、128×128でしたか。
IEとchomeで試したところ、大サイズは両方とも綺麗に表示されておりました^^
>でもかっこつけてるところはフォント選んだだけ・・ですｗ
いえいえ、装飾があってよいと思います。
自分は黒背景にニコモジを乗せた突貫工事なので(笑)
あと、京史朗さんにもオススメしてみましたー