ファビコン作成
1枚の画像から、ブラウザのタブに出る favicon.ico、iPhoneのホーム画面用 apple-touch-icon.png、Android・PWA用の icon-192/512.png を一気にまとめます。画像は端末内だけで処理され、サーバーに送信されません。
このツールの特徴
- 1ファイルにマルチサイズ：16/32/48pxを束ねたPNG入りICOを生成。
- スマホ・PWAも一発：apple-touch-icon 180px＋PWA 192/512pxを同梱。
- 端末内処理：画像はサーバーに送信されません。安全に使えます。
- 設置手順メモ同梱：HTMLとmanifest.jsonの書き方をZIPに同梱。
使い方（5ステップ）
- 512px以上の正方形PNG/JPGを選択（正方形でない画像は中央自動切り抜き）。
- 16/32/180/512pxプレビューで小サイズの視認性を確認。
- 「ZIPで一括ダウンロード」を押すとfavicon.ico＋PNG3種＋使い方.txtが入ったZIPが生成。
- ZIP展開後、favicon.ico／apple-touch-icon.png／icon-192/512.pngをサイトのルートにアップロード。
- HTMLの
<head>に<link rel="icon">と<link rel="apple-touch-icon">を記述して完了。
使い方とファビコンのしくみ
元になる画像は、できれば512px以上の正方形のPNGかJPGを選んでください。 正方形でない画像は中央を自動で切り抜きます。16pxまで小さくなるので、細かい文字よりシンプルなマークのほうがはっきり見えます。 ボタンを押すと、ZIPの中に favicon.ico／apple-touch-icon.png／icon-192.png／icon-512.png＋使い方.txt が入った一式が作られます。 画像処理はすべてあなたのブラウザの中で行われ、サーバーに送信されません。
favicon.ico は、Microsoft の ICO 形式という1つのファイルに複数の解像度を入れられる仕組みです。 本ツールは 16・32・48px の3サイズをまとめた favicon.ico を作ります。 ブラウザはタブで表示するとき16px、ブックマークで32px、デスクトップショートカットで48pxといったように、 場面に応じて最適なサイズを自動で選んで表示します。MDN の解説どおり、ICO は1ファイルに複数アイコンを保存できる珍しい形式で、PNG入りICOは2026年現在、主要ブラウザがすべて対応しています。
スマホ用には別ファイルが必要です。iPhoneがホーム画面に追加するときに使うのが apple-touch-icon.png（180×180px）。 Android Chrome や PWA（ホーム画面追加でアプリのように使える仕組み）が使うのが icon-192.pngと icon-512.pngです。 MDN の Web App Manifest icons メンバーの仕様によれば、PWA対応サイトでは manifest.json の icons 配列に src／sizes／type を書き、必要なら purpose: "maskable" を指定します。 本ツールが出すサイズはこの推奨慣行に沿った最小セットです。
設置場所はサイトの一番上の階層（ルート）が基本です。https://あなたのサイト/favicon.ico と https://あなたのサイト/apple-touch-icon.png という場所に置いておけば、 HTMLに <link> タグを書かなくても、ブラウザと iOS が自動で読みに来ます。 ただし明示的に書いておくのが安全です。HTMLの <head> に <link rel="icon" href="/favicon.ico" sizes="32x32"> と <link rel="apple-touch-icon" href="/apple-touch-icon.png"> を書けば、 HTML Living Standard の rel=icon 仕様（2026-06-15 最終更新）どおり、ブラウザが type／sizes をヒントに最適なファイルを選びます。 PWA を目指す場合は manifest.json も <link rel="manifest" href="/manifest.json"> で読み込みます。 作成したZIPには設置手順を書いた 使い方.txt を同梱しているので、そのまま制作会社や社内ITに渡せます。
こんなときに便利
WordPress や Wix・STUDIO のサイトアイコン
「サイトアイコンに 512×512px 以上の正方形を」と言われたとき、 手元のロゴからZIP一式を作って必要なPNGだけ管理画面にアップロードできます。
ネットショップ・ECサイトのタブアイコン
Shopify・BASE・STORES などで「favicon.ico を指定してください」と言われた場合に、 16/32/48px の3サイズが入った正式な ICO 形式を即作成できます。
PWA（ホーム画面追加で使うアプリ）対応
Web App Manifest icons の推奨どおり、192px と 512px の PNG を一気に用意。manifest.json に書く想定の最小セットがそろいます。
ブログ・ポートフォリオ・LP の個性付け
タブにアイコンがあるかないかで、ブックマーク欄での見つけやすさが大きく変わります。 無料テンプレートでも、最初に整えておきたい1セットです。
日本仕様の細かい話
- WordPress.com／WordPress.org のサイトアイコン：管理画面「外観 → カスタマイズ → サイト基本情報」で512×512px以上のPNGを設定するだけで、WordPressが内部で複数サイズを自動生成します。本ツールの出力は、WordPress外（自作HTMLサイト・Shopify・STUDIO・Wix・Jimdo）で必要になります。
- STUDIO・Wix・Jimdo のファビコン：いずれもPNG画像をアップロードする方式。本ツールが出すicon-512.pngをそのまま使えます。
- Shopify・BASE・STORES：Shopifyは32×32pxのPNG/JPG指定、BASEは正方形PNGを推奨。本ツールZIPからicon-192.pngや手元のロゴを選んでアップロード可能。
- LINE公式アカウント・X(旧Twitter)のプロフィール画像との違い：本ツールはWebサイト用のファビコンを生成します。SNSプロフィール画像とは別物（SNS側で個別に画像登録が必要）。
ご利用上のご注意
- 本ツールは画像処理を端末内で完結させます。生成された画像をどこに掲載・配布するかは利用者の責任となります。
- 元画像の著作権・商標権は利用者ご自身でご確認ください。他者のロゴを無断使用したファビコンは権利侵害に当たる可能性があります。
- HTML Living Standardの仕様は随時更新されます。最新仕様は公式ページでご確認ください。
- PWA対応のmanifest.json記述や
<link>タグ設置は、最終的にサイト管理者の責任で確認してください。
よくある質問
Q. どんな画像を用意すればいいですか？
A. 512px以上の正方形画像がおすすめです。正方形でない場合は中央を自動で切り抜きます。 16pxまで縮むので、細かい文字の入ったロゴよりシンプルなマークが向いています。 元画像を整えたいときは 画像トリミング や 画像リサイズ も使えます。
Q. 作ったファイルはどこに置けばいいですか？
A. favicon.ico と apple-touch-icon.png を、サイトの一番上の階層 （https://あなたのサイト/favicon.ico となる場所）に置くのが基本です。 ブラウザと iOS は /favicon.ico と /apple-touch-icon.png を自動で見に来る慣行になっていますが、<link rel="icon"> や <link rel="apple-touch-icon"> をHTMLに書いておけば確実です。 ZIPに設置方法のメモを同梱しているので、そのまま渡せば制作会社にも伝わります。
Q. ICOファイルには何が入っていますか？
A. 16px・32px・48pxの3サイズのPNG画像を1つの favicon.ico にまとめています。 MDN の <link> 要素の sizes 属性の説明にあるとおり、 Microsoft の ICO 形式と Apple の ICNS 形式は1ファイルに複数アイコンを保存できる珍しい形式で、 ブラウザが場面に応じて最適なサイズを自動で選びます。PNG入りICOは Vista 以降の Windows と主要ブラウザがすべて対応しています。
Q. SVGファビコンは作れますか？
A. 本ツールは PNG 入り ICO とPNGアイコンのみです。SVG favicon は Chrome 80＋ / Edge 80＋ / Firefox 41＋ は古くから対応していますが、Safari と iOS Safari は Safari 26 で正式対応した比較的新しい機能です。 対応していない端末では PNG の favicon.ico に自動的にフォールバックしますので、 本ツールが作るPNG入りICOがあれば、どの端末でも崩れずに表示されます。
Q. apple-touch-icon は何のためのファイルですか？
A. iPhone・iPad で「ホーム画面に追加」したときに、アプリのアイコンとして使われる画像です。 標準サイズは 180×180px の PNG。iOS は /apple-touch-icon.png を自動的に探しに来ます。 透明部分は黒で塗りつぶされる仕様なので、背景色は白などの不透明色にしておくと安全です。
Q. PWA（ホーム画面追加でアプリのように使う）に必要なサイズは？
A. Web App Manifest icons メンバーの仕様（MDN 2026-04-12 最終更新）では、 192×192px と 512×512px の PNG を最低用意するのが慣行です。 本ツールはこの2サイズを含めて出力します。Android Chrome のホーム画面追加・スプラッシュ画面表示で使われます。manifest.json の icons 配列に src／sizes／type を書き、 背景余白を考慮したアイコンには purpose: "maskable" を追加できます。
Q. ダークモード対応のファビコンは作れますか？
A. SVG favicon の中に @media (prefers-color-scheme: dark) を入れる方法でダークモード対応ができますが、 本ツールは PNG 入り ICO 出力なので非対応です。PNG ファビコンの場合は、白背景でも黒背景でも見えるコントラストの高いシンプルな図形を選ぶのが現実解です。
Q. manifest.jsonにはどう書けばいいですか？
A. icons配列に{"src":"/icon-192.png","sizes":"192x192","type":"image/png"}と{"src":"/icon-512.png","sizes":"512x512","type":"image/png"}の2つを書きます。 背景余白を含めた「maskableアイコン」を別途用意する場合はpurpose:"maskable"を加えます。
Q. WordPressのサイトアイコン機能との違いは？
A. WordPressは「外観 → カスタマイズ → サイト基本情報」で512×512px以上のPNGをアップロードすれば 内部で複数サイズを自動生成します。本ツールはWordPress外のサイト（自作HTML・Shopify・STUDIO・Wix）で 手動設置する場合に必要となるファイル一式をZIPで配布します。
関連ツール
サイト制作の関連クラスタ
PWA・スマホ対応
PWA対応にはmanifest.jsonとService Workerが必要。 アイコンは本ツールのicon-192/512.pngで賄えます。 QRコード生成でURLを配布すると、スマホでの追加が容易に。
ECサイト構築
Shopify・BASE・STORESなどでサイトアイコン設定する際、要件は「正方形PNG」「16×16px〜180×180px」 と幅があります。本ツール出力で網羅できます。 画像圧縮で容量を抑えてください。
WordPress運用
WordPressは「サイトアイコン」機能で512×512px PNGを設定すれば自動展開。 ただしテーマカスタマイズやREST APIで個別設定したいケースでは本ツールの出力が役立ちます。
SEO・OGP
ファビコンはGoogle検索結果のサイト名横に表示される重要な要素。 OGP画像（og:image）とは別物ですが、視覚アイデンティティを揃えると認識率が上がります。