自分のブログが愛しく思える？favicon.icoの作り方

猫ITソリューションズをこの度リニューアルいたしました。
今後も御愛顧の程宜しくお願い致します。

さて、今回のリニューアル作業の一つとしてfavicon.ico（以下ファビコン）をつけてみました。
Favicon - Wikipedia

ファビコンはSEO/SEM的な効果は期待できませんが、「目立つ」という役割で十分意味があると私は思っています。何よりも冒頭でも書きましたが、自分のブログが愛しく思え「愛着」が沸く事でしょう。

これは実際に作って自分でブラウザに表示される様子を見てみないと気持ちは分らないと思いますが、意外なくらい楽に作れますので是非ともチャレンジしてみてください。

それでは以下よりファビコン作成方法について説明していきます。


1、2枚の異なるサイズの画像を用意する。
16x16
32x32
形式はpng,BMPあたりが良いでしょう。

2、ファビコンを作ってくれるWebサービスへ2枚の画像をアップロード
このサイトが一番シンプルで分かりやすいです。
専用アプリケーションをインストールする手間も省けます。
http://ao-system.net/multiicon/

3､ブログやwebサイトのドキュメントルートへアップロード
猫ITソリューションズでしたら、
http://www.neko-it.com/favicon.ico
となります。

4、webブラウザに認識されるように設定する。
2通りの方法が考えられますが、case 1 をやっておけば確実と思われます。

case:1 HTMLで指定する。
以下を追記します。※favicon.icoへのパスは各自置き換えが必要。

<link href="http://example.com/favicon.ico" rel="icon" type="image/x-icon" />
<link href="http://example.com/favicon.ico" rel="Shortcut Icon" type="image/x-icon" />

case 2: サーバーの設定を確認・変更する。※CentOSの場合
/etc/mime.types に以下の記述があるか確認する。なければ追記する。

image/x-icon    ico

環境により4は必要ない場合もあります。お使いのブログポータルサイトの仕様をご確認ください。

これで作業完了です。
ファビコンのデザインは是非とも既存データの流用ではなく、自分のオリジナルで頑張ってみてください。きっと愛着が湧きますよ。

あなたのオリジナルファビコン、そして愛着が湧くことによるあなたの素晴らしいアウトプットに期待しています！
 

----------------
いかがでしたでしょうか？
猫ITソリューションズは、飼い主の皆さんにITを活用しあらゆるシーンで的確なアドバイスをいたします。それではまたお会いしましょう。

see you!