ジーニアスブログ – WEB制作会社ジーニアスウェブのお役立ちブログ

ファビコンを設置しよう!


小学生のとき「飼育小屋のボス」と呼ばれていた戸井です。
膝丈くらいのニワトリを両脇にかかえて、飼育小屋の隅っこで佇んでいたそれだけでついたあだ名です。
主に下級生が言っていたらしく、最近になって妹に教えてもらい知りました。
飼育小屋のボス・・・良いあだ名ですね。

さて、ファビコンをご存知ですか?
タブなどでロゴマークやキャラクターのアイコンが表示されているのを目にしたことがありませんか?
それがファビコンです!

今回は、ファビコンの設置の仕方をお伝えします。

1、画像準備
ファビコンとして使用するに画像は、下記の形式である必要があります。
画像のサイズ:16×16px、24×24px、32×32px、48px×48px、64×64px
画像の種類:ICO形式

ICOってなに?と思った方もいらっしゃると思いますが、最初はPNG、GIF、JPG形式の画像を用意してください。
これを、後でICO形式に変換します。

私は、下記のサイトでICO形式に変換しました。
半透過マルチアイコンfavicon.icoを作ろう!(http://ao-system.net/alphaicon/)

ICO形式の画像が準備できれば後は設置です。

2、ファビコンを設置しよう!
用意したICOファイルを、自分のサイトやブログにアップロードしてください。
次に、ファビコンを設置するために下記のタグをhtmlに追加します。

<link rel=”shortcut icon” href=”●●.ico” type=”image/vnd.microsoft.icon” />

●●.icoの部分はアップロードしたサイトのURLと画像ファイル名に置き換えてください。

先ほどのタグを追加する場所は、<head>から</head>の間です。
これで、タブにアイコンが表示されます。

まとめ
いかがでしたか?
思ったほど難しい作業ではなかったと思います。
まだファビコンを設置してなーいという方はぜひ実践してみてください!