マルチアイコンの「favicon.ico」をつくる方法
ブラウザのタブなどに表示される「ファビコン」。最近はあまり作っていなかったのですが、ふと思い立ってつくろうと思ったときにつくりかたをちょっと忘れていることがあったりするので、メモしておきます。
つくりかた
画像の用意
ファビコン用の画像を用意します。サイズは、16×16pxだけでもよいかと思ったのですが、せっかくなので、今回は32×32pxもつくって「マルチアイコン」にします。
「マルチアイコン」とは、複数のアイコンを「ico」形式にまとめたものです。ファビコンの利用シーンによって最適なサイズがちがうので、複数のサイズを用意します。
※ファビコンのデザインや用意するサイズ、マルチアイコンなどについてはこちらの記事がくわしくて、参考になりました。
→ もう何も恐くない…綺麗なfavicon作成の基本的なコツ・アイデアまとめ | 株式会社LIG
ico形式のマルチアイコンにする
つくった画像を「ico」形式のアイコンにします。今回は2種類のサイズをまとめてマルチアイコンを作りたいので、下記のサイトを利用しました。
→ ファビコン作成。favicon.ico 無料で透過マルチアイコンが作れます。
[browser-shot url=”http://ao-system.net/favicon/index.php” width=”610px”]
使いかたはかんたんで、上記のサイトを開いたら、用意しておいた画像をアップロードし、「favicon.ico 作成」ボタンを押します。
※サイズがちがうところにアップロード（たとえば、32px×32pxの画像を「大画像」にアップロード）するとおかしなことになるので、確認してアップロードしましょう！
「ダウンロード」ボタンを押してファビコンファイルをダウンロードすればOKです。
ファビコンの呼び出し
できあがったファビコンファイルをサーバーにアップして、表示させたいサイト・ブログの<head>〜</head>間に下記を書きます。
[code]<link rel=”Shortcut Icon” href=”http://〜/favicon.ico” type=”image/x-icon” />[/code]
（「href=」のあとは、ファビコンファイルまでのパスを書いてください）
これで、完了です。こんなかんじで表示されているはず、です。
※ファビコンをちがうものに差し替えた場合、表示の確認をするとき、Google Chromeだとなかなか反映されないので、他のブラウザで見たほうが確認しやすいかも、です。
まとめ
ここのところファビコンの必要性をあんまり感じてなかったのですが、ブラウザのタブをたくさん開いていろいろなサイトを見ているときに、やっぱりファビコンがあったほうがサイトの判別がしやすい気がしてきたので、これからはもうちょっとファビコンも作るようにしていこうかと思ったりしました。
