タブ上での見え方を確認
ライト/ダーク両方のタブ環境で、favicon が十分に識別できるかを事前にチェックできます。
ライブタブプレビューで favicon.ico と favicon PNG を作成
Web サイト、SaaS、プロダクトページ向けの favicon セットを作りたい場合に向いています。小さいサイズでも読めるかを先に確認してから書き出せます。
1つのロゴから各プラットフォーム向けアイコンを生成
favicon、desktop、mobile icon をすぐに確認できます
Browser
Desktop
Mobile
ジェネレーターを試す
favicon.ico、ブラウザタブでの視認性、小サイズでの読みやすさを重視したページです。
ライブプレビュー
ブラウザタブのモックアップで、実際の favicon 表示に近い見え方を確認できます。
ブラウザタブのプレビュー
IconBase
IconBase (Dark)
Google Search
iconbase.7-image.com
macOS Dock のプレビュー
App
Windows タスクバーのプレビュー
App
10:00
モバイルホーム画面のプレビュー
9:41
IconBase
App
App
App
10:00
Search...
App
App
App
IconBase
設定と書き出し
16x16 と 32x32 でも崩れないように、背景と余白を小サイズ前提で調整します。
画像を変更
初期状態ではサンプル画像を表示しています。実際のロゴをアップロードして確認してください。
画像調整
書き出し前にアップロード画像を細かく調整できます。
Standard Rounded
20%
22.5%
0%
中心 = 0
画像の中心を x0 y0 として、X/Y オフセットで位置を微調整します。
0%
0%
Aurora Mesh
ソリッド
グラデーション
Mesh と Grid
ガラス表現
パターン
グロー
Zip に含まれる内容:
favicon-16x16.png16x16
favicon-32x32.png32x32
apple-touch-icon.png180x180
android-chrome-*.png192/512
icon-maskable-*.png512x512
icon-sharp-512x512.png512 / シャープ
desktop-*.png256/1024
site.webmanifestJSON
favicon.ico と PNG サイズを生成
favicon.ico、16x16、32x32 PNG をまとめて出力し、モダン環境と互換環境をカバーします。
Web アイコンを一貫した見た目で管理
browser tab、ブックマーク、Apple touch icon、Android install icon まで一つの方向性で揃えられます。
favicon セットの作り方
1. Web 用マークをアップロード
小サイズでも識別しやすいシンボルや簡略化したロゴを使います。
2. 小サイズ向けに最適化
余白と背景を調整して、16x16 や 32x32 での読みやすさを高めます。
3. favicon パックを書き出す
favicon.ico、PNG、manifest を含む zip をダウンロードしてそのまま利用できます。
favicon FAQ
favicon.ico は含まれますか？
はい。PNG favicon に加えて favicon.ico も zip に含まれます。
なぜブラウザタブで確認するのですか？
favicon は非常に小さいため、実際のタブに近い表示で確認する方が問題を見つけやすいからです。
PWA にも使えますか？
はい。Apple touch、Android Chrome、manifest も含まれるため、幅広い Web App シナリオに対応できます。