様々なデバイスに対応したFaviconに一括変換してくれるReal Favicon Generatorが便利！
今回紹介するのはサイトのFaviconを様々なデバイスに対応した状態で一括変換してくれる「Real Favicon Generator for all platforms」です。スマートフォンのiOS/Android、PCのWindows/Macなどで対応したFaviconを一括生成してくれます。Faviconと言えば基本的にfavicon.icoを指しますが、ここ最近ではスマートフォン向けの「ホームに追加」した際のアイコンも用意しなければなりません。大きなFavicon画像さえ用意すればあとはこのサイトで変換するだけで簡単にマルチデバイスで対応して使えるようになります。
画像を変換してくれるだけでなく、表示用のタグも作成してくれます。なので、一括変換したFaviconファイルをサーバー上にアップロードして、それらの表示用タグをコピーしてhtmlテンプレートのhead内にコピー＆ペーストしてあげるだけで使えるようになります。
Faviconとは？
favicon（ファビコン）は、ウェブサイトのシンボルマーク・イメージとして、ウェブサイト運営者がウェブサイトやウェブページに配置するアイコンです。サイトを表示すると上のタブにアイコンが表示されるのがファビコンです。お気に入りやブックマークしたときにも用いられており、favorite icon（フェイバリット・アイコン：お気に入りアイコン）という英語の語句を縮約したもの。
サイトを作る上でFaviconは何げに重要です。サイトを表示すればそのファビコンはまず間違いなく表示されますし、複数のタブを開いているときはそのアイコンで認識する際にも役に立つので、ひと目でそのサイトであるとわかりやすいファビコンが求められます。
Faviconをマルチデバイスに対応で一括変換する方法！
Real Favicon Generator for all platformsにアクセスして、「Select your Favicon picture」を押して、一括変換したいファビコンの画像ファイルを選択します。※最小画像サイズは70x70の画像（PNG、JPG、SVG）で、最適な結果を得るには画像は260x260以上にする必要があります。
Favicon Generator for all platforms: iOS, Android, PC/Mac...
Favicon for iOSやFavicon for Android Chromeなど設定を変えることができます。基本的にはデフォルトのままで大丈夫です。
一通り設定を確認したら「Generate your Favicons and HTML code」を押します。
これでFaviconは完成したので「Favicon package」を押して、Faviconをダウンロードしてきます。自分のサイトのhtmlのhead内に表示されているコードをコピーして貼り付けて保存をします。
ダウンロードしたzipファイルを解凍すると様々なデバイス向けのFaviconファイルが用意されています。これらを自分のサイトのサーバー上にアップロードします。これでマルチデバイスでのFaviconの設定は完了です。
最後にFavicon Checkerを使って、Faviconが正しく設定されているか確認して問題なければOKです！
これでスマホで「ホームに追加」を押したときに表示されるアイコンも設定完了です。実際に追加してみるとこんな感じになります。
今回の個人的感想
今回はファビコンを一括変換可能なサイトの「Real Favicon Generator for all platforms」の紹介でした。サイトを作っている人にとっては馴染みがあるファビコンですが、それ以外の人にはあまり意味のない記事かもしれませんね。しかし、ファビコン自体はサイトを表示する上で誰しも目にするものなので、無下にもできません。
サイトを表示する際にタブにファビコンが表示されますし、ブックマークした際にもファビコンが表示されます。最近だとスマートフォンで「ホームに追加」をした際にも使われます。設定しないとデフォルトのサイトの頭文字を使った適当なアイコンで表示されるようになります。スマートフォン用のファビコンは別途サイズの大きいpngファイルを用意しないといけないのですが、それも含めてこのサイトでは作ってくれるのでありがたいですね。
このサイトはスマートフォン用のアイコンは用意してなかったので、デフォルトの適当アイコン画像でしたが、これからはしっかりとしたアイコンが表示されるようになりました。ぜひサイトを作っている方は「Favicon Generator for all platforms」を活用してみてはいかがでしょうか？