プラットフォームごとに参照するファイルが違うからです。ブラウザはタブやブックマークで 16 px と 32 px のアイコンを使い、iOS はサイトをホーム画面に追加したときに 180 px の apple-touch アイコンを使い、Android は manifest を読んで 192 px と 512 px のアイコンを探します。1 つしか用意しないと、残りはぼやけた画像や汎用アイコンにフォールバックしてしまいます。
アイコンの場所をブラウザに伝える <link> と <meta> タグの集まりです。ページの <head> に貼り付けてください、これがないと、ファイルはサイトのルートに置かれたままで、ほとんど見つけてもらえません。
透明がより安全な既定値で、ブラウザのタブでも自然に見えます。マークが暗い色で、暗いタブバーの上に置かれる可能性がある場合や、iOS のホーム画面でアイコン背後に同じ色を出したい場合は単色を選んでください。iOS はどのみち透明を白にフラット化します。
いいえ。リサイズも ICO のパッキングも manifest の生成も、すべてブラウザ内で行われます。画像が端末から出ることはありません。
