ファビコン作成ツール

ロゴ・数文字のテキスト・絵文字から、favicon.ico、各サイズのPNG、Appleタッチアイコン、Androidアイコン、HTMLのタグまで、ファビコン一式をブラウザー内で作成します。

ロゴや文字は、このタブの中のキャンバスに描画され、お使いの端末上でZIPにまとめられます。何もアップロードされないので、未公開のブランドデザインも外に出ません。

アプリアイコンジェネレーターを開く

ファビコン作成 について

ファビコン作成ツールは、1つの元データから、サイト用のアイコン一式を作ります。ロゴなどの画像から始めるか、1〜3文字のテキストを入力するか、絵文字を選びます。各アイコンは、大きな1つのファイルを縮小するのではなく、それぞれのピクセルサイズで描画されます。16・32・48 pxはPNG画像として1つのfavicon.icoにまとめられ、そのほかに、別ファイルの16・32 pxのPNG、180 pxのAppleタッチアイコン、Androidが使う192・512 pxのアイコンも作られます。Webマニフェストとlinkタグのブロックも一緒に作られ、文字や絵文字から作る場合は、本物のSVGファビコンも出力されます。ダウンロードの前に、すべてのサイズをピクセル単位で確認でき、ライトとダークのブラウザーのタブの中での見え方もプレビューされます。処理はすべてお使いの端末上で行われ、画像がアップロードされることはありません。

機能

• 元データは画像・文字・絵文字から選べ、ダウンロード前にリアルタイムでプレビューできる
• 16・32・48 pxの画像を収めたfavicon.icoと、別々の16・32 pxのPNG
• 180 pxのAppleタッチアイコン。背景を塗りつぶした正方形で、角丸はiOS側で適用される
• 192・512 pxのAndroidアイコンと、対応するsite.webmanifest
• 文字・絵文字から作る場合の、本物のfavicon.svg。どのサイズでもくっきり表示される
• 画像から作る場合の、フィット・余白・角丸・背景の設定
• 16〜180 pxのピクセル単位のプレビューと、ライト・ダークのブラウザーのタブを模した表示
• すべてのファイルを1つのZIPにまとめ、headの中にそのまま貼り付けられるlinkタグも用意

ファビコン作成 の使い方

1. 「Image」「Text」「Emoji」から選び、ロゴをドロップするか、3文字までのテキストを入力するか、絵文字を選びます
2. プレビューとブラウザーのタブの表示を見ながら、フィット・余白・色・角の形を調整します
3. アプリ名とテーマカラー、アイコンを配信するフォルダーを入力します
4. ZIPをダウンロードし、ファイルをサイトにアップロードして、linkタグをheadの中に貼り付けます

例

入力

Source: emoji 🚀 on a rounded tile · theme colour #4f46e5 · icons in the site root

出力

<link rel="icon" href="/favicon.ico" sizes="16x16 32x32 48x48">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#4f46e5">

文字や絵文字から作った場合に出力されるタグです。画像から作った場合は、SVGの行が含まれません。

よくあるエラーとトラブルシューティング

• 新しいファイルをアップロードしても、古いファビコンが表示されたままです。 — ブラウザーはファビコンを長いあいだ保持します。アイコンのアドレスを直接開き、Ctrl+Shift+R（Macでは⌘⇧R）で再読み込みしてから、ページを再読み込みしてください。プライベートウィンドウなら、最新のアイコンがすぐに表示されます。
• ブラウザーのタブで、アイコンがぼやけたり、濁って見えたりします。 — 512 px以上の正方形の画像から始め、絵柄はシンプルにしてください。16 pxでは細かい部分が消えてしまうためです。横長のロゴは、余白を多めにするか、「Cover」のフィットにするとうまくいくことがよくあります。
• Appleタッチアイコンの角や背景が黒くなります。 — iOSは透明なピクセルを黒で塗ります。180 pxのアイコンは、アイコンの背景色で塗りつぶされます。アイコンが透明な場合は、マニフェストの背景色が使われます。角は、iOS側で丸められるよう四角のままです。
• ファイルの一覧に、favicon.svgがありません。 — 本物のSVGが作られるのは、文字が文字のまま残る「Text」と「Emoji」の場合だけです。写真やロゴのファイルでは、SVGの中にビットマップを入れただけのものになってしまうため、PNGとICOのファイルで対応します。

よくある質問

2026年に必要なファビコンのサイズは何ですか？

16・32・48 pxの画像を収めたfavicon.ico、180 pxのapple-touch-icon、マニフェスト用の192・512 pxのアイコンがあれば、ほぼすべてのブラウザーとスマートフォンに対応できます。別々の16・32 pxのPNGとSVGも用意しておく価値があり、ファビコン作成ツールならそのすべてをまとめて作れます。

ICO・PNG・SVGのファビコンは、何が違いますか？

ICOは昔からある形式で、今もサイトのルートから自動的に要求されるため、古いブラウザーやブックマークにも対応できます。PNGは、タブやスマートフォンのアイコンに安心して使える形式です。SVGは、どのサイズでもくっきり表示できる1つのベクターファイルですが、対応していないブラウザーもあります。一式に3つとも含まれているのは、このためです。

ファビコンのファイルとlinkタグは、どこに置けばよいですか？

