今ではiOSやAndoridのことも気にしなくてはなりません。何を気にすべきか、どのOSのどのブラウザでどのような挙動をするのか。それらを詳しく知りたい人は以下の記事をお読みになることをオススメします。faviconやホーム画面アイコンの指定方法2017めちゃくちゃ細かく、OS・ブラウザごとに検証してくれています。この記事では、特に重要な点だけまとめていきます。apple-touch-icon.pngは用意すべきかまず先に結論をいうと、答えは「イエス」。「apple-touch-icon.png」とはiPhoneに使用されるファビコン名です。あればそっちを読みこんでくれるのですが、Safariでホーム画面にお気に入りした場合、apple-touch-icon.pngしか読み込んでくれない。いう仕様になっています。あっても読み込まれません。天下のiPhone様の標準ブラウザのSafariのことですから、ここは無視できないでしょう。AndroidにおいてもChromeでホームに追加した場合はapple-touch-icon.pngしか読み込んでくれないようです。apple-touch-icon.pngは用意すべき、と言えるでしょう。favicon.pngは用意すべきかこちらの答えは「ノー」です。「favicon.png」をAndroid用に用意すべきだと書かれている記事も見かけますが、「favicon.ico」を読み込まずに「favicon.png」だけを読み込む、ような環境はありません。「favicon.ico」さえ用意していれば、png形式は不要です。apple-touch-icon.pngのサイズは複数用意すべき?サイズの用意は1つでいいでしょう。(iPhoneなら120px、iPadなら152px)他の環境では複数読み込んでいるうちの「最初」または「最後」に読み込んだいずれかが読み取られます。適切なサイズを選んでくれるわけではありません。あたりのサイズを1つだけ読み込むのが無難ではないかなと思います。指定し、rel属性はapple-touch-iconとします。まとめるとIE8のことは無視します。