ファビコン作成
ファビコンには複数のサイズが必要です。ブラウザ用の16・32・48px、Apple端末用の180px、Webアプリ用の192・512pxです。このツールはそのすべてと、複数サイズ入りのfavicon.icoを作ります。アップロードはありません。
使い方
- 「文字・絵文字」を選んで1〜3文字を入力するか、「画像」を選んでロゴをドロップします(50MBまで)。正方形でない画像は中央を基準に切り取られます。
- 背景色、文字色、形を選びます。角を透かしたいときは「背景を透明にする」をオンにしてください。Apple用アイコンだけは常に単色の背景になります。
- 各ファイルのダウンロードボタンで保存し、linkタグはページのheadへ、マニフェストはsite.webmanifestというファイルにコピーして使います。ファイルはすべてサイトの最上位フォルダに置きます。
計算方法
サイズごとに別のキャンバスに描きます。大きな画像は最後の縮小の前に半分ずつ小さくして、16pxでも細い線が読めるようにします。文字は測った高さで中央に合わせ、はみ出す場合は自動で縮めます。
favicon.icoはこのページがバイト単位で直接作ります。6バイトのヘッダー、サイズごとに16バイトのエントリ、その後ろにPNGファイルそのものが続きます。最新のブラウザとWindowsはICO内のPNGを読めるので、1ファイルで16・32・48pxをまかなえます。
サーバーに送るものはありません。画像はブラウザが直接読み、アイコンはこのタブの中にしかなく、ダウンロードを押すと端末にそのまま保存されます。
サイズごとの用途
| ファイル | サイズ(px) | 用途 |
|---|---|---|
| favicon.ico | 16, 32, 48 | ブラウザのタブ、古いブラウザ、Windows |
| favicon-32x32.png | 32 | 高解像度画面のタブとブックマーク |
| apple-touch-icon.png | 180 | iPhone・iPadのホーム画面 |
| android-chrome-192x192.png | 192 | Androidのホーム画面 |
| android-chrome-512x512.png | 512 | Androidのスプラッシュ画面、インストール型アプリ |
ファイルを置く場所
すべてのファイルをサイトの最上位フォルダに置き、あなたのサイト.com/favicon.icoでアイコンが開くようにします。ブラウザはタグがなくても/favicon.icoを自分で取りに行きます。ファビコンを変えた後は、ブラウザのキャッシュのためタブにしばらく古いアイコンが出ることがあります。アイコンのアドレスを直接開いて再読み込みすると確認できます。
よくある質問
ロゴはアップロードされますか?
いいえ。画像の描画とエンコードはすべてこのブラウザのタブ内で行われます。アップロードもアカウントもなく、他の場所にコピーが残ることもありません。
最低限必要なファイルは何ですか?
サイトのルートにあるfavicon.icoが1つあれば、ほとんどのブラウザで表示されます。32pxのPNG、180pxのApple Touch Icon、192・512pxのアイコンを加えると、タブ、ブックマーク、iPhoneのホーム画面、Androidへのインストールまで対応できます。
Apple用アイコンはなぜ角丸でも透明でもないのですか?
iOSが角を自動で丸くし、透明な部分は黒く表示します。そのため180pxのアイコンは、ホーム画面で正しく見えるよう、常に単色背景の正方形で作ります。
どんな画像から始めればよいですか?
ロゴが中央にあり、周りに少し余白がある512×512px以上の正方形PNGが向いています。細かい絵柄は16pxでは判別しにくいため、シンプルなマークや1文字がいちばん合います。
絵文字が他の端末で違って見えることはありますか?
絵文字はお使いの端末のフォントで描かれるため、アイコンにはその端末の絵柄が使われます。一度保存したPNGは変わらないので、訪問者にはみな同じ絵に見えます。