画像を、あらゆるサイズのサイトアイコンに変えます。
またはクリック - できればPNG(512×512が理想)
ブラウザのタブ、ブックマーク、履歴、スマートフォンの検索結果、そしてホーム画面に追加したときに、Webサイトを表す小さなアイコンです。ファビコンがないとブラウザは汎用アイコンを表示するため、サイトが未完成に見えてしまいます。
できれば正方形で、512×512ピクセル以上の画像を選んでください。Toolo が次のファイルを作成します。
| ファイル | サイズ | 役割 |
|---|---|---|
| favicon.ico | 16、32、48px | タブとブックマーク(全ブラウザ) |
| apple-touch-icon | 180px | iPhone・iPad のホーム画面 |
| アイコン192 | 192px | Android のホーム画面、PWAマニフェスト |
| アイコン512 | 512px | Webアプリの起動画面 |
favicon.ico をサイトのルートに置きます。ブラウザは自動的に /favicon.ico を探しに行きます。次に、各ページの <head> に対応するタグを追加します。たとえば:
<link rel="icon" href="/favicon.ico" sizes="any"><link rel="apple-touch-icon" href="/apple-touch-icon.png">インストール可能なWebアプリにする場合は、192と512のアイコンを manifest.webmanifest に記載します。
ブラウザはファビコンを長くキャッシュします。強制再読み込みする、シークレットウィンドウで開く、/favicon.ico?v=2 のようにバージョンを付けるなどを試してください。
できれば正方形がおすすめです。正方形でない画像は合わせて変形されるため、少し歪むことがあります。先に「画像を切り抜く」で正方形にしてください。
いいえ。アイコンはブラウザ内で作成され、画像が端末の外に出ることはありません。
はい。ICOファイルでもPNGでも透過は保たれます。
タブ用なら favicon.ico だけで十分です。180、192、512のPNGは、スマートフォンのホーム画面やWebアプリでの見た目を良くします。