ファビコン作成 — サイトに必要なサイズを一度に
画像を1枚入れると、favicon.ico・apple-touch-icon・マニフェスト用アイコンと貼り付け用のタグが揃います。
ここにファイルをドロップ
またはクリックして端末から選択対応形式: JPG, JPEG, PNG, WEBP, AVIF, GIF, BMP, HEIC, HEIF, SVG
1回に1ファイル1ファイル20 MBまで1日5回までProで制限を解除✓ オフラインでも利用可能
ファイルは端末の外に出ません
このツールはブラウザ内だけで動作します。アップロードも保存も行わないため、処理を始める前にインターネット接続を切っても問題ありません。
使用例
例：家庭菜園ブログのファビコン一式を、1024 × 1024のPNGの葉っぱ1枚から
家庭菜園のブログ「ベランダ菜園日記」のロゴは、透明な背景の中央に緑の葉っぱが1枚ある1024 × 1024のPNGです。設定は収め方「全体を収める」、余白10%、形「角丸」、背景「白」、サイト名「ベランダ菜園日記」。
- 上下左右に10%ずつ余白を取るので、葉っぱはアイコンの80%の大きさで描かれます。16pxなら12.8px、180pxなら144px、512pxなら409.6pxです。
- 「ファビコンを作成」を押し、7つのファイルをZIPでダウンロードします。
- ファイルをサイトのルートに置き、favicon-tags.html の4行をすべてのページの head 要素に貼り付けます。
| ファイル | サイズ（px） | 葉っぱの大きさ | 使われる場所 |
|---|---|---|---|
| favicon.ico | 16・32・48 | 12.8・25.6・38.4px | ブラウザのタブ、ブックマーク |
| favicon-96x96.png | 96 | 76.8px | Googleの検索結果（48の倍数） |
| apple-touch-icon.png | 180 | 144px | iPhone・iPadのホーム画面（白い正方形） |
| web-app-manifest-192x192.png | 192 | 153.6px | Android |
| web-app-manifest-512x512.png | 512 | 409.6px | Androidとインストールしたwebアプリ |
| site.webmanifest | – | – | 名前と短い名前「ベランダ菜園日記」、2つのアイコン、色 #ffffff |
| favicon-tags.html | – | – | head 要素に貼る4行 |
白い角丸の正方形に葉っぱがのった7つのファイルができます。Apple用だけはiOSが自分で角を丸めるため、角のない白い正方形です。元がPNGなので favicon.svg は作られません。サイト名は8文字なので、短い名前にもそのまま使われます。
使い方
- ロゴ画像を追加します。正方形のSVGが最適です。PNGやJPGなら512×512px以上のものを使います。
- 正方形への収め方（全体を収めて余白をつける／正方形いっぱいに広げる）と、形・背景を選びます。
- 「ファビコンを作成」を押し、できたファイルをZIPでまとめてダウンロードします。
- ファイルをサイトのルートに置き、favicon-tags.html の内容をページの <head> に貼り付けます。
よくある質問
- ファビコンのサイズは何pxにすればいいですか？
- favicon.ico には16×16・32×32・48×48ピクセルをまとめて入れます。iPhone・iPadのホーム画面には180×180のPNG（apple-touch-icon）、AndroidとWebアプリには192×192と512×512です。Googleの検索結果では48の倍数のサイズで表示されるので、ここでは96×96のPNGも作ります。できるファイルは favicon.ico、favicon-96x96.png、apple-touch-icon.png、web-app-manifest の2つのPNGと site.webmanifest、SVGから作った場合は favicon.svg、それに <head> に貼るタグの入った favicon-tags.html です。
- 背景を透明にしたのに、apple-touch-icon だけ透明になりません。
- iOSはホーム画面のアイコンで透明を表示せず、透明な部分を黒で塗り、角も自動で丸めます。そのためこのファイルだけは、選んだ背景色（透明を選んだ場合は白）で塗りつぶした正方形にしています。ほかのアイコンは透明のままです。
- 元の画像はSVGとPNGのどちらがよいですか？
- SVGがあればSVGです。サイズごとにベクターから描き直すため、16pxのアイコンも大きな画像を縮めたものではなく16pxとして描かれ、最近のブラウザが優先して使う favicon.svg も作られます。PNGやJPGなら512×512px以上のものを使ってください。細かいロゴは16pxではどうしても潰れるので、余白を取ったり、シンプルなマークを使ったりするのが効果的です。
- Googleの検索結果でアイコンが地球マークのままです。
- Googleがアイコンとそれを指定しているトップページの両方をクロールできること、アイコンが正方形で一辺が48の倍数であることが条件です。ここで作る96pxのファイルはそのためのものです。公開後、検索結果に反映されるまで数日から数週間かかることがあります。
- サイト名（任意）は何に使われますか？
- site.webmanifest の名前（name）と短い名前（short_name）になり、スマホのホーム画面にサイトを追加したときなどに表示されます。短い名前はホーム画面のアイコンの下に収まる長さで、全角なら6文字（半角なら12文字）まで。日本語の名前はスペースで区切れないため、それより長いと6文字目で切れます。「はっぱと畑の家庭菜園ノート」なら「はっぱと畑の」です。別の短い名前にしたいときは、site.webmanifest の short_name を書き換えてください。
- アイコンを置き換えたのに、ブラウザのタブが古いままです。
- ブラウザがファビコンを長く保存（キャッシュ）しているためです。ファイルを置き換えたあと、ページを再読み込みしたり、別のブラウザやシークレットウィンドウで開いたりすると、新しいアイコンを確認できます。
- ロゴはアップロードされますか？
- いいえ。すべてのファイルはこのページの中でブラウザの描画機能を使って作り、ZIPもその場でまとめています。サーバーには何も送りません。