画像をアップロードするだけで色んなサイズのファビコンをサクッと生成できるWEBサービス「Favicon Generator」

画像をアップロードするだけで色んなサイズのファビコンをサクッと生成できるWEBサービス「Favicon Generator」

画像をアップロードするだけで色んなサイズのファビコンをサクッと生成できるWEBサービス「Favicon Generator」

Favicon Generatorは、ファビコン用のデータを生成するためのWEBサービスです。一瞬で色んなサイズのファビコンを生成してくれて、ファビコン設定用のHTMLまで出力してくれます。

Favicon Generatorの使い方

Favicon Generatorにアクセスして、画像をドラッグ&ドロップでアップロードするだけです。

faviconの生成

アップロードが完了すると、様々なサイズのファビコン画像がダウンロードされます。ファビコンはZIPでダウンロードされ、解凍すると以下のファイルが入っています。

  • 16px*16px
  • 32px*32px
  • 48px*48px
  • 57px*57px
  • 64px*64px
  • 72px*72px
  • 114px*114px
  • 120px*120px
  • 144px*144px
  • 152px*152px
  • 256px*256px
  • favicon.ico
  • favicon.jade
  • favicon.html

favicon.html内には、以下のようにファビコンを設定するためのHTMLが記述されています。


<!-- Favicons Generated with favicon.il.ly -->
<link rel="icon" sizes="16x16 32x32 48x48 64x64" href="favicon.ico"/>
<!--[if IE]>
<link rel="shortcut icon" href="favicon.ico"/>
<![endif]-->
<!-- Optional: Android & iPhone-->
<link rel="apple-touch-icon-precomposed" href="favicon-152.png"/>
<!-- Optional: IE10 Tile.-->
<meta name="msapplication-TileColor" content="#FFFFFF"/>
<meta name="msapplication-TileImage" content="favicon-144.png"/>
<!-- Optional: ipads, androids, iphones, ...-->
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="favicon-152.png"/>
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="favicon-144.png"/>
<link rel="apple-touch-icon-precomposed" sizes="120x120" href="favicon-120.png"/>
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="favicon-114.png"/>
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="favicon-72.png"/>
<link rel="apple-touch-icon-precomposed" href="favicon-57.png"/>

画像をアップして、コピペで完了ですね。

あとがき

サイトを制作したらファビコンは必ずといって良いほど設置するので、Favicon Generatorをブックマークしておけば制作がスムーズに進みますね。

この記事が気に入ったら
いいね!してね♪

Twitter で

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です