画像を整える
初級ファビコン生成を整える。
＝ 1枚の画像から16〜512pxのファビコン一式（PNG と .ico）をまとめて作る
ファビコンが初めての方は、先に そもそもファビコンとは・どんな場面で使うか をどうぞ。
🔒 このページは画像をアップロードしません。処理はすべてブラウザ内で行われ、ファイルが端末の外に出ることはありません（送信ゼロ・広告ゼロ）。
正方形でない画像の扱い
0%で四角のまま、50%で完全な円になります。iOSのアイコンのような丸みは20%前後が目安です。
画像を選ぶと、ここに各サイズのプレビューが並びます。
そもそもファビコンとは
ブラウザのタブに並ぶ、サイトの小さな顔。
ファビコンは、ウェブサイトの名前の横やタブに表示される小さなアイコンです。favorite icon（お気に入りのアイコン）が語源で、サイトを見分ける目印として使われます。
表示される場所によって必要な大きさが違うため、1 枚の画像から複数のサイズを用意し、ページの head に読み込み方を書いておきます。名刺に入れる小さなロゴが、紙の大きさにかかわらず読めるようにしておくのと同じ考え方です。
どこで・どんな場面で出会うか
-
ブラウザのタブ
たくさん開いたタブから、目的のサイトを探す目印になります。
-
ブックマークやお気に入り
登録したサイトが並ぶ一覧で、名前の横に表示されます。
-
スマホのホーム画面に追加したとき
サイトをアプリのように置くとき、専用の大きなアイコンが使われます。
-
検索結果の一覧
サイトによっては、タイトルの近くにアイコンが表示されることがあります。
-
新しくサイトを作ったとき
公開前の仕上げとして、アイコンの用意と設置が必要になります。
知らないと何が困るか
- タブで見分けがつかない。アイコンがないと、ブラウザの標準の絵が出て、他のサイトと区別しにくくなります。
- 細かい絵や文字はつぶれる。16 ピクセルのような小さな表示では、単純な形が向いています。
- 変えても、すぐには反映されない。ブラウザが古いアイコンを覚えていることがあり、切り替わるまで時間がかかることがあります。
上のツールにロゴを入れて、小さなサイズでも見分けられるか、プレビューで確かめてみてください。
なぜ「アップロードなし」と言えるのか
このツールの画像処理は、ページに同梱した処理プログラムがブラウザの中だけで行います。読み込みも、正方形化・角丸の描画も、PNGや.icoを組み立てるのも、すべてこの端末のメモリ内です。開発者ツールの「ネットワーク」タブを開いたまま試しても、画像を送る通信は発生しません。
使い方
ファビコンに必要なサイズと、置き場所。
- 1
用途ごとに必要な寸法が違う。
16px・32pxはブラウザのタブやお気に入りバー、48pxはデスクトップのショートカット、64pxは高解像度ディスプレイ向けです。180pxはiOSのホーム画面に追加したときのアイコン（apple-touch-icon）、192px・512pxはAndroidのホーム画面やPWA（アプリのように動くWebサイト）で使われます。1枚の画像から全サイズを一括生成できるので、サイズごとに書き出す手間はありません。
- 2
.icoとPNG、使い分けは「新しいブラウザはPNGで足りる」。
.ico（Windowsアイコン形式）は16・32・48pxなど複数サイズを1ファイルに詰め込める古い形式で、今でも古い環境や一部のクローラーが探しにいきます。現代のブラウザは
<link rel="icon" type="image/png">だけで十分表示できるため、.icoは「念のため置いておく」の位置づけで構いません。このツールはどちらも生成するので、両方置いておけば安心です。 - 3
SVGファビコンという選択肢もある。
<link rel="icon" type="image/svg+xml" href="/favicon.svg">のようにSVGを直接指定すると、1ファイルでどんな解像度・ダークモードにも対応できます（対応ブラウザのみ）。ただしSafariやIEなど非対応の環境もあるため、このツールが作るPNG/.icoと併用するのが現実的です。元の画像がSVGでも、このツールの出力はラスタ（PNG/.ico）になります。 - 4
置き場所は基本的にサイトのルート直下。
favicon.ico・apple-touch-icon.pngなどをサイトのルート（例: https://example.com/favicon.ico）に置き、<head>内に上のHTMLスニペットを貼るのが最も互換性の高い方法です。ルートに置けない事情がある場合は、スニペットのhrefをそのフォルダのパスに書き換えてください。
- 5
送信ゼロ——画像は端末内で処理。
読み込み・正方形化・角丸・各サイズへの縮小・PNGと.icoの組み立てまで、すべてこのページに同梱したプログラムがブラウザの中だけで行います。画像がサーバーへ送信・保存されることは一切ありません。
このツールについて
- 処理はすべてブラウザ内で完結し、画像がサーバーへ送信・保存されることは一切ありません（送信ゼロ）。元のファイルも変更されません。
- 生成した画像の利用は自己責任でお願いします。著作権・肖像権など第三者の権利に配慮してご利用ください。
- SVGの読み込みはブラウザの対応状況によって失敗する場合があります（内部に外部参照を含むSVG等）。
- HEIC（iPhoneの写真）の読み込みは端末やブラウザの対応状況により失敗する場合があります。
画像を整えるシリーズ
このツールについて
ロゴや写真を1枚選ぶだけで、ブラウザタブ用からiOS・Android・PWA用まで必要なサイズのPNGと.icoを一括生成します。正方形でない画像は中央切り抜き・余白追加のどちらかで正方形にでき、角丸も自由。処理はすべてこの端末のブラウザの中で完結し、画像がサーバーに送られることは一切ありません。
画像1枚から 16〜512px のファビコン一式（PNG＋.ico）を自動生成。中央切り抜き／余白追加で正方形化、角丸も指定できます。アップロードなし。
主な機能
- 16/32/48/64/180/192/512px を一括生成（apple-touch-icon・Android/PWA 含む）
- 正方形でない画像は中央切り抜き／余白追加（背景色指定）
- 角丸 0〜50%
- favicon.ico と各 PNG を個別ダウンロード
- HTML の link スニペットと site.webmanifest をコピー・ダウンロード・送信ゼロ
よくある質問
Q. 画像はアップロードされますか？
A. されません。読み込み・正方形化・角丸・各サイズへの縮小・PNG と .ico の組み立てまで、すべてブラウザ内で完結します。
Q. .ico と PNG は両方必要ですか？
A. 今のブラウザは PNG の link タグだけで表示できますが、古い環境や一部のクローラーは今も .ico を探します。このツールは両方生成するので、両方置いておくと安心です。
Q. 正方形でない画像はどうなりますか？
A. 「中央で切り抜く」（はみ出す部分を捨てる・写真向け）と「余白を足す」（画像全体を残し、背景色で正方形にする・ロゴ向け）から選べます。全サイズに同じ設定が適用されます。
入力値はURLの「#」以降に入るためサーバーには送信されません。リンクを開くと同じ状態を復元します。
