恵比寿のWebサイト制作・Webデザインチームのブログ。Webデザインやコーディング、SEO対策まで幅広く手掛けています。

恵比寿のデザイン制作チームのブログです。

Webデザイン、
Web制作、
SEO対策の
ご依頼・ご相談

Contact

ファビコンを一気に作成できるオンラインサービス

投稿日:2018-03-21 更新日:




fav-top

 

ファビコンはブラウザでWebサイトを閲覧した時に、アドレスバーの左側やブックマークの横に表示されるアイコンのことです。

近年は、Windows10のパネルやスマートフォンのホーム画面に表示される様々なサイズのファビコンがあります。

そこで、今回は一つの画像だけで用途に合わせて様々な形式やサイズのファビコンを一気に作成できる非常に便利なオンラインサービスを紹介します。


favicon generator all platforms

 

まず、260px × 260px 以上のファビコンの元となる画像を用意します。
(最低70px × 70px以上でも可能ですが、最適なのは260px以上と書かれています。)

fav-logo

 

次に、「Select your Favicon picture」をクリックし、画像を挿入します。

favicon_generator_1a-1

 

次の画面で、スマートフォンやWindows10等の用途に合わせて、ファビコンの色やサイズ等を設定していきます。
左にプレビューが反映されるのでとてもわかりやすいです。

favicon_generator_2a-1

 

設定できたら下にスクロールして「Generate your Favicons and HTML code」をクリックします。

favicon_generator_3a

 

「Favicon Package」をクリックし、生成されたファビコンのファイルをダウンロードしたら、その下にあるソースコードをhtmlのheadにコピー&ペーストして完了です。

favicon_generator_4a

 

生成されたファイルには様々なサイズや形式のファビコンが入っています。

favicon_generator_5a




この記事をシェアする

  • Twitter
  • Facebook
  • BookmarkB!
  • Pocket

Related Entries

この記事を書いた人

TOM

TOM

Webデザイナー、UI/UXデザインと共にJavascript、PHP等のプログラミング言語について日々勉強中。