プラグイン(プラスα)でファビコンを作成

ファビコン(favicon)とは・・・ブラウザの上、URL部分の左に表示される画像

上の画像で言うと、蝶々の部分です。

このファビコンを作成する際、なかなか納得のいくものが出来なかったりしました。

しかも、拡張子「.ico」にするため画像を作成した後にソフトを起動して変更しなければいけなかったり・・・

面倒じゃありませんか?

背景を透過出来て、画像作成から出来るものを探した結果、PhotoshopのプラグインとFIreworksのプラグインを見つけました。

■ Photoshop編

Telegraphics – Free plugins for Photoshop & Illustrator…and other software

下にスクロールし、お使いのOSに対応したプラグインを選択します。
ファビコンプラグイン画像
C:\Program Files\Adobe\Adobe Photoshop 【バージョン名】\プラグイン

に、入れます。
拡張子画像
別名保存で「.ico」形式で保存して完了です!

■ Fireworks編

johndunning.comより、「ExportAsFavicon-100.mxp」をダウンロードします。

Adobe Extension Managerでインストールします。

そうすると、コマンドにFaviconが追加されるので、「New Favicon」の作成したいサイズ(16,32,64)を選択します。

fireworksplugin画像

ここで、faviconを作りコマンド→Favicon→Export as Faviconを選択して保存します。

これで完了です!

■プラスα(mac Lion)編

macで画像をico形式へ簡単に変換することも出来ます。

プレビュー.appで画像を開きます。
プレビュー.app
ファイル→書き出し→(Optionを押しながら)フォーマットを選択します。
Microsoftアイコン画像
ここで、Microsoftアイコンを選択して完了!

Photoshop、Fireworks、Macで作成したファビコンを比較してみます。
(すべて同じ画像を使用しました)

favicon比較画像

あれ〜?Fireworksで作った画像が汚いですね・・・・
色々調べてみます><

最後に。

下記のソースの「〜パス」部分を修正して<head>~</head>内に挿入。

<link rel=”shortcut icon” href=”〜パス/favicon.ico”>

これで完了です☆ミ