favicons.zip の中身
画像を1枚アップロードするだけで、今のWebサイトに必要なファイルがすべてブラウザ内で作られます。
| ファイル | サイズ | 使われる場所 |
|---|---|---|
favicon.ico |
16・32・48 px を1ファイルに | ブラウザのタブ、ブックマーク、Windows、/favicon.ico を探しに来るあらゆるツール |
favicon-16x16.png |
16×16 | 通常の画面のタブ |
favicon-32x32.png |
32×32 | 高解像度画面のタブ、ショートカット |
favicon-48x48.png |
48×48 | Googleの検索結果、デスクトップのショートカット |
apple-touch-icon.png |
180×180 | iPhone・iPadの「ホーム画面に追加」 |
android-chrome-192x192.png |
192×192 | Androidのホーム画面 |
android-chrome-512x512.png |
512×512 | アプリとしてインストールされたサイト(PWA)と起動画面 |
site.webmanifest |
— | Android/Chromeに大きいアイコン2つの場所を伝える |
README-favicon.html |
— | 貼り付ける HTML タグ |
元画像はどんなものがよいか
- 正方形で、シンプルで、はっきりしたもの。 16 px だとピクセルは全部で256個しかありません。キャッチコピー入りのロゴはただの点になりますが、1文字や記号なら読み取れます。ファビコン専用に簡略化したマークを使うブランドも多くあります。
- 512×512 以上。 いちばん大きいアイコンが512 px なので、それより小さい元画像は拡大されてぼやけます。理想はSVGのロゴで、縮小する前に高解像度で描画されます。
- 透過PNGかSVG。
.icoと小さいPNGでは透過が保たれるので、ブラウザのライトテーマでもダークテーマでもきれいに表示されます。 - 正方形でない場合は? 切り取らずに正方形の中に収め、左右(または上下)は透明な余白になります。正方形いっぱいに使いたいなら、先に トリミング するか、円形切り抜き で丸いバージョンを作りましょう。
Apple touchアイコンの背景
iOSはホーム画面のアイコンに透過を使えず、透明な部分は黒になります。そのため 180×180 の apple-touch-icon.png には必ず塗りつぶしの背景が付きます。初期値は白で、アップロード欄の横にある色の指定でブランドカラーに変えられます(カラーピッカー でロゴから色を拾えます)。ほかのサイズは透過のままです。
ファイルの置き場所
- ZIPを展開し、すべてのファイルをサイトの ルート にアップロードします。
https://yoursite.com/favicon.icoでアイコンが開けばOKです。 README-favicon.htmlのタグを各ページの<head>(またはテーマのヘッダーテンプレート)に貼り付けます。
<link rel="icon" href="/favicon.ico" sizes="any">
<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">
- サイトがサブフォルダにある場合は、パスを書き換えてください。
WordPressなら 外観 → カスタマイズ → サイト基本情報 → サイトアイコン で、512×512の画像1枚から自動で設定できます。android-chrome-512x512.png を使いましょう。Shopify、Wix、Squarespaceなどにも同様の「ファビコン」欄があります。
同梱の site.webmanifest にはアイコンの一覧しか入っていません。サイトをアプリとしてインストールできるようにしたい場合は、name、short_name、theme_color、background_color、"display": "standalone" を追加してください。
「ファビコンを変えたのに古いまま」
ファビコンはサイトの中でもとりわけ強くキャッシュされます。
https://yoursite.com/favicon.icoを直接開いて強制再読み込みします(Ctrl + F5、Macは Cmd + Shift + R)。- リンクにバージョンを付けます。たとえば
href="/favicon.ico?v=2"とすれば、ブラウザは新しいファイルとして扱います。 - CDNやキャッシュ系プラグインを使っているなら、そのキャッシュも削除します。
- ブックマークやホーム画面のショートカットは、作り直すまで古いアイコンのままです。
- Google の検索結果のアイコンは、トップページが再クロールされてから更新されるため、数日から数週間かかることがあります。Googleは一辺が48 px の倍数の正方形アイコンを求めており、48×48のPNGと
.icoがこれを満たします。
関連ツール
- 写真をアイコンにする前に背景を消すなら 背景削除。
- ロゴがWebPしかない場合、編集ソフトで開けなければ PNG に変換しましょう。
- ショップやプロフィール用に512×512の画像がほしいなら 512×512にリサイズ。