faviconの作り方
今回はfaviconの作り方について解説していきます。 えっ？ favicon って何？っていう方がほとんどだと思います＾＾； これは日本語でファビコンと言いいます。 faviの部分はおそらくfavourite の略で ＝ “お気に入りのアイコン(icon)” っていう意味だと思われます。
このfavicon、一体どういう目的で作成され機能しているかを説明しながら、どうやってfaviconを作成するかを解説します。←響きは難しそうですが、すぐ終わります･笑
faviconはこの記事内でサンプルで掲載している画像が示すように、InternetExploreや、Firefox、Safari などのインターネットブラウザ内の “アドレスバー” や “タブ” そして “”お気に入りの中に出力されるfavicon.ico という名前のファイルです。あなたが運営するホームページで、こうしたfaviconファイルを作ってリモートサーバーにアップすれば、ページを閲覧しているユーザーに、またあなたのサイトをお気に入りに追加 （URL 【ホームページアドレス】） してもらった際に 『サイトの目印』 として、わかりやすくユーザーにあなたのサイトを認識・認知させることができます。
つまりfaviconはサイトの目印として、ロゴマークやシンボルマークと同様の効果が期待できます。上のサンプル画像ではこのサイト “edogawa4ever” のfavicon がブラウザ内でどのように表示されているかをスクリーンキャプチャーしたものです。edogawa4verはロゴマークが存在しますので、そのロゴマークをファビコンとして利用しています。よくよく見るとYahooや、MSN、Googleなどもfaviconを使用していますね。
逆にfaviconを導入していないサイトは右のサンプル画像のような感じでブラウザ上に表示されます。白いノートのようなマークです。これだと例えば “お気に入り” 内でさまざまなサイトがズラッと並んでいる時に、あなたのサイトがどれか探すのにちょっと苦労します＾＾； これでfaviconの用途についての説明はおしまいです。
続いてどうやってこのfaviconを作るかです。 世界中の賢く、親切な方々が無料ツールを提供しています。ここでは Favicon maker を利用してみたいと思います。 英語のサイトですが、読まなくて大丈夫です。あなたがする事は・・・ 「Image to create icon from:」 という所から画像をアップロードして【Create Icon】 を押すだけ！ 注意事項として以下の３つがあげられています。
- gif/jpeg/png/bmp のどれかをアップロードすること
- 背景を透明にしたい場合は gif/png を利用すること ※ 背景透明ファイル gif/png ファイル自体はご自身で作成してください。
- アップロードするサイズを 150 KB 以下に抑えること
その後のステップは・・・ これから順を追って説明していきます。
１． まず生成された”favicon.ico” をあなたのサイト（サーバー）へアップロードしてください。階層は（www.yoursite.com/favicon.ico) が一般的です。
※ yoursite.com はここでは（以下も同様）あなたのサイトアドレスの事で、例として使っています。
２． www.yourside.com/index.html 内HTMLソース内の ＜HEAD＞ または ＜head＞ の内部で＜/HEAD＞、＜/head＞でタグが閉じられる前あたりに以下のソースを貼り付けます。
<link rel="shortcut icon" href="/favicon.ico" />
※ 通常はwww.yourside.com/index.html 内に上記のソースコードを貼り付ければ yoursite.com/ 以下のすべてのページに favicon が反映されますが、各社ブラウザの確実なルールが無い為 favicon が下層ページへ反映されないブラウザもあります＾＾； それはヤダ！という場合はアイコンを表示させたいページのすべての＜head＞＜/head＞内に上記ソースコードを貼り付けてください。
３． これで終わりです！
ブラウザによってはfaviconが反映するまで数日かかる事もあります。またブラウザのバグ問題の為、faviconが消えてしまうこともたまにあるようですが、Never mind！そのうち解決されるでしょう。それでは favicon作成に挑戦してみてください♪ Good luck!
丸山 利広 （記事編集者）
イラストレイター、グラフィックデザイナー。 江戸川区出身 － 創価大学法学部卒業、営業職を経た後、オーストラリアに留学。グラフィックデザインを勉強する傍ら 『TMCreation』 というフリーランスの呼称で、現地にてデザイナーとしてのキャリアを踏み出しました。 現在は会社の第一印象を決める良質なロゴデザインの制作、そしてデザイン性と機能性を考えたウェブサイトの開発等に携わっています。 当ウェブサイトのグラフィックデザイン及び、メンテナンスを担当しています。
faviconの作り方、解りました。
って、faviconと言うんですね（汗）
早速・・・その前に作りっぱなしのホームページを
更新するのが先ですね。 次に何を書かれるのか、楽しみにしています♪