PhotoshopでFaviconを作る

たまに必要になって、その度に調べてる気がする「Favicon（ファビコン）」について、メモっておくことにします！

Faviconを作る

Faviconは.GIFや.PNGでもいいのですが、IEが.ICOじゃないとダメみたいなので、ICOファイルで作ります。

私はPhotoshopでアイコンを作るので、プラグインを使ってそのまま書き出してしまいます。
プラグインのダウンロードはこちらから。
Telegraphics - Free plugins for Photoshop & Illustrator...and other software

「ICOFormat.8bi」というプラグインファイルを、Photoshopの「プラグイン」＞「ファイル形式」フォルダに入れておくと、「別名で保存」のプルダウンメニューからICO形式を選べるようになります。
ちゃんと透過アイコンもできます。

※マルチアイコンにしたかったらこんなのも。
ファビコン作成。favicon.ico 無料で透過マルチアイコンが作れます。

サイズはマルチアイコンの場合、16×16、32×32、64×64（MacOSX用）、128×128（MacOSX用）。
マルチにしない時は16×16で大丈夫そうです。

設定の仕方

＜head＞内で指定します。

<link rel="shortcut icon" href="ファイル名" />
<link rel="icon" href="ファイル名" type="image/vnd.microsoft.icon" />

『image/vnd.microsoft.icon』っていうのが .icoファイルのメディアタイプです。

表示されないとか更新されないとか不具合が起きやすいので、＜link rel=～＞の前に

<script language="JavaScript">
var image = new Image()
image.src = "ファイル名"
</script>

と書いておくと良いらしいですよ。

ブラウザで確認して完成です！