ファビコン作らずに1年間ブログ運営してきました。
なんでいままで作らなかったんだっていう話ですよね。
ファビコンってすぐ作れそうなイメージがあったんですが、意外にもPhotoshopではプラグインを追加しないと書き出せないんですね。
というわけで、Photoshopでファビコンを作る方法をメモっておきます。
ファビコンとは
ファビコンとは、ブラウザのタブのところやブックマークしたときにでる小さなアイコンみたいなもののこと。
▼これがファビコンです。
昔は特定のソフトでしか作れなかったのですが、いまではいろんな作り方が出来るようになりました。
たとえば下記の方法であれば、元の画像さえ持ってれば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 で背景透過の美しい favicon (ファビコン) を作成する
あとは、サーバーにファビコンのファイルをアップして、headタグ内に
<link rel="shortcut icon" type="image/x-icon" href="画像名.ico">
と書いてあげればおっけー。
最後に
iPhoneホーム画面用アイコンも出来てるんですがそれはまた後日。
ようやく少しずつ基盤が固まってきました。
もうちょいしたらテーマ作りに入って行こうと思います。