ファビコン作成

ファビコンは、ブラウザーのタブやブックマーク、Google の検索結果に表示される小さなアイコンで、スマートフォンではサイトのホーム画面アイコンにもなります。プラットフォームごとに必要なファイルが異なるため、今のファビコンは 1 枚の画像ではなく、いくつかの画像と Web アプリマニフェストのセットです。

PNG、JPG、WebP、SVG のロゴをアップロードして正方形に切り抜くか、文字や絵文字からアイコンを作ります。続いてプラットフォームごとに個別に調整します。デスクトップのブラウザーと Google には背景と角の丸み、iPhone のホーム画面には不透明な背景と余白、Android にはロゴをセーフゾーン内に収めるマスカブルアイコンを設定します。リアルタイムのプレビューでは、ライトモードとダークモードのブラウザータブ、ブックマークバー、Google の検索結果、そして円形・スクワークル・角丸四角形のマスクを適用した iOS と Android のホーム画面を確認できます。

ZIP は最新のベストプラクティスに沿った構成です。16、32、48 px を含む favicon.ico、素材が SVG の場合は favicon.svg（ダークモード対応も可能）、favicon-96x96.png、180×180 の apple-touch-icon.png、192 px と 512 px のマニフェスト用アイコン、site.webmanifest が含まれます。HTML コードをコピーするか、Next.js、React/Vite、WordPress の手順に従って設置し、ファビコンチェッカーで結果を確認しましょう。すべての処理はブラウザー内で行われます。