ファビコンジェネレーター

新着

画像や文字から一式のファビコンを作成し、ZIPでダウンロード。

Drop an image, click to browse, or paste PNG, JPG, SVG or WebP — a square 512×512+ logo works best. Processed on your device.

Background Transparent

Shape

Padding 0% App name (for manifest)

Drop an image above to generate your favicon set — or switch to Text or Emoji to build one from a letter or emoji.

Live preview

Browser tab

My App

Bookmarks bar

My App

iOS home screen

My App

Android home screen

My App

Generated sizes

Apple touch (180) and Android (192/512) icons use a solid background; the 192 and 512 are maskable with a built-in safe zone.

HTML for your <head>

site.webmanifest

Runs entirely in your browser. Nothing is uploaded.

ブラウザで完全なfaviconセットを生成する

このfaviconジェネレーターは、現代的なウェブサイトやウェブアプリに必要なすべてのアイコンを作成します。ブラウザfavicon、マルチサイズfavicon.ico、Apple touch icon、PWAマニフェスト用マスカブルアイコンを、1つのソースファイルから生成できます。画像・テキストの頭文字・絵文字を選択し、背景・形状・パディングを調整するだけで、すべてのファイルと<head>用のHTMLスニペットを含んだZIPファイルをダウンロードできます。

画像をサーバーに送信するツールとは異なり、すべての処理はHTMLのcanvas上でローカルに実行されます。高速・無料・登録不要で、ロゴは完全にプライベートな状態を保ちます。アカウント不要、サーバー処理の待ち時間なし、ツールを妨げる広告もありません。

画像・SVG・文字・絵文字に対応

3つの入力モードであらゆる出発点に対応します。画像ではPNG・JPG・SVG・WebPを受け付け、正方形のロゴを各サイズに中央フィットさせます。SVGをアップロードすると、鮮明でスケーラブルなfavicon.svgとしてもそのまま出力されます。テキストでは1〜3文字をお好みのフォントと色で美しいレターマークに変換できます（ロゴがない段階でも役立ちます）。絵文字ではワンクリックで任意の絵文字をfaviconに変換できるので、サイドプロジェクトのブランディングに最速の方法です。

どのモードを選んでも、完全な出力セットが得られます。すべてのPNGサイズ、本物のfavicon.ico、オプションのfavicon.svg、ウェブアプリマニフェスト、HTMLコードが含まれます。ChromebookのタブからAndroidのホーム画面まで、あらゆるブラウザ・OS・デバイスサイズに対応します。

すべてのサイズ＋本物のfavicon.ico

ブラウザのタブとWindows用に16×16・32×32・48×48のPNG、Apple touch icon用の180×180、AndroidとPWAのホーム画面用に192×192と512×512のアイコンを生成します。さらに、16・32・48のビットマップを本物のマルチ解像度favicon.icoにエンコードします。これはブラウザがデフォルトでリクエストするコンテナファイルで、サーバーへの通信なしにブラウザ内で完全に処理されます。

ICO形式は重要です。多くのツールは32×32のPNGをfavicon.icoにリネームするだけですが、これではブラウザが常に1つのソースからスケーリングすることになります。本物のマルチ解像度ICOにより、ブラウザは各コンテキストに最適なサイズを選択できます。完全なセットをZIPでダウンロードするか、個別のサイズや.ico・.svg・マニフェストのみを取得することも可能です。

Apple touch iconとマスカブルPWAアイコンを正しく生成

モバイルアイコンの正確な生成は、多くのfaviconツールが失敗する部分です。apple-touch-iconは180×180・ソリッドバックグラウンドでレンダリングされます（iOSは透明背景をサポートせず、角丸は自動的に適用されます）。192と512のマニフェストアイコンはマスカブルアイコンとして生成され、コンテンツが約80%のセーフゾーン内に収まるため、Androidが円形・スクワークル・角丸正方形にクリップしてもロゴが切れません。

ライブプレビューでは、ブラウザタブ・ブックマークバー・iOSとAndroidのホーム画面でのアイコンの表示を確認できます。公開前に最終的な見た目を把握できるため、「デプロイ→スマホで確認→修正→再デプロイ」の繰り返しを省けます。

UtiloKitとfavicon.io・RealFaviconGenerator.netの比較

favicon.ioは最も人気のあるfaviconツールで優れていますが、画像をサーバーにアップロードするため、未公開のロゴやクライアントのアセットがデバイスの外に出てしまいます。RealFaviconGenerator.netは最も機能が充実していますが、多段階ウィザードは素早いプロジェクトには使いにくく、サーバーサイドで画像処理されます。favicon-generator.orgは古く、基本的なPNGサイズしか生成できず、マスカブルマニフェストアイコンもSVGも出力しません。

