HTML:Photoshopでico形式ファイルを書き出しfaviconを表示する。

Photoshopでファビコン(favicon)の画像を作成しても、Macのデフォルト環境ではicoファイルが書き出せません。
IE以外のブラウザであればファビコンの画像形式は、GIFやPNGでも構わないのですが、IEで表示させるためにはico形式での出力が必要となります。
ファビコンは頻繁に変更しないため、作成から書き出しまでの一連の手順を忘れがちなのでメモしておきます。

Photoshopでico形式ファイルを書き出しfaviconを表示する

作業環境は以下のとおり。

  • システム環境:MacOS X(10.8)
  • 使用アプリケーション:Photoshop CS5
  • 書き出すfaviconのファイル名:favicon.ico
  • 書き出し先フォルダ名:images

Photoshopでico形式ファイルを書き出す

  1. Photoshopでico形式のファイルを書き出すためのプラグインをTelegraphicsからダウンロードする
  2. ダウンロード後、プラグインファイル(ICOFormat.plugin)を以下のフォルダにコピーする
    ハードディスク名/Applications/Adobe Photoshop CS5/Plug-ins/File Formats/
  3. Photoshopを起動(すでに起動している場合は再起動)し以下のサイズでファビコン画像を作成する
    出力形式サイズ(ピクセル)色数
    ICO形式(共通)16×16, 32×324ビット16色, 8ビット256色, 24ビット1600万色
    ICO形式(Win)24×24, 48×48, 64×64任意の色数
    ICO形式(Mac)64×64, 128×128任意の色数
    GIF形式16×16256色
    PNG形式16×168ビット(256色)or 24ビット(1600万色)
  4. 作成した画像をico形式でファイル名(favicon.ico)としてimagesフォルダに書き出す

faviconを表示する

  1. HTMLファイルのheadタグ内に以下を記述する。(単独行の記述でも問題ないですが、両方指定するのが望ましいとされているみたいです)
    <link rel="shortcut icon" href="images/favicon.ico" type="image/vnd.microsoft.icon" />
    <link rel="icon" href="images/favicon.ico" type="image/vnd.microsoft.icon" />

まとめ

ファビコンは当初、非HTML標準で Microsoft Internet Explorer 5 独自の機能として実装されたため、Windowsのico形式という不可解な画像フォーマットが存在します。
IE以外のモダンブラウザではPNGやGIFでも問題なくファビコンの表示が可能ですが、ここはMicrosoftに敬意を表してicoファイルで作成することをおすすめします。

この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。

siro:chro 無料ゲーム SQN をリリースしました

img_sqn_00

sirochro 初の無料ゲームアプリ SQN をリリースしました。
記事:SQN: iOS 無料ゲームアプリ SQN - Sequential Numbers をリリース
ちょっとした時間に楽しめる完全無料のゲームなっていますので、是非ダウンロードして遊んでみてください。

↓SQN のダウンロードはこちらから

Related Contents

Pickup Contents