2021年のためのFavicon整理

• ブラウザ仕様によって多数のファイルが必要になるが、これを1つに整理

• 5つの画像と1つのJSONファイル

→ .ico 32x32 : 古いブラウザ向け

→ .svg : スケーリング可能、多くの最新ブラウザ向け、ダークモードにも対応

→ apple-touch-icon 180x180 : Appleデバイス向け。iOS 8以降は180x180サイズ。20px程度のパディングと背景色を入れると見栄えが良い

→ manifest (JSON) : PWAおよびAndroidデバイス向け

→ 192x192 : ホームスクリーン用

→ 512x512 : PWA読み込み時のスプラッシュスクリーン用

• 記事では、この5つのアイコンを1つのSVGから作成して最適化する方法を段階的に説明