ファイルは、サイトが配信されているフォルダー、通常はトップページと同じ階層のルートにアップロードします。そのうえで、生成されたタグを、すべてのページのhead要素の中に貼り付けてください。アイコンをサブフォルダーに置く場合は、先にそのフォルダーをツールに入力しておくと、タグとマニフェストの中のパスが正しくなります。

ファイルを差し替えても、ファビコンが変わらないのはなぜですか？

ブラウザーは、ページとは別にファビコンをキャッシュしていて、古いものを何日も保持することがあります。アイコン自体のアドレスをCtrl+Shift+Rで再読み込みするか、そのサイトのキャッシュされた画像を消去するか、プライベートウィンドウで確認してください。ファイル名を変えてタグを更新する方法でも、新しいものを強制的にダウンロードさせられます。

絵文字をファビコンにできますか？

はい。「Emoji」タブを選び、絵文字を1つ入力または貼り付けて、サイズと、必要なら背景を選びます。PNGとICOのファイルは、作成に使っている端末の絵文字フォントで描画されるので、どこで見ても同じ見た目になります。SVGは文字のままなので、訪問者ごとに、その人のシステムが描く絵文字で表示されます。

Androidやマニフェストのアイコンは、何に使われますか？

192・512 pxのPNGは、site.webmanifestに記載されます。Androidは、ホーム画面のショートカットとスプラッシュ画面にこれを使い、インストールできるWebアプリにも必要です。マニフェストには、アプリ名・短い名前・色も保存され、これらはツールで設定できます。

関連ツール

• アプリアイコンジェネレーター — 1枚の画像を iOS・macOS・Android の全アプリアイコンサイズに変換 — ブラウザ内で生成し ZIP でダウンロード。
• SVG から PNG への変換 — SVG マークアップや .svg ファイルを、任意のスケールで鮮明な PNG や JPG に変換できます。
• 画像フォーマット変換 — 画像を PNG、JPEG、WebP 間でブラウザ内ですべて変換します。
• Open Graph ジェネレーター — Open GraphとTwitterのメタタグを生成し、ソーシャルカードをプレビューします。
• メタタグジェネレーター — フォームから SEO、Open Graph、Twitter Card のメタタグを生成できます。
• 画像リサイズ — ピクセル数・割合・プリセット・長辺のいずれかで写真をリサイズし、複数枚をまとめてZIPでダウンロードできます。
• Base64 画像エンコーダー / デコーダー — 画像を HTML・CSS スニペット付きの Base64 Data URI に変換し、Data URI をダウンロード可能な画像にデコードします。

画像の他のツール

• 画像オプティマイザー — 画像を再エンコードして軽量化（JPEG/WebP/PNG）、任意でリサイズします。
• 画像フォーマット変換 — 画像を PNG、JPEG、WebP 間でブラウザ内ですべて変換します。
• EXIF ビューア / 除去ツール — 写真のEXIFメタデータ（GPSを含む）を表示・削除します。何もアップロードされません。
• Base64 画像エンコーダー / デコーダー — 画像を HTML・CSS スニペット付きの Base64 Data URI に変換し、Data URI をダウンロード可能な画像にデコードします。
• アプリアイコンジェネレーター — 1枚の画像を iOS・macOS・Android の全アプリアイコンサイズに変換 — ブラウザ内で生成し ZIP でダウンロード。
• sprite sheet CSS アニメーション — sprite sheet を steps() の CSS アニメーションに変換。ライブプレビュー付き。
• SVG から PNG への変換 — SVG マークアップや .svg ファイルを、任意のスケールで鮮明な PNG や JPG に変換できます。
• 画像カラーピッカー — 画像をホバー・クリックして、任意のピクセルの HEX・RGB・HSL を取得できます。
• カラーフォーマットコンバーター — カラーを HEX・RGB・HSL・OKLCH など全形式に一度に変換します。
• バーコードジェネレーター — EAN・UPC・Code 128 バーコードを生成し SVG や PNG で保存します。
• カラーパレット抽出 — 画像から支配色とパレットを HEX・RGB・HSL で抽出
• 画像の反転・回転 — ブラウザで画像を回転・反転
• 画像トリミング — 自由範囲か固定比率で切り抜き、フル解像度で保存。
• 画像に透かし — テキストかロゴを固定またはタイルで、不透明度と回転つき。
• 画像の黒塗り — スクリーンショットの一部を恒久的にぼかし・モザイク・黒塗り。
• 画像の角丸 — 角丸長方形や円に切り抜き、透過PNGで書き出し。
• 色覚シミュレーター — 1型・2型・3型色覚での見え方を確認。
• 画像DPI変更 — ピクセルを保ったままPNG/JPEGのDPIを設定。
• BlurHash生成 — ぼかしたプレースホルダー画像をエンコード・デコード。
• プレースホルダー画像生成 — 任意サイズのSVG・PNG・data URIプレースホルダー。
• ASCIIアート生成 — コントラストを調整して画像をASCIIアートに変換。
• 画像フィルター — モノクロ・セピア・コントラスト・ぼかしなどを適用し、PNGとCSSを出力。
• 画像分割ツール — 画像をグリッド状のタイルに切り分け、ZIPでダウンロードします。
• 画像結合ツール — 画像を横並び、縦並び、格子状に結合。

画像のツールをすべて見る (35) · すべてのツール