BLOG

 

ファビコンの作成方法

28 1月 2014, Posted by MayukoTanaka in WordPress, ウェブの基礎知識

こんにちは!マユです。

セブは最近涼しくて過ごしやすいですよ。
やっと雨季も抜けたようで、3日ほど前から太陽を見ることができました^^

今日の指令!
ファビコンを作ってください。

・・・お?ファビコンって何かわかんない…(´A`)?
まずファビコンについて調べてみます!wikipedia先生お願いします。

★ファビコンとは

>ウェブサイトのシンボルマーク・イメージとして、

ウェブサイト運営者がウェブサイトやウェブページに配置するアイコンの俗称である。

Favorite icon(フェイバリット・アイコン:お気に入りアイコン)という英語の語句を縮約したものである。

wikipediaより引用。

yahoofavi

こういう感じで、お気に入りやタブのサイト名の横にあるアイコンですね。

これがあると、お気に入りリストを見ている時に目立ちますし、”ちゃんとしたサイト”という感じがしますよね!

ファビコンってかわいいな~^^*

今回参考にさせていただいたサイトさん

WebDesignNOTE 様 『photoshopでfavicon(iconファイル)を作成する方法

 

★それでは、photoshopでファビコン作っていきます!

まずはphotoshopのプラグインをインストールします。

 

Photoshop icoformatICO (Windows Icon) Format Plugin

キャプチャ

 

windowsの方は赤矢印のところから選んでダウンロードしてください。

ダウンロードしたファイルの中に

ICOFormat.plugin というファイルがあるので、

それをphotoshopにインストールします。

 

・Mac

「Applications > Adobe Photoshop CS5 > Plug-ins > File Formats」

・Windows

「Program Files¥Common Files¥Adobe¥Plug-Ins¥CS5¥File Formats」

↑この中にドラッグ&ペーストです!

キャプチャ3

Windows

 

これで、photoshopを再起動させると

メニューバー>Photoshop > プラグインについて> ICO

で、ちゃんとインストールされたことを確認します。

 

ここから、photoshopでファビコンのデザインをしていくのですが、

私は元からあるGlobal IT Academyのロゴを元にして作成しました。

キャプチャ4

イラストレーターで編集。

だいぶ小さくなってしまうので、文字をオリジナルより少し大きく、色を少し濃くしました。

背景を透過させるために、png形式で保存。

 

このデータをphotoshopで読み込み、32px四方のサイズで保存します。

私は画像解像度で、32px×32pxに変更しました。

保存する際に、フォーマットをインストールした「ICO (Windows Icon)」を選択しましょう。

それでファビコンの完成です!

 

画像サイズを縮小して、フォーマットをICOにするだけなので、簡単でした。

Wordpressでのファビコンの設定方法についてはまた次回。

お疲れ様でした~ヾ(‘ω’)ノ

Post a comment