増え続けるfaviconのサイズにも適応!無料のお手軽favicon(ファビコン)作成サービス

SEROの嫁です。
夫とニコ生で喋ったり、ブログに投稿したりしています。
2級ウェブデザイン技能士。

この記事は2017年6月6日に書かれたものです。
現在は内容が古い可能性もありますのでご注意ください。

ウェブサイトを作る上で忘れてはならないのが「favicon(ファビコン)」。

サイトを訪れると、ブラウザのタブの部分や…

ブックマークの先頭にくっついている小さな小さなアイコンがありますよね。

これがfaviconです。

昔はfaviconと言えば「16px × 16px」のサイズだけでしたが、最近では

  • 16px × 16px  IEのタブ
  • 32px × 32px  Chrome、Firefox、Safariなどのタブ
  • 48px × 48px  Windowsのデスクトップ

と様々なサイズがあり、iOSやAndroidだともっと大きなサイズ(152px × 152px)もあります。
スマートフォンやタブレットなどにも対応しようとすると膨大な数になるfaviconを、手作業でひとつひとつ作るのは大変そう…。

でも朗報です!ウェブ上には便利な無料のサービスがたくさんあって、これらのfaviconがあっという間にできちゃうんです。

今回はそんな便利なウェブサービスをご紹介します。

様々なファビコンを一括生成。favicon generator


→ 様々なファビコンを一括生成。favicon generator

マルチアイコン作成サービスといえば「半透過マルチアイコンfavicon.icoを作ろう」が有名ですが、そこと同じ会社が提供するサイトです。

前述のサイトでひとつずつファイルを指定して作ることも可能ですが、この新しいジェネレーターなら「260px × 260px」以上の画像をひとつアップロードするだけで、favicon.icoを含む38個の画像ファイルと、browserconfig.xml、manifest.jsonを一括で生成してくれます。

日本のサイトなので、生成後のサイトへの設置手順なども日本語で詳しく書いてあって助かります。
(背景のパズルには一瞬ギョッとしますが…)

Real Favicon Generator


→ Real Favicon Generator

こちらは海外のサイトですが、同じく画像をひとつ(70px × 70px ~ 260px × 260px)アップロードすれば、一括でfaviconを生成してくれます。

Select your Favicon picture」をクリックしてファイルをアップロードすると、各プラットフォームごとの詳細な設定が表示されます。
生成されたファイルをダウンロードするには、一番下の「Generate your Favicons and HTML code」をクリックします。

Favicon package」をクリックすると、browserconfig.xml、manifest.jsonを含む画像ファイルがダウンロードできます。
また、その下のコードをサイトのヘッダー部分に記述すれば、すぐにfaviconが設置できますよ。親切ですね!

またこのサイトには、サイトのfavicon設置が適切かどうかをチェックしてくれるというサービスもあるんです。
トップページの「Check your favicon」の部分にサイトのURLを入力して「Check Favicon」をクリックするだけ!

全てのブラウザやプラットフォームでのチェックなんてなかなかできませんから、これも嬉しい機能ですね。

というわけで、便利なfaviconサービスのご紹介でした。

変わり続ける仕様に対応していくのはとても大変ですが、こういったツールを賢く、そしてありがたく使わせてもらって乗り越えていきたいですね。

 

One comment on “増え続けるfaviconのサイズにも適応!無料のお手軽favicon(ファビコン)作成サービス

Comments are closed.