blog - みきまるしぇ

用語解説 - favicon (ファビコン) -

 favicon (ファビコン)とは、なんでしょうか?

 おもにパソコンなど画面の大きな環境でインターネットを利用していると、ウェブサイトを見にいったときに履歴やアドレスバーにアイコンが付いていることが、わかる場合があります。スマホやタブレットなどの画面ですと、そのときは気づかないのですが、ブックマークや履歴、よく見にいくサイト一覧で、サイトが名前ではなくアイコンで表示されているのがわかると思います。

 たとえば
Facebookならば、濃い青の背景に白のF F icon 
ツイッターなら明るい青の背景に白い鳩Twitter_Social_96px.png
ですね。

(これらのファイル2点は、FacebookはWiki Commonsからのリンク表示、Twitterは正規のサイトからダウンロードしてきたものをそれぞれ16pxで表示しています)

 こういった仕組みで表示されるものを favicon (favorite icon お気に入りアイコンの略) と呼びます。日本語のカタカナでは、ファビコンです。これはもともとマイクロソフトのブラウザInternet Explorerからはじまったものだと聞いています。しばらくのあいだ、そして現在でも多くの人が、画像ファイルを作成する際に拡張子を .ico としたファイルを利用しています。

(この部分は無駄知識ですが、マイクロソフト系のOSでは拡張子が3文字で処理されてきましたので、.iconであればわかりやすかったところを最後のnをとって.icoとなっています。同様にウェブページの拡張子 ".html"も、マイクロソフト系の環境では.htmと長く表示されてきましたが、正式には最後にlがつくものでした)

 最近はで大きめファイルで作る事例も多いようなのですが、実はこれ、初期のころは律儀に16pixelの正方形で作られていました。その16pxというのは、インターネットでみなさんが日本語の文字をご覧になる場合は12ptというサイズで指定されているサイトが多いですが、これとほぼ同じです。日本語1文字分に画像を入れていたわけで、90年代末ころには、あまり高度な柄は入れられませんでした。

 その後、世の中のパソコンやさまざまな環境の変化で、大き目の正方形ファイルで作っても読める人が増えてきたため、いまでは96pxくらいで作る人もいれば、144pxなどの人もいます。大きく丁寧に作っても、読む人の環境に合わせて縮小表示がなされるので、大きなファイルのまま表示されるということではありません。ただ、大きくすれば相手のパケット代は増えますので、そのあたりの判断から、大きすぎないものを心がけると、よいのかもしれません。

 favicon用のファイルは伝統的には拡張子.icoのものでしたが、最近では、サイトのほうで独自に用意した.pngを使うと宣言してロボットにそれを読ませたり、アップル社のapple-touch-icon.pngを使用している例もあるようです。

 昔ながらの.icoファイルを用意するには、

  • それ専用が可能なソフトをダウンロードして作成——これは、「アイコン作成ができるソフト」などの検索をすれば無料のものも見つかります。わたしは多機能の画像ソフトGIMP(読みはギンプ)というものを使っています。
  • オンラインで作ってくれるサービスもあります。「ファビコン作成」などの検索をしましょう。
  • 自分が.ico以外の形式で持っているアイコンを.icoに変換してくれるサービスもあります。「ファビコン変換」などで検索してみましょう。

 ちなみに当サイトでは、普段の画像作りはAdobe社のPhotoshop Elementsで、数年前のバージョンを使っています。これで画像を作って、ファビコンにする場合は、最後にGIMPで.ico変換しています。

 

   

ウェブサイト用語の基礎知識   2018/10/21   mikimarche
≪ PHPの本  |  Photoshop Elementsを使ったロゴ作成方法 ≫

Comment on this article

Send comments

  ※ Email will not be published