Photoshopでファビコン（favicon）の画像を作成しても、Macのデフォルト環境ではicoファイルが書き出せません。
IE以外のブラウザであればファビコンの画像形式は、GIFやPNGでも構わないのですが、IEで表示させるためにはico形式での出力が必要となります。
ファビコンは頻繁に変更しないため、作成から書き出しまでの一連の手順を忘れがちなのでメモしておきます。
INDEX
Photoshopでico形式ファイルを書き出しfaviconを表示する
作業環境は以下のとおり。
- システム環境：MacOS X(10.8)
- 使用アプリケーション：Photoshop CS5
- 書き出すfaviconのファイル名：favicon.ico
- 書き出し先フォルダ名：images
Photoshopでico形式ファイルを書き出す
- Photoshopでico形式のファイルを書き出すためのプラグインをTelegraphicsからダウンロードする
- ダウンロード後、プラグインファイル（ICOFormat.plugin）を以下のフォルダにコピーする
[code]
ハードディスク名/Applications/Adobe Photoshop CS5/Plug-ins/File Formats/
[/code] - Photoshopを起動（すでに起動している場合は再起動）し以下のサイズでファビコン画像を作成する
出力形式 サイズ(ピクセル) 色数 ICO形式(共通) 16×16, 32×32 4ビット16色, 8ビット256色, 24ビット1600万色 ICO形式(Win) 24×24, 48×48, 64×64 任意の色数 ICO形式(Mac) 64×64, 128×128 任意の色数 GIF形式 16×16 256色 PNG形式 16×16 8ビット（256色）or 24ビット（1600万色） - 作成した画像をico形式でファイル名（favicon.ico）としてimagesフォルダに書き出す
faviconを表示する
- HTMLファイルのheadタグ内に以下を記述する。（単独行の記述でも問題ないですが、両方指定するのが望ましいとされているみたいです）
[code] [/code]
まとめ
ファビコンは当初、非HTML標準で Microsoft Internet Explorer 5 独自の機能として実装されたため、Windowsのico形式という不可解な画像フォーマットが存在します。
IE以外のモダンブラウザではPNGやGIFでも問題なくファビコンの表示が可能ですが、ここはMicrosoftに敬意を表してicoファイルで作成することをおすすめします。
この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。
