faviconを作るためのPhotoshopプラグイン
基金訓練受講前に作ったことがありますが、お店のロゴをそのまま使うと小さくなった場合に見やすいかどうかで悩みました。スマートフォン向けのことを調べていたら、iOS向けのWebクリップやアイコンの件もあるのでまとめを兼ねて、PhotoshopでICOファイルを扱うプラグインを紹介する記事。
PhotoshopでICOファイルを扱えるようにするプラグイン
PhotoshopではICOファイルを扱えませんが、こちらのプラグインをインストールすることで読み込みや保存できるようになります。
ICO (Windows Icon) file format plugin for Photoshop
フリーなのもありがたい。Windows、MacOS用の該当するものをダウンロードしてください。
MacのCS5で標準的なインストールだとこのディレクトリへインストール
/Applications/Adobe Photoshop CS5/Plug-ins/File Formats
作成した画像を保存するときに「保存」か「別名で保存」を選ぶと、「フォーマット」欄に「ICO（Windows Icon）」が選択できるようになります。
そもそもfaviconって何？
favorite iconの短縮でfavicon。
ブラウザのアドレスバー左側やブックマークに表示されるアイコン。
大きさは縦16px横16pxの正方形。
上記のどちらかを作成したら、head要素に以下の記述を追加する。
<link rel="shortcut icon" href="[faviconのファイルがある場所のパス]">
ICOファイル（ここではfavicon.ico）をMIMEタイプまで記述するとこうなる。
<link rel="shortcut icon" href="favicon.ico" type="image/vnd.microsoft.icon"> or <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"> ←こちらは互換性の問題で使うが、上記の方が望ましい。
GIFやPNGでもimage/gifやimage/pngとtypeが記述されていないので、なくても表示されるけど、文法的にはある方がいいようだ。
（おまけ）iPhone/iPod touch/iPad向けWebクリップアイコン
同じような仕組みであるのでこれをキーワードに検索してください。
<link rel="apple-touch-icon" href="apple-touch-icon.png" > <link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png" >
