プラットフォームごとに、見に行くファイルが違うからです。ブラウザはタブやブックマークで16 pxと32 pxのアイコンを使い、iOSはホーム画面に追加されたときに180 pxのapple-touchアイコンを使い、Androidはマニフェストを読んで192 pxと512 pxのアイコンを探します。1つだけ用意すると、ほかはぼやけた画像や汎用のアイコンになります。
アイコンの場所をブラウザに伝える、<link>タグと<meta>タグのまとまりです。ページの<head>に貼り付けてください。これがないと、ファイルはサイトのルートに置かれていても、ほとんど見つけてもらえません。
透明のほうが無難で、ブラウザのタブでも自然に見えます。マークが暗い色で、暗いタブバーに重なりそうな場合や、iOSのホーム画面で、アイコンの後ろに同じ色を置きたい場合は、単色を選んでください。iOSは、透明をどのみち白にしてしまいます。
いいえ。リサイズ、ICOへのまとめ、マニフェストの作成は、すべてブラウザ内で行います。画像は端末から出ません。
