favicon生成
公開前に、ブラウザタブ、iOS、Android、PWAが求めるfaviconとアプリアイコンのセットを用意します。
画像をアップロード
PNG、JPG、SVG に対応。512x512 以上の元画像が扱いやすいです。
ライブプレビュー
HTMLスニペット
<!-- Add inside <head> --> <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"> <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"> <link rel="manifest" href="/site.webmanifest">
favicon の基本
複数サイズが必要な理由
タブ、ブックマーク、固定タブ、インストール案内、スマートフォンのショートカットでは別サイズが要求されます。一式用意すると小さい画像の拡大でぼやけにくくなります。
PNG と ICO
現在のブラウザはPNGをよく扱えます。ICOは古い環境への対応に役立ち、PNGは透明度や素材管理が簡単です。
小さい表示を前提にする
faviconは16x16で見られることがあります。細部の多いロゴより、単純な形と強いコントラストが残りやすいです。
プラットフォーム別アイコンガイド
デスクトップブラウザ
タブ、ブックマーク、ブラウザ履歴で使われます。
iOS / iPhone
ホーム画面に追加されたときに使われます。背景が不透明なアートワークが扱いやすいです。
Android Chrome
Web Manifestと一緒に、インストール案内、スプラッシュ画面、タスク切り替え画面で使われます。
設置手順
ダウンロードして展開
ダウンロードボタンからPNG素材、manifest、headスニペットを含むzipを保存します。
public root に置く
展開したファイルを、サイトのpublicディレクトリなど外部から読める場所に置きます。
head markup を追加
生成されたheadスニペットをdocument headに入れ、ブラウザキャッシュを消して新しいアイコンを確認します。
よくある質問
zip ファイルには何が入っていますか？
ブラウザ用favicon PNG、Apple touch icon、Androidアイコンサイズ、site.webmanifestが含まれます。
site.webmanifest とは何ですか？
サイトをホーム画面に追加したりアプリのように開いたりするときの表示情報をブラウザに伝えるJSON manifestです。
生成した icon はどう使いますか？
生成ファイルをpublic rootに置き、faviconを表示したいページのheadにスニペットを追加します。
古い favicon がまだ表示されるのはなぜですか？
ブラウザはfaviconを強くキャッシュします。ハードリロード、サイトデータ削除、アイコンURL変更、別プロファイルでの確認を試します。
favicon はアプリアイコンと同じにすべきですか？
関連して見える必要はありますが、同一でなくても構いません。小さいfaviconでは単純化したマークを使うことも多いです。