Photoshopでファビコンを作成する方法〔フォトショップ,favicon〕

＊つくったファビコンの画像をwordpressのサイトに設定する方法はこちら→WordPressのサイトにファビコンを設定する方法〔Favicon〕

フォトショップでファビコンの画像を作成する。

ファビコンって？

こんな感じで、タイトルの横に表示されるちっさい画像。

Chromeとか、Firefox、Operaなんかで開くと表示される。IEってどうだったけかな、多分表示されるね。Safariでは表示されない。

これがあるのとないのでは結構印象が違うと思う。ちゃんとしてるっぽく見えるし。簡単に設定できるから、ぜひ。

ファビコン作るときに迷うのが画像のサイズだけど、32x32pixelだけでいいと思う。いろいろなサイズの画像を用意するとかもあるけど、ひとつだけでとりあえずおけ。それと拡張子は”.ico”にしておけば問題ない。

流れ

プラグインのファイルをダウンロード
ダウンロードしたプラグインのファイルを保存
つくる。

プラグインのダウンロード

こちらのサイトからプラグインをダウンロードさせていただく。→Telegraphics – Free plugins for Photoshop & Illustrator…and other software

2016年8月18日現在、CC向けのファイルがないみたい…。やから、とりあえずCS5,CS6向けのファイルをダウンロードしてみたけど問題なく使えた。

ダウンロードしたら開く。3つのファイルが入っている。

その中の”ICOFormat.plugin”ってファイルを、Photoshopのプラグインの”File Formats”の中に入れる。

この”File Formats”フォルダがない場合は、”File Formats”って名前でフォルダを新規作成する。

こんな感じの階層で入れる。

Photoshopを起動（再起動）して確認

うまくできてたらデータを保存するときのフォーマットのところに”ICO(Windows Icon)”って選択肢が増えてる。これで”.ico”で画像を保存できるようになる！

できてなかったら、もっかいプラグインの保存場所確認してみてください。それか、ダウンロードしたプラグインのバージョンとお使いのPhotoshopのバージョン合ってるかとか。

ファビコン画像をつくる！

プラグインがちゃんと使えてるのが確認できたら画像作る。”新規作成”。ファイル名はなんでもいいけど”favicon”にしましょー。

ドキュメントの種類は”カスタム”にして幅、高さは32pixel。解像度は72pixel/inchでおけ。

カンバスカラーは”透明”に。

あとはー、お好きなようにー。ガイドと使ってキレーにつくる。ちっちゃい画像だから細かいデザインはぐちゃぐちゃってなってわけわかんなくなるから、シンプルなのがおすすめですねー。

つくったら、保存。

フォーマットは”ICO(Windows Icon)”を選んで、ちゃんとファイル名が”favicon.ico”になっているか確認する。

以上、フォトショップをつかってファビコン画像を作る方法でしたー。