Photoshopを使ってファビコン(favicon)を作る方法

Photoshopを使ってファビコン(favicon)を作る方法

ファビコン作らずに1年間ブログ運営してきました。

なんでいままで作らなかったんだっていう話ですよね。

ファビコンってすぐ作れそうなイメージがあったんですが、意外にもPhotoshopではプラグインを追加しないと書き出せないんですね。

というわけで、Photoshopでファビコンを作る方法をメモっておきます。

ファビコンとは

ファビコンとは、ブラウザのタブのところやブックマークしたときにでる小さなアイコンみたいなもののこと。

▼これがファビコンです。
Photoshop favicon capture01

昔は特定のソフトでしか作れなかったのですが、いまではいろんな作り方が出来るようになりました。

たとえば下記の方法であれば、元の画像さえ持ってればWEB上で完成してしまいます。

faviconを超簡単に作成できるサイト「Dynamic Drive – FavIcon Generator」 | OZPAの表4

Photoshopでファビコンを作る方法

Photoshopユーザーにとっては、上記の方法でもめんどうだと感じるはず。

データを書き出して終わりにしたいのに、書き出したデータをWEB上で加工して…っていうのがめんどうです。

というわけで、Photoshopでファビコンを作る方法をご紹介します。

まずはプラグインを入れましょう。

こちらでダウンロードできます。

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

上記URLでダウンロードしたファイルを

Macなら
Applications/Adobe Photoshop CS6/Plug-ins/File Formats

Windowsなら
Program Files/Adobe Photoshop CS6/Plug-ins/File Formats

※バージョンや環境によって若干異なります。だいたいの感じで。

に入れてPhotoshopを起動させれば(すでに起動してたなら再起動)、ファビコン用のファイルを書き出せるようになります。

▼「別名で保存」をして、保存するファイル形式を「.ico」にするだけ。
Photoshop favicon01

▼詳しくはこちら

Photoshop で背景透過の美しい favicon (ファビコン) を作成する

あとは、サーバーにファビコンのファイルをアップして、headタグ内に

<link rel="shortcut icon" type="image/x-icon" href="画像名.ico">

と書いてあげればおっけー。

最後に

iPhoneホーム画面用アイコンも出来てるんですがそれはまた後日。

ようやく少しずつ基盤が固まってきました。

もうちょいしたらテーマ作りに入って行こうと思います。

キーワード
ブログ運営