ファビコンの背景は透明にするべき？

透明性はブラウザタブで役立ちます

ブラウザはタブ ストリップをユーザーのテーマ カラーでペイントし、その色はライト モードとダーク モードで変わります。背景が透明なので、ブラウザが描画するものの上にマークを配置できます。アートワークに焼き付けられた白い四角形が、暗いタブ上で明るいブロックとして表示されます。

ICO、PNG、SVG はすべてアルファ チャネルを備えているため、ピクセルごとの透明度を保存できます。 JPEG ではそれができません。これが、弱いファビコンソースを作成する理由の 1 つです。見る ファビコンは PNG または JPEG です 形式の比較のため。ソース アートの背景が透明な場合、 ファビコン生成ツール エクスポートされた PNG および ICO ファイルに保存されます。

各アイコンに背景が必要な場所

Apple touch アイコンを不透明のままにする

Apple のホーム画面アイコンは明らかな例外です。 iOS では透明な領域を黒と合成するため、透明なロゴが暗いタイルとしてホーム画面に表示されることがあります。代わりに、背景を塗りつぶした 180x180 PNG をエクスポートします。

<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />

Apple はアイコンのルールを次のように文書化しています。 Web アプリケーションの構成。の Appleタッチアイコンジェネレーター 背景色を選択して、フラット化されたファイルをダウンロードできます。

マスク可能なアイコンにはフルブリードの背景が必要です

Android ランチャーは、マスク可能なアイコンを円、スクワクル、その他の形状にトリミングします。キャンバス全体を背景色で塗りつぶし、ロゴを安全ゾーン内に配置し、中央の円が幅の 80% を占めるようにします。その円の外側にあるものはすべて切り取ることができます。

引き続き、透明なマニフェスト アイコンを配布できます。 purpose: "any" 仮面をかぶったものと並んで。 MDN は、次の両方の値をカバーします。 マニフェスト アイコンのリファレンス、そして マスカブルアイコンジェネレーター アートワークを配置する際の安全領域が表示されます。

両方のテーマのコントラストを確認します

透明性により、コントラストの問題がブラウザに移ります。暗いタブ ストリップでは黒に近いマークが消え、明るいタブ ストリップでは淡いマークが消えます。両方に適した色を選択するか、ロゴの後ろに小さな丸い形を配置して、独自のコントラストを持たせます。

一部のブラウザが適用されます prefers-color-scheme ただし、SVGファビコン内のルールはサポートが異なるため、テーマを認識した SVG を修正ではなくアップグレードとして扱います。明るいタブと暗いタブでアイコンをプレビューするには、 ファビコンプレビュー、次に、ライブ サイトが何を提供しているかを確認します。 ファビコンチェッカー.