スタッフブログ

Webツールで画像をfavicon(ファビコン)に変換してくれるサービスは色々あります。便利なのですが、画質や背景が透過に出来なかったりと完成度が物足りない場合があります。

Safariなどアドレスバーの背景が白い物は、favicon(ファビコン)の背景も白で作成すればよいので気になりません。しかしFireFoxのアドレスバーやIE8のタブバー部分は気になってしまいますよね

私の場合、Photoshopで元画像を作成しているので、Photoshop上で透過背景のfavicon(ファビコン)を作成する方法を少し調べてみたところ、プラグイン「icoformat」で可能でした。透過背景のfaviconにするとFireFoxで下画像のような感じで表示されます。

favicon比較

以下、覚え書きです。

(1)まずプラグイン「icoformat」をダウンロードします。
http://www.telegraphics.com.au/sw/#icoformat

(2)続いてダウンロードしたプラグインをPhotoshopが起動していない状態で、下記に配置します。
例)Mac OS X + Photoshop CS3
アプリケーション / Adobe Photoshop CS3 / プラグイン / ファイル形式

(3)Photoshopを起動して32ピクセル × 32ピクセルで画像を作成します。
このとき背景を無し(透明)にしておけば最終的に透過のfavicon(ファビコン)になります。
(4)favicon.icoというファイル名で保存します。
保存時は、プラグインで追加された【ICO (Windows Icon) 】形式を選択します。
以上でfavicon(ファビコン)作成完了です。

HTMLに貼り付け際は、内に下記のように記述します。

<link rel=”shortcut icon” href=”実際のfavicon.icoのURL”>

ちなみにfavicon(ファビコン)を作成してくれるWebツールもいくつか紹介しておきますね。

http://www.favikon.com/
http://www.html-kit.com/favicon/
http://www.chami.com/html-kit/services/favicon/


前後の記事


最後までご覧いただきありがとうございます!

もしよろしければ、最後にこの記事をソーシャルメディアで共有してください。

このエントリーをはてなブックマークに追加

ホームページでお困りのことはございませんか?

ホームページのリニューアルや新規WEBサイト制作など、あなたのアイディアをお聞かせください。
そのアイディアを当社の技術で形にします。ホームページ制作をご依頼されるのが、初めての方でも丁寧に対応いたしますのでご安心ください。
お見積もり・ご相談は無料ですので、お気軽にご相談ください。

お問い合わせはこちら

PAGE TOP