わたくし、印刷ものの制作もしていたりと、
いろいろな業務・媒体にからむ日々を
過ごしております。
そんな、中久しぶりにfaviconをつくる
という機会がありまして。
「まぁfavicon作るくらいよゆう〜♪」と
ぶっかましていましたが、
いざ机に向かいphotoshopを起動してみたものの
なにからはじめていいのやら。。。(ﾟдﾟlll)
そこでfavicon復習することにしました。
1.faviconとは
faviconというのはウェブサイトのマークのこと。
ブラウザでウェブサイト開くとタイトルの横に出るやつです。
Googleだとこんなの。
Yahooはこれ
Nintendoのfaviconはさすが。
お気に入り（ブックマーク）にいれると
リストにつくアイコンですね。
「お気に入りアイコン」を英語にすると
“favorite icon”→略してfaviconてことですね。
2.faviconを作成するために、用意するものとサイズ
まず、favionで注意する点は、サイズです。
ブラウザで使用されているものは、16px × 16pxです。
これです。16px × 16px です。
なので基本的には16px × 16pxのデータがればOK。
しかし、windowsの場合、デスクトップにウエブサイトの
ショートカットをつくることができます。
そのときにもfaviconが使われるのですが、
そのサイズが32px × 32pxになります。
なので、windowsのデスクトップアイコン用に
32px×32pxもほしいところです。
16px と32pxと2つのfaviconをつくるのか？
という疑問が生まれますが、そういうことではないです。
faviconが他の画像ファイルと違う点として
サイズを複数保持できるところです。
「マルチアイコン」といいます。
今回は16pxと32pxの複数のサイズをもった
favoconつくることにします。
3.実際につくってみます。
気をつけなければいけないのが、サイズが16pxという
かなり小さい点。
16pxのデザインは、あまり細かいつくりにすると、
なんだかよく分かんないアイコンになってしまいます。
たとえば、このイラスト
イラストACのアキヒロさんのイラスト、
おかりしました
※いいのかこれwwって思いながらも
いい感じのイラストなので使いましたwww
これを16pxにすると…
ちっさい！
なにがなんだか分からないですね。
Googleの場合gだけにしてるように、
割り切ったデザインにしたほうがfavionにはぴったりと思います。
今回はJだけにしてみました。
16px
32px
4.favicon用の.icoファイルの作成
16pxと32pxのデザイン画像が完成したとろで
favicon用の画像に変換します。
faviconは.icoという拡張子のファイルになります。
photoshopでもプラグインを入れればicoファイルを書き出せるようですが、
たまにしか使わないのにプラグインいれるのも
気持ちいいものではないので、このサイトを使わせていただきました。
jpg画像をアップするだけで
マルチのicoファイルを作成してくれます。
16px、32pxそれぞれ作成した画像をアップして
faviconを作成をクリック。
あら、簡単。icoファイルがダウンロードできます。
5.ウェブページに設置
icoファイルができたら、
設置したいウェブサイトにリンクを貼ります。
htmlの<head></head>内に以下を記述します。
<link rel=”shortcuticon” href=”favicon.ico”>
hrefの記述はご自身がicoファイルを置いた場所と
ファイル名を記述してください。
こんなかんじで、できました。
「画像のつくりかたがよく分かんない・・・」
という方はx-icon editorというサイトがオススメです。
画像をアップロードするだけで、簡単にマルチアイコンが作成できます。