UtiloKitはすべてをローカルで処理します。画像がブラウザの外に出ることはありません。出力には本物のマルチ解像度ICO、セーフゾーンパディング付きの正確なマスカブルマニフェストアイコン、スケーラブルSVG、コピーペースト可能な<head>スニペットが含まれます。iPhoneとAndroidでも動作します。

マニフェストとHTMLスニペット、そのままペーストできる

アイコンとあわせて、完全なsite.webmanifest（アプリ名・テーマカラー・マスカブルアイコンのエントリを含む）と、.ico・.svg・Apple touch icon・マニフェストをリンクするコピー可能な<head>スニペット、さらに対応するtheme-colorメタタグが生成されます。HTMLに貼り付けてファイルをサイトルートにアップロードするだけで完了です。

スニペットはあらゆるスタック（プレーンHTML・Next.js・Astro・Nuxt・SvelteKit・Remix）で使えます。フレームワーク専用のfavicon設定（Next.jsのapp/icon.png、AstroのHeadコンフィグなど）がある場合でも、PNGファイルはそのまま使用できます。

Frequently asked questions

Faviconとは何ですか？

Favicon（ファビコン、ファボリットアイコンの略）は、ブラウザがページタイトルの横に表示する小さな正方形アイコンです。ブラウザタブ・ブックマークバー・履歴、場合によっては検索結果にも表示されます。通常は16×16または32×32ピクセルで表示され、サイトのルートにfavicon.icoとして配置します。最近のサイトはfavicon.svgやApple touch icon、ホーム画面用PWAアイコンも追加しています。認識しやすいfaviconはブックマークや検索結果のクリック率向上に役立ちます。

Faviconはどのサイズが必要ですか？

まず16×16と32×32（ブラウザのタブとブックマークに使われる2サイズ）を1つのfavicon.icoにまとめます。完全なカバレッジのためには、48×48（Windows用）、iOS用の180×180 apple-touch-icon、そしてAndroidとPWAホーム画面用の192×192・512×512 PNGも追加します。このジェネレーターは1つのソースからすべてのサイズを一度に生成するため、手動リサイズや複数ツールの使用は不要です。

Faviconを作るにはどうすればいいですか？

ソースを選択します——画像をアップロード（PNG・JPG・SVG・WebP）するか、1〜3文字を入力するか、絵文字を貼り付けます——次に背景色・形状（正方形・角丸・円形）・パディングを選択します。ツールがcanvas上ですべてのfaviconサイズをレンダリングし、16/32/48をfavicon.icoにパック、すべてのファイルと<code><head></code>に貼り付けるHTMLスニペットを含むZIPを作成します。全工程1分以内で完了し、デザインソフトは不要です。

ロゴをアップロードしても安全ですか？

安全です——実際には何もアップロードされないからです。すべての処理はHTMLの<code><canvas></code>とJavaScriptを使ってブラウザ内で実行されます。画像はローカルで読み込まれ、リサイズされ、PNGとICOにエンコードされ、デバイス上でZIP化されます。favicon.ioやRealFaviconGenerator.netのようにクラウドで画像処理するツールとは異なり、ファイルがサーバーに送信されることはありません。クライアントの案件や未公開プロダクトを扱う際も安心して使えます。

Faviconが表示されないのはなぜですか？

ほぼ確実にブラウザのキャッシュが原因です。ブラウザはfaviconを積極的にキャッシュするため、強制リロード（Ctrl+F5）を実行し、アイコンURLを直接開いて（yoursite.com/favicon.ico）読み込めるか確認するか、プライベートウィンドウで試してください。ファイルがサイトルートにあるか、<code><link></code>タグのパスが正しいか（先頭のスラッシュは重要）、すべてのサイズをアップロードしたかも確認しましょう。新しいfaviconはブックマークや検索結果での更新に時間がかかる場合があります。

FaviconジェネレーターはiPhoneとAndroidで使えますか？

はい——Canvas APIとファイルダウンロードはiOS Safari・Android Chrome・Samsung Internetで動作します。カメラロールから写真をアップロードしたり、文字を入力したり、絵文字を貼り付けたりして、完全なZIPをスマートフォンに直接ダウンロードできます。デスクから離れているときに素早くfaviconを試作するのに便利です。レイアウトは小さな画面にも適応し、375px幅でも快適に操作できます。

マスカブルアイコンとは何ですか？

マニフェストアイコン（site.webmanifestに記載される192×192・512×512 PNG）はAndroidとインストール済みPWAが使用するアイコンです。マスカブルアイコンは重要なコンテンツをアイコン中央の安全ゾーン（約80%の領域）内に収めます。これにより、システムが円形・スクワークル・角丸正方形にクリップしても、ロゴが切れることなく正しく表示されます。このジェネレーターは192と512のアイコンに自動的に安全ゾーンのパディングを追加し、<code>purpose: maskable</code>とマークします。安全領域を手動で計算する必要はありません。