PhotoshopでFavicon作成

Webサイトのシンボルマークとも言えるFavicon(アドレスバー左に表示されるアイコン)をPhotoshopでも作ることのできるPlugin発見。
ICO (Windows Icon) Format
Mac用、Windows用があるので、環境に合わせてファイルをダウンロード。
あとはアプリケーションのプラグインフォルダに入れて起動するだけ。
Favicon用に制作したファイルを保存するときに「ICO (Windows Icon)」を選べばOK。
アップロード後、htmlファイルのheadに以下のlink要素を加えるとブラウザがFaviconを表示してくれる。
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico のURL" />
制作時のコツとして、
  • Faviconのカンバスサイズは32pixel四方(表示されるのは16pixel四方)。
  • 64pixel四方で制作し、Photoshopで32pixelにリサイズ
  • 線主体のマークなどは縮小されることを考慮して、通常より誇張して制作
  • 背景透過も可能
12.03.2009 | Category:WebDesign  | Tag:Photoshop,WebDesign

comments(0)  | trackbacks(0)  | 

このエントリーのトラックバックURL

コメントする

▲このページのトップへ

月別アーカイブ