Favicon Generatorは、ファビコン用のデータを生成するためのWEBサービスです。一瞬で色んなサイズのファビコンを生成してくれて、ファビコン設定用のHTMLまで出力してくれます。
Favicon Generatorの使い方
Favicon Generatorにアクセスして、画像をドラッグ&ドロップでアップロードするだけです。
アップロードが完了すると、様々なサイズのファビコン画像がダウンロードされます。ファビコンは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をブックマークしておけば制作がスムーズに進みますね。