Formats
ファビコンの背景は透明にすべきか？
透明な背景はブラウザのタブのファビコンに適しており、マークを明るいクロームにも暗いクロームにもきれいに乗せられます。しかし iOS は apple-touch-icon の透過を無視して黒地に合成するため、透明なホーム画面アイコンは黒い正方形の上に浮く図形になりかねません。タブのファビコンには透過を、apple-touch-icon やその他のホーム画面サイズには不透明な背景を使いましょう。
役立つところは透明に、そうでないところは不透明に
タブのファビコンには、透過は利点です。マークがブラウザクロームの色、明るいか暗いかに合わせて適応します。透明な背景が本当に役立つのは、その一つの表示面です。
ホーム画面アイコンは逆です。iOS はアルファチャンネルを落として apple-touch-icon を黒地に合成し、Android のマスカブルアイコンは形に切り抜くために全面の背景を求めます。どちらでも、透明な元画像は誤って見えます。
ファビコンの透過に関するよくある質問
ファビコンの背景は透明にすべきですか？
ブラウザのタブには、はい。明るいクロームと暗いクロームに適応します。apple-touch-icon やその他のホーム画面サイズには、いいえ。不透明な背景を使いましょう。
なぜ iOS のホーム画面アイコンが黒い正方形の上にあるのですか？
iOS が透過を無視して apple-touch-icon を黒地に合成するからです。そのアイコンを不透明な背景の塗りで書き出し直してください。
マスカブルアイコンに背景は必要ですか？
はい。マスカブルアイコンはランチャーによって形に切り抜かれるので、全面の背景を必要とし、マークはセーフゾーンの内側に収めます。