favicon (透明) を作る

今までは favicon を作るの方法で作成していましたが、ひとつ問題点がありました。それは、背景が透明な画像を作っても背景色が白に変換されてしまうことでした。

背景が透明な favicon を Photoshop で作成/保存

favicon (透明) を作る

背景を透明にしたままで Photoshop で Windows Icon (.ico) 形式のファイルに保存できるプラグインを見つけました。もちろん .ico ファイルを開くことも可能です。

Step 1: プラグインのダウンロード
Plugin Downroad » ICO ( Windows Icon ) Format
Step 2: プラグインのインストール
ダウンロードしたプラグインを、〜/アプリケーション/Adobe Photoshop CS/プラグイン/ファイル形式 に置く。

Step 3: 画像を .ico 形式で保存
Photoshop を立ち上げ作成した画像を .ico 形式で保存。
Step 4: 保存したした favicon 画像をサーバーにアップロード
Step 5: タグの設定をする。
<head> 〜 </head> に次のタグを設定する。
<link rel=”shortcut icon” href=”ファイルへのパス/favicon.ico” />