ファビコン・ウェブクリップアイコンを一瞬で作成して簡単に設置する技
ファビコンの設定には様々諸説ありますが私は最低限のことしかしていません。。
なぜならあまり困らなかったから。。（そんなことでいいのか…）
マルチアイコンのファビコンがめっちゃ楽に作れる
これすごい楽です。
アイコン一枚ピッとアップするだけで、必要なサイズ全部出してくれるだけでなく、favicon.icoをマルチアイコンにしてくれる。
使い方
（１）まずアイコンを作成します。私は500✕500pxくらいで作ってます。このあと少し解説します。
（２）その後上記サイトにアクセスし「画像ファイルを選択」からアイコンをアップ。ドラッグ＆ドロップでもいいです。
（３）「ファビコン一括生成」をクリック。
（４）画像ができるので「ファビコンダウンロード」
おわり。たったこれだけで、ファビコンの作成が完了しました。
設置方法その１ 簡易的に設置
色々設定することもあるのですが、締切重視の場合は私は…
apple-touch-iconとfavicon.icoの２つのみ設置します。
ダウンロードしたzip内にある
・apple-touch-icon.png
・favicon.ico
この２点を、ルートディレクトリ（ドメイン直下）にアップするだけ。
自動的にアイコンが反映されます。
されない場合は以下をヘッダーに挿入してください。
<link href="favicon.ico" rel="shortcut icon" /> <link href="apple-touch-icon.png" rel="apple-touch-icon" >
これで表示されます。
設置方法その２ マルチデバイス最適化
ダウンロードしたzip内のファイル全てをルートディレクトリ（ドメイン直下）にアップします。その後、先程アップしたページの下方にhtmlが載ってますので、そちらをコピーし、ヘッダー内に貼り付けます。
様々なファビコンを一括生成。favicon generator
以下引用：様々なファビコンを一括生成。favicon generator
<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">
こんな感じでした。
以上で簡単にマルチアイコンの作成が完了しました。
ウェブクリップアイコンの作成上注意点
先程の使い方（１）で、アイコンを作成とありますが、アイコン作成の際の注意点をご紹介しますね。
そもそも、ウェブクリップアイコン＝アップルタッチアイコンと同等かと思うのですが、今回は「ウェブクリップアイコン」と呼びます。
ウェブクリップアイコンとは、スマホなどでホーム画面に追加した際に表示されるアイコンのことですね。
私はfavicon.icoもこちらのアイコンを元に作って、先程のサイトでリサイズ・生成してもらいます。
ファビコンとはお気に入りしたときのアイコン、PCブラウザ上で開くと、タブの左隣に表示されるアイコンのことです。
ファビコンは小さいサイズになりますので、かつてはドット絵などで必死に作っていました…。
ディスプレイの解像度が増してからは、あまりドット絵も使わなくなった気がします。
さてそのfaviconの元になるウェブクリップアイコン。
私はいつも500✕500pxくらいで作っておきます。大きい方があとあとリサイズのときに便利なので。。
それに追加して、一つ注意しておくことがあります。
Androidは自動的に角丸にはならない
そうです、上記しましたとおり、Android端末でホーム画面に追加しても、アイコンは角丸にはなりません。
ちなみに、iPhoneでは角丸になるのです。勝手になるのです。
そこで、あらかじめ少し角を丸くしておく
Androidで真四角に表示したい方には意味がないのですが、Androidでも角丸で表示させたい！という方はぜひ、アイコン作成の際に、あらかじめ角を丸く作成し、透過PNGで保存しましょう。
ただし、角丸はiPhoneで表示されるアイコンの角丸より小さくしなければなりません。
iPhoneでは自動的に角丸になるため、その角丸より大きい場合は透過させた部分が黒くなってしまいます。
なので、例えば500pxでアイコンを作成した場合は、角丸を50pxほどに指定するのが良いかなと思います。
iPhoneの角丸は結構丸みがあるので、500pxに対して50pxほどのRであれば透過部分が表示されず切り取ってもらえます。
一枚作ればiPhoneにもAndroidにも使えるアイコンに
今までiPhone用、アンドロイド用と作ってたこともありました。
Androidでは自動的に角丸にならないので、そのかわりに円形にしたり、指定した形に透過して、オリジナリティも出しやすいかもしれません。
ただ、角丸で統一するのも、統一感もありますし、何よりこちらの画像一枚でどちらにも対応することができます。
作成のサイトに合う形で、アイコン作成の際はぜひお試しくださいね。
