favicon（ファビコン）とは

これまた知らない人はいないだろうとは思いますが、まずはそこから説明させて頂きます。favicon（ファビコン）とは、WEBサイトを表示させた時や、ブックマークをした時に、タブやリストに表示される、サイト特有のロゴみたいなものです。

文章で説明するよりも実際に確認するのが一番早いですね。↓これです。

まぁみなさんご存知だとは思います。

なぜわざわざそんな当たり前のことを説明するのか？

そんな疑問が沸く人の方が多い気がします。WEBサイト制作の初歩中の初歩過ぎて、書く価値すらない記事じゃないかとお叱りを受けても文句は言えないかも・・・

が、しかし

Faivconの作成方法などを検索してみると、大抵が以下のような流れで説明をされています。

1. 画像（縦16px×横16px）を作成する
2. 専用サイトなどで「.ico」ファイルに変換する
3. 画像をアップし、ヘッダーにfaviconへのリンクを記述する
4. おしまい

なのですが・・・・この方法でやると実際に表示されるfaviconがかなり汚いものになってしまうのです。常日頃見ているAppleやGoogleのWEBサイトで表示されるfaviconとは似ても似つかないものになってしまうのです。

縦32px×横32pxで作成

答えはとても単純です。先ほどの手順の「1.画像（縦16px×横16px）を作成する」のところを「縦32px×横32px」にすれば良いだけです。

実際に表示されるのが「縦16px×横16px」だからといって、そのサイズの画像を作って変換してしまうととんでもない粗さになってしまうのです。「縦32px×横32px」の画像をアップし、それが「縦16px×横16px」に表示された方が断然綺麗なのです。

まぁだからといって、それも常識だよ！と言われてしまえばそこまでなんですが、どうもWEB上にはそんな解説をしてあるサイトがなかったのでやってみました。以上です。