Netablog

デザインしたりとWebマーケティングしたりするときにネタになることまとめているネタブログです。

faviconってどうやって作るんだっけ?の復習

わたくし、印刷ものの制作もしていたりと、

いろいろな業務・媒体にからむ日々を

過ごしております。

 

そんな、中久しぶりにfaviconをつくる

という機会がありまして。

 

 

「まぁfavicon作るくらいよゆう〜♪」と

ぶっかましていましたが、

いざ机に向かいphotoshopを起動してみたものの

なにからはじめていいのやら。。。(゚д゚lll)

 

 

そこでfavicon復習することにしました。

 

 

1.faviconとは

faviconというのはウェブサイトのマークのこと。

ブラウザでウェブサイト開くとタイトルの横に出るやつです。

 

Googleだとこんなの。

f:id:nekonkeo:20140914101143j:plain

 

 

 

 

Yahooはこれ

f:id:nekonkeo:20140914101156j:plain

 

 

 

Nintendoのfaviconはさすが。

f:id:nekonkeo:20140914101211j:plain

 

 

 

お気に入り(ブックマーク)にいれると

リストにつくアイコンですね。

 

「お気に入りアイコン」を英語にすると

"favorite icon"→略してfaviconてことですね。

 

 

 

2.faviconを作成するために、用意するものとサイズ

まず、favionで注意する点は、サイズです。

 

 

ブラウザで使用されているものは、16px × 16pxです。

f:id:nekonkeo:20140914101143j:plain

これです。16px × 16px です。

なので基本的には16px × 16pxのデータがればOK。

 

 

しかし、windowsの場合、デスクトップにウエブサイトの

ショートカットをつくることができます。

そのときにもfaviconが使われるのですが、

そのサイズが32px × 32pxになります。

 

なので、windowsのデスクトップアイコン用に

32px×32pxもほしいところです。

 

16px と32pxと2つのfaviconをつくるのか?

という疑問が生まれますが、そういうことではないです。

 

faviconが他の画像ファイルと違う点として

サイズを複数保持できるところです。

 

「マルチアイコン」といいます。

 

今回は16pxと32pxの複数のサイズをもった

favoconつくることにします。

 

 

3.実際につくってみます。 

気をつけなければいけないのが、サイズが16pxという

かなり小さい点。

 

16pxのデザインは、あまり細かいつくりにすると、

なんだかよく分かんないアイコンになってしまいます。

 

たとえば、このイラスト

f:id:nekonkeo:20140914104407j:plain

イラストACのアキヒロさんのイラスト、

おかりしました

※いいのかこれwwって思いながらも

いい感じのイラストなので使いましたwww

 

これを16pxにすると...

 

f:id:nekonkeo:20140914104611j:plain

ちっさい!

 

なにがなんだか分からないですね。

 

Googleの場合gだけにしてるように、

割り切ったデザインにしたほうがfavionにはぴったりと思います。

 

今回はJだけにしてみました。

f:id:nekonkeo:20140914105341j:plain

16px

f:id:nekonkeo:20140914105536j:plain

32px

 

 

 

4.favicon用の.icoファイルの作成

16pxと32pxのデザイン画像が完成したとろで

favicon用の画像に変換します。

 

faviconは.icoという拡張子のファイルになります。

photoshopでもプラグインを入れればicoファイルを書き出せるようですが、

たまにしか使わないのにプラグインいれるのも

気持ちいいものではないので、このサイトを使わせていただきました。

http://ao-system.net/favicon/

f:id:nekonkeo:20140914105929j:plain

 

jpg画像をアップするだけで

マルチのicoファイルを作成してくれます。

 

16px、32pxそれぞれ作成した画像をアップして

faviconを作成をクリック。

f:id:nekonkeo:20140914110014j:plain

 

あら、簡単。icoファイルがダウンロードできます。

 

 

5.ウェブページに設置

icoファイルができたら、

設置したいウェブサイトにリンクを貼ります。

 

htmlの<head></head>内に以下を記述します。

<link rel="shortcuticon" href="favicon.ico">

 

hrefの記述はご自身がicoファイルを置いた場所と

ファイル名を記述してください。

f:id:nekonkeo:20140914110830j:plain

 

こんなかんじで、できました。

 

 

 

「画像のつくりかたがよく分かんない・・・」

という方はx-icon editorというサイトがオススメです。

画像をアップロードするだけで、簡単にマルチアイコンが作成できます。