Favicon変換ツール

画像をアップロードするだけで、あなたのWebサイト用の全サイズfaviconを生成します。

favicon.pub を使えば、必要なすべての favicon フォーマットを数秒で生成できます。PNG、ICO、SVG、Apple Touch アイコン、Android アイコン、Safari ピン留めタブ用アイコン、PWA manifest まで対応しています。

ここをクリックまたは画像をドラッグ＆ドロップ

PNG、JPG、SVG、WEBP対応

ブラウザ用 favicon（16x16、32x32、48x48）

iPhone / iPad 向け Apple Touch アイコン

PWA 向け Android Chrome アイコン

SVG favicon と Safari ピン留めタブ用アイコン

site.webmanifest を自動生成

PWA 対応の favicon と manifest

Progressive Web Apps 用のアイコンを生成

ワンクリック生成

画像をアップロードするだけで、すべてのサイズのfavicon（ICO、PNG、SVGなど）を生成します

全プラットフォーム対応

iOS、Android、Windowsなど、すべてのブラウザ・デバイスのアイコン要件に対応

プロ品質

画像品質を自動最適化し、各プラットフォーム基準に合致した高品質faviconを生成

Privacy / Security

Files processed in browser
No uploads stored
Automatic cleanup

Who is this for

Developers
Designers
Indie Hackers
SaaS founders

Use cases

Website favicon
PWA icon
Web App
Mobile App placeholder

そもそもFaviconとは？

Favicon（favorite iconの略）は、ブラウザのタブやブックマーク、その他のUI要素に表示される小さなアイコンです。複数のタブやブックマークの中から、あなたのWebサイトを素早く識別できるようにします。

Favicon変換ツール

ブラウザ用 favicon（16x16、32x32、48x48）
iPhone / iPad 向け Apple Touch アイコン
PWA 向け Android Chrome アイコン
SVG favicon と Safari ピン留めタブ用アイコン
site.webmanifest を自動生成
PWA 対応の favicon と manifest
Progressive Web Apps 用のアイコンを生成

オンラインでFaviconを生成する方法

当サイトの favicon 生成ツールの使い方はとても簡単です：

PNG、JPG、または SVG 形式のロゴ画像をアップロードします。
自動生成されたすべての favicon アイコンをその場でプレビューします。
favicon 一式をダウンロードし、Webサイトに配置します。

WebサイトにFaviconを追加する方法

Faviconファイルを生成したら、Webサイトの<head>セクションに次のHTMLコードを追加します：

<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16">
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="/favicon-48x48.png" sizes="48x48">
<link rel="manifest" href="/site.webmanifest">
<link rel="icon" type="image/png" href="/android-chrome-192x192.png" sizes="192x192">
<link rel="icon" type="image/png" href="/android-chrome-512x512.png" sizes="512x512">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">HTML

現代的なプラットフォーム向けFavicon形式の解説

ICO形式 (.ico)

従来のfavicon形式で、すべてのブラウザ（古いInternet Explorer含む）に対応。通常は複数サイズ（16x16, 32x32, 48x48）を含みます。

PNG形式 (.png)

最新ブラウザで推奨される形式。透過背景対応でファイルサイズも小さい。16x16はタブ、32x32はタスクバー、48x48はデスクトップショートカット用。

Android Chromeアイコン

192x192と512x512はAndroid端末のPWA（プログレッシブWebアプリ）用。ホーム画面追加時に表示されます。

Apple Touchアイコン

180x180はiOS端末（iPhone、iPad）用。ホーム画面追加時に使われ、Appleが自動で角丸や光沢を付与します。

Safariピン留めタブ用アイコン

SVG形式の単色ベクターアイコン。Safariのピン留めタブ機能で使われ、色のカスタマイズも可能です。

SVG形式 (.svg)

最新のベクター形式で、無限に拡大縮小しても劣化せず、ダークモードにも対応。ファイルサイズも小さく、今後主流となる形式です。