ファビコンガイド
ファビコン作成時の疑問にわかりやすく答えます。必要なサイズ、形式、貼り付けるコードを確認できます。
ファビコンのサイズ：形式と用途
「ファビコン サイズ」で検索すると、2014年ごろの15ファイル構成が今でも見つかります。実際には現在、6種類のサイズでタブ、検索結果、iOS、Android、PWAをカバーできます。必要なサイズとその理由を紹介します。
ガイドを読むPNGをICOに無料変換
サイトのルートには今も.ico形式が期待されていますが、多くのオンライン変換ツールは画像のアップロードを要求します。画像を送信せず、PNGから正しい複数サイズのfavicon.icoを作る方法を紹介します。
ガイドを読むapple-touch-icon：サイズ・形式・コード
Apple Touchアイコンは、訪問者がサイトをiPhoneのホーム画面に追加した際に使う画像を明示します。ブラウザのタブ用ファビコンやWebアプリマニフェストのアイコンとは別のものです。
ガイドを読むSVGでファビコンをダークモードに対応
透明背景の黒いロゴは、明るいタブではきれいでも暗いタブでは見えなくなります。ICOは切り替えられませんが、SVGファビコンならブラウザのテーマに応じて色を変えるCSSルールを含められます。
ガイドを読むHTMLにファビコンを追加
確実に表示されるファビコンは、特別なタグひとつで実現するものではありません。アクセス可能な少数のファイルとhead内のリンクを組み合わせます。古い形式をむやみに増やさず、最新のタブ、旧式クライアント、モバイルのショートカットに対応する手順です。
ガイドを読むファビコンが表示・更新されないとき
ファビコンが表示されない原因は、必ずしもファイル自体とは限りません。ブラウザ、CDN、サービスワーカー、検索エンジンが、それぞれ違う版を保持している可能性があります。順序立てて調べることで、複数の条件を同時に変えずに原因を絞れます。
ガイドを読むNext.js App Routerのファビコン
App Routerでは、規約に従ったファイルかmetadataオブジェクトからアイコン要素を生成できます。どちらも有効ですが、ルールを決めずに混在させると宣言が競合しやすくなります。
ガイドを読むSVGファビコンガイド
SVGはどの画素密度でも輪郭が鮮明で、テーマに応じて色を変えられます。その柔軟さを活かすには、単体で完結し、小さな領域でもわかるシンプルなファイルにする必要があります。
ガイドを読む