みなさんウェブサイト公開前に必ずappletouch-iconやfaviconを設置すると思います。
そんなときに便利なツールをご紹介します。
私も以前まではそれぞれ『appletouch-icon.png』を作成して、さらに『favicon.png』を『favicon.ico』に変換してhead部分に
それらを設置していました。
それでも十分なのですが、もっとさくっと設置する方法があります。
それが以下のサイトです。
【URL】ファビコン一括作成
私は大体600px、600pxでファビコン画像をPNGで作成し、このサイトに投入しています。
それだけで様々なサイズのappletouch-iconとfaviconが自動で生成され、一括でダウンロードすることができます。
設置方法は上記URL先にも記載してありますが、生成されたappletouch-iconやfaviconを、ウェブサイト階層の特定のフォルダに入れて
以下のソースを記載するだけです。
<meta name="msapplication-TileColor" content="#2d88ef"> <meta name="msapplication-TileImage" content="/mstile-144x144.png"> <link rel="shortcut icon" type="image/vnd.microsoft.icon" href="/favicon.ico"> <link rel="icon" type="image/vnd.microsoft.icon" href="/favicon.ico"> <link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png"> <link rel="apple-touch-icon" sizes="60x60" href="/apple-touch-icon-60x60.png"> <link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png"> <link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon-76x76.png"> <link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png"> <link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png"> <link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144.png"> <link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png"> <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png"> <link rel="icon" type="image/png" sizes="36x36" href="/android-chrome-36x36.png"> <link rel="icon" type="image/png" sizes="48x48" href="/android-chrome-48x48.png"> <link rel="icon" type="image/png" sizes="72x72" href="/android-chrome-72x72.png"> <link rel="icon" type="image/png" sizes="96x96" href="/android-chrome-96x96.png"> <link rel="icon" type="image/png" sizes="128x128" href="/android-chrome-128x128.png"> <link rel="icon" type="image/png" sizes="144x144" href="/android-chrome-144x144.png"> <link rel="icon" type="image/png" sizes="152x152" href="/android-chrome-152x152.png"> <link rel="icon" type="image/png" sizes="192x192" href="/android-chrome-192x192.png"> <link rel="icon" type="image/png" sizes="256x256" href="/android-chrome-256x256.png"> <link rel="icon" type="image/png" sizes="384x384" href="/android-chrome-384x384.png"> <link rel="icon" type="image/png" sizes="512x512" href="/android-chrome-512x512.png"> <link rel="icon" type="image/png" sizes="36x36" href="/icon-36x36.png"> <link rel="icon" type="image/png" sizes="48x48" href="/icon-48x48.png"> <link rel="icon" type="image/png" sizes="72x72" href="/icon-72x72.png"> <link rel="icon" type="image/png" sizes="96x96" href="/icon-96x96.png"> <link rel="icon" type="image/png" sizes="128x128" href="/icon-128x128.png"> <link rel="icon" type="image/png" sizes="144x144" href="/icon-144x144.png"> <link rel="icon" type="image/png" sizes="152x152" href="/icon-152x152.png"> <link rel="icon" type="image/png" sizes="160x160" href="/icon-160x160.png"> <link rel="icon" type="image/png" sizes="192x192" href="/icon-192x192.png"> <link rel="icon" type="image/png" sizes="196x196" href="/icon-196x196.png"> <link rel="icon" type="image/png" sizes="256x256" href="/icon-256x256.png"> <link rel="icon" type="image/png" sizes="384x384" href="/icon-384x384.png"> <link rel="icon" type="image/png" sizes="512x512" href="/icon-512x512.png"> <link rel="icon" type="image/png" sizes="16x16" href="/icon-16x16.png"> <link rel="icon" type="image/png" sizes="24x24" href="/icon-24x24.png"> <link rel="icon" type="image/png" sizes="32x32" href="/icon-32x32.png"> <link rel="manifest" href="/manifest.json">
もちろんhref部分は、自分が設置したフォルダの改装にソースを変更してくださいね！
これで楽々設置完了です！
みなさんもぜひ試してみください♪