Favicon＆アプリアイコン生成ツール
テキスト、画像/SVG、絵文字からマルチサイズfavicon.ico（16x16, 32x32, 48x48）、Apple Touch Icon（180x180）、Android PWAアイコンをブラウザ内で一括生成します。
マルチレイヤーバイナリ favicon.ico ダーク/ライトタブ＆検索結果プレビュー iOSホーム画面＆Android PWA対応
アイコン素材
文字サイズ比率56%
背景・角丸・余白
角丸の半径22%
内側余白（パディング）12%
ブラウザタブ＆検索結果リアルタイムプレビュー
ブラウザタブ（ライト）
Anything Tools
ブラウザタブ（ダーク）
Anything Tools
Google検索結果スニペット
Anything Tools
https://example.com
Anything Tools — Official Website
Anything Tools
生成されたファビコン＆アイコン一覧
favicon.ico
16×16, 32×32, 48×48 multi-layer
favicon-16x16.png
16×16 px (Browser Tab)
favicon-32x32.png
32×32 px (Retina Tab)
favicon-48x48.png
48×48 px (Google SERP)
apple-touch-icon.png
180×180 px (iOS / Safari)
android-chrome-192x192.png
192×192 px (Android / PWA)
android-chrome-512x512.png
512×512 px (PWA Splash)
HTML headタグ＆Web Manifest
<link rel="icon" type="image/x-icon" href="/favicon.ico"> <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">
事前にSVGアイコンの色変更や最適化を行いたいですか？SVG ビューアー＆最適化ツール
Webサイト用のFavicon一式をオンラインで作成する方法
3つのステップでfavicon.ico、iOSアイコン、PWAマニフェストを生成します。
1
素材を選択
1〜4文字のイニシャル入力、絵文字の選択、またはPNG/SVGロゴのアップロードから選びます。
2
背景と角丸を調整してプレビュー
背景グラデーション、角丸、余白を調整し、ライト/ダークモードのタブやGoogle検索結果での見え方を確認します。
3
ICO・PNG・HTMLコードを出力
16/32/48px統合型のfavicon.ico、apple-touch-icon.png、PWAアイコン、site.webmanifestをダウンロードします。
モダンなWebサイトに必要なすべてのアイコンを網羅
テキスト、画像/SVG、絵文字からマルチサイズfavicon.ico（16x16, 32x32, 48x48）、Apple Touch Icon（180x180）、Android PWAアイコンをブラウザ内で一括生成します。
マルチレイヤーバイナリ favicon.ico
16x16、32x32、48x48の3サイズを単一の標準ICOバイナリにブラウザ内で直接パッキングします。
ダーク/ライトタブ＆検索結果プレビュー
16x16ピクセルの極小サイズでも視認性が保たれているか出力前に確認できます。
iOSホーム画面＆Android PWA対応
180x180のApple Touch Iconや192x192 / 512x512のPWAアイコン、site.webmanifestを同時生成します。
関連記事
Design
Favicon生成ツール完全ガイド：マルチサイズICO・Apple Touch・PWAアイコンの作成
ブラウザ内で16x16/32x32/48x48統合型のfavicon.ico、180x180のApple Touch Icon、Android PWAアイコン、site.webmanifestを一括作成する方法を解説します。
•6 分で読めます
Developer Tools
SVG コードをオンラインでプレビュー・色変更・軽量化する方法
ブラウザ上で SVG コードをリアルタイム表示し、カラーピッカーでの動的色変更、XML の圧縮、2x/4x 高解像度 PNG 書き出しを行う実践ガイド。
•5 分で読めます
よくある質問
よくある質問に対する回答を確認できます。