PhotoshopでFavicon作成
Webサイトのシンボルマークとも言えるFavicon(アドレスバー左に表示されるアイコン)をPhotoshopでも作ることのできるPlugin発見。
ICO (Windows Icon) Format
Mac用、Windows用があるので、環境に合わせてファイルをダウンロード。
あとはアプリケーションのプラグインフォルダに入れて起動するだけ。
Favicon用に制作したファイルを保存するときに「ICO (Windows Icon)」を選べばOK。
アップロード後、htmlファイルのheadに以下のlink要素を加えるとブラウザがFaviconを表示してくれる。
制作時のコツとして、
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にリサイズ
- 線主体のマークなどは縮小されることを考慮して、通常より誇張して制作
- 背景透過も可能






コメントする