AndoroidとiPhoneで表示するファビコンを切り替えたい。

ファビコンジェネレーターというサイト
http://realfavicongenerator.net/
でファビコンを作ってみました。

「favicons」というフォルダには
###バージョンアップ後の「favicons」
android-chrome-192x192.png
apple-touch-icon.png
browserconfig.xml
favicon.ico
favicon-16x16.png
favicon-32x32.png
manifest.json
mstile-150x150.png
safari-pinned-tab.svg

の９つのファイルが入っており、

以下のソースをhead内に組み込むことでファビコンが表示できるようになります。
（PCとスマホのハイブリッドサイトのスマホ側のソースなので
ディレクトリ指定はいじってあります。これも原因なのでしょうか・・・？）
###バージョンアップ後のソース

<link rel="icon" type="image/png" href="../favicons/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="../favicons/favicon-16x16.png" sizes="16x16">
<link rel="manifest" href="../favicons/manifest.json">
<link rel="mask-icon" href="../favicons/safari-pinned-tab.svg" color="#5bbad5">
<link rel="shortcut icon" href="../favicons/favicon.ico">
<meta name="msapplication-config" content="../favicons/browserconfig.xml">
<meta name="theme-color" content="#ffffff">

いつもはこのサイトで角丸のファビコンを作っているのですが、
「丸いファビコンで」という要望があり
ファビコンを角丸ではなく丸型のものにしようと試みました。

透過の丸いpng画像をアップロードすれば簡単！・・・とはなりませんでした。
このファビコンジェネレーターがバージョンアップする以前に作ったサイトでは
上手くいったのですが、、、

ちなみにバージョンアップする以前の「favicons」の中身はもっと大容量で
現在のバージョンの９つのファイルに加えて、
###バージョンアップ以前の「favicons」
android-chrome-36x36.png
android-chrome-48x48.png
android-chrome-72x72.png
android-chrome-96x96.png
android-chrome-144x144.png
apple-touch-icon-57x57.png
apple-touch-icon-60x60.png
apple-touch-icon-72x72.png
apple-touch-icon-76x76.png
apple-touch-icon-114x114.png
apple-touch-icon-120x120.png
apple-touch-icon-144x144.png
apple-touch-icon-152x152.png
apple-touch-icon-180x180.png
apple-touch-icon-precomposed.png
favicon-96x96.png
mstile-70x70.png
mstile-144x144.png
mstile-310x150.png
mstile-150x310.png

があり、
ソースコードは以下のようになっていました。
###バージョンアップ以前のソース

<link rel="apple-touch-icon" sizes="60x60" href="favicons/apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="favicons/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="favicons/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="favicons/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="favicons/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="favicons/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="favicons/apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="favicons/apple-touch-icon-180x180.png">
<link rel="icon" type="image/png" href="favicons/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="favicons/android-chrome-192x192.png" sizes="192x192">
<link rel="icon" type="image/png" href="favicons/favicon-96x96.png" sizes="96x96">
<link rel="icon" type="image/png" href="favicons/favicon-16x16.png" sizes="16x16">
<link rel="manifest" href="favicons/manifest.json">
<link rel="mask-icon" href="favicons/safari-pinned-tab.svg" color="#5bbad5">
<link rel="shortcut icon" href="favicons/favicon.ico">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="msapplication-TileImage" content="favicons/mstile-144x144.png">
<meta name="msapplication-config" content="favicons/browserconfig.xml">
<meta name="theme-color" content="#ffffff">

バージョンアップする前と後で効率化が図られたということでしょうか？

バージョンアップ以前に作成したサイトのファビコンもそうだったことから
iPhoneでは黒い角丸の背景に丸いアイコンが出来るということで納得してもらえました。

しかしAudoroidでは以前のサイトのファビコンは丸く切り取られたものだったのですが、
今回はなぜかiPhone用のファビコンと同じものが出てきてしまいました。
以前作ったものが今は作れない、、、は通りません、、、

android-chrome-192x192.pngの背景だけをピンクに変えたものに作り直しても
背景が黒かったのでAndoroidとiPhoneの切り替えがうまくいっていないのだと思うのですが…

###バージョンアップ後の「manifest.json」

{
	"name": "\u30c7\u30a4\u30b5\u30fc\u30d3\u30b9\u3000\u3044\u308d\u306f\u3000\u82a5\u898b",
	"icons": [
		{
			"src": "favicons\/android-chrome-192x192.png",
			"sizes": "192x192",
			"type": "image\/png"
		}
	],
	"theme_color": "#c7abab",
	"display": "standalone"
}

これで切り替えを行っているのだと思いますが、正直調べても全然分かりません。

むしろなんて調べれば求めてる答えにたどり着くのかすら分かりません、、、
キャッシュの削除も試したり、一度ダウンロードしたファビコンを確かめたりしても
まったく改善しません。

もしかしたら私は見当違いをしているのかもしれません。

どなたかファビコンに詳しい方、ヒントだけでもいただけないでしょうか？
納期が近づいてきていてかなりピンチです、、、助けてください、、、