ファビコンを作成する
画像を1枚入れると、favicon.ico・apple-touch-icon・マニフェスト用アイコンと貼り付け用のタグが揃います。
ここにファイルをドロップ
またはクリックして端末から選択対応形式: JPG, JPEG, PNG, WEBP, AVIF, GIF, BMP, HEIC, HEIF, SVG
1回あたり3ファイルまで1ファイル20 MBまで1日10回までProで制限を解除✓ オフラインでも利用可能
ファイルは端末の外に出ません
このツールはブラウザ内だけで動作します。アップロードも保存も行わないため、処理を始める前にインターネット接続を切っても問題ありません。
使い方
- ロゴ画像を追加します。正方形のSVGが最適です。PNGやJPGなら512×512px以上のものを使います。
- 正方形への収め方（全体を収めて余白をつける／正方形いっぱいに広げる）と、形・背景を選びます。
- 「ファビコンを作成」を押し、できたファイルをZIPでまとめてダウンロードします。
- ファイルをサイトのルートに置き、favicon-tags.html の内容をページの <head> に貼り付けます。
よくある質問
- どんなファイルができて、それぞれ何に使いますか？
- favicon.ico は16・32・48pxを1つにまとめたもので、/favicon.ico を直接取りに来るブラウザや検索エンジン向けです。favicon-96x96.png は検索結果に表示されるアイコン用（Googleは48の倍数のサイズを推奨しています）。apple-touch-icon.png（180px）はiPhone・iPadのホーム画面用、web-app-manifest の2つのPNGと site.webmanifest はAndroidやインストールされたWebアプリ用です。SVGから作った場合は favicon.svg も加わり、favicon-tags.html には <head> に貼るタグが入っています。
- 背景を透明にしたのに、apple-touch-icon だけ透明になりません。
- iOSはホーム画面のアイコンで透明を表示せず、透明な部分を黒で塗り、角も自動で丸めます。そのためこのファイルだけは、選んだ背景色（透明を選んだ場合は白）で塗りつぶした正方形にしています。ほかのアイコンは透明のままです。
- 元の画像はSVGとPNGのどちらがよいですか？
- SVGがあればSVGです。サイズごとにベクターから描き直すため、16pxのアイコンも大きな画像を縮めたものではなく16pxとして描かれ、最近のブラウザが優先して使う favicon.svg も作られます。PNGやJPGなら512×512px以上のものを使ってください。細かいロゴは16pxではどうしても潰れるので、余白を取ったり、シンプルなマークを使ったりするのが効果的です。
- Googleの検索結果でアイコンが地球マークのままです。
- Googleがアイコンとそれを指定しているトップページの両方をクロールできること、アイコンが正方形で一辺が48の倍数であることが条件です。ここで作る96pxのファイルはそのためのものです。公開後、検索結果に反映されるまで数日から数週間かかることがあります。
- ロゴはアップロードされますか？
- いいえ。すべてのファイルはこのページの中でブラウザの描画機能を使って作り、ZIPもその場でまとめています。サーバーには何も送りません。