Favicon Works
日本語で痒いところに手が届く ファビコン生成ツール。 マルチサイズICO ・ PNG ・ apple-touch-icon ・ PWA manifest を一発で作成。 ブラウザタブ ・ iPhone ・ Android ・ Google検索結果 の実機モックでプレビューを確認しながら、 安心して作れます。 完全ローカル処理、 画像はサーバーに送信されません。
クイックスタート
3ステップで初めてのファビコンが完成します。 まずはこの順で操作してみてください。
画像を読み込む
左カラムに画像をドラッグ&ドロップ。 中央の大きなプレビューに即座に表示されます。 PNG / JPG / WebP / SVG / ICO に対応。
形状や色を整える
形状 (角丸 / 円 / squircle)、 背景色、 色調整 (明度・彩度) を編集。 全サイズのプレビューと実機モックがリアルタイムで反映されます。
ZIPで一括ダウンロード
右カラムで必要なファイルを選び、 「📦 全部入りZIP」 をクリック。 設置手順を書いた README も同梱されます。
3種類の入力方式
用意した画像でも、 文字や絵文字からでも、 ワンクリックでファビコンの種を作れます。
🖼 画像から
ドラッグ&ドロップ / クリック選択 / Ctrl+V ペーストの3通り。 SVG ・ ICO も読み込み可能で、 既存ファビコンの再編集にも使えます。
🅰 テキストから
1〜3文字 + 背景色 + 文字色 + フォント5種から、 イニシャル風ファビコンを即生成。 背景透過にも対応。
🎨 絵文字から
お気に入りの絵文字をワンクリックでファビコン化。 ブログ・趣味サイトに気軽に使えるカジュアル路線。
編集機能 ─ 形状 ・ 背景 ・ 色調整
「形状」「パディング」「背景」「色調整」 の4種類。 ほぼリアルタイムでプレビューに反映されます。
編集パネル全景
4つの編集セクションが縦に並ぶ。 上から順に試していけば、 自然とファビコンが完成します。 「編集をリセット」 で一気に初期状態に戻せます。
4種類の形状
「そのまま」 「角丸」 「円形」 「squircle」 から選択。 squircle は iOS のアプリアイコンに使われる柔らかい丸角四角形です。
実機モック付きプレビュー
作ったファビコンが実際の画面でどう見えるかが、 1枚に集約されています。 ライト / ダーク 切替で両方の見え方を確認できます。
ライトモード
中央に256pxの大きなプレビュー、 下に各サイズ (16〜96px) の縮小プレビュー、 さらに ブラウザタブ ・ iPhone ・ Android ・ Google検索結果 の4種類の実機モック。
ダークモード
透過PNGの「白文字が見えるか?」 「暗い背景に映えるか?」 を確認するためのダークモード。 切替トグル1つで全モックが反転します。
柔軟な出力機能
必要なファイルだけを選んで、 個別 / ZIP の好きな形式でダウンロード。 HTML の <link> タグも自動生成されます。
📋 出力リスト
favicon.ico (マルチサイズ) ・ PNG各種 ・ apple-touch-icon ・ site.webmanifest など、 必要なファイルにチェック。 マルチICOの仕組みも日本語で解説。
📏 任意サイズ
8〜1024px の任意のサイズで PNG / ICO を追加。 追加するとプレビューにも反映され、 リストから ✕ で削除も可能。
🔧 HTMLコード
選択した出力に応じて <link> タグを自動生成。 「コピー」 ボタンでクリップボードに入るので、 HTMLの <head> に貼り付けるだけ。
こんな時に便利
- 新しいサイトを作った ─ ロゴ画像1枚から、 必要なファビコン一式を5分で生成
- iPhone / Android のホーム画面追加 用のアイコンも欲しい
- Google検索結果に表示されるファビコン (192×192) を綺麗に作りたい
- PWA対応 で site.webmanifest と 192/512 PNG が必要
- 既存のファビコンを編集 したい (色を変えたい・形を変えたい)
- 機密ロゴ をオンラインツールにアップせず、 手元で安全に変換したい
マルチサイズICOって何?
マルチサイズICO は、 16 / 32 / 48 / 64 / 128 / 256 px の複数サイズを 1つの favicon.ico ファイルに同梱 した伝統的フォーマットです。 ブラウザが表示場所 (タブ ・ ブックマーク ・ 拡大表示) に応じて、 自動的に最適なサイズを選んでくれます。
これ1ファイルがあれば、 ほとんどの場面をカバーできるので、 初心者の方はまずこれを設置するだけで OK。 Favicon Works ではこの伝統フォーマットを 自前実装で正しく出力 しています。
実機モックで確認できること
🌐 ブラウザタブ
Chrome ・ Safari ・ Firefox のタブに表示された時の見え方。 透過PNGの場合、 タブの白背景に映えるかが分かります。
📱 iPhone ホーム画面
apple-touch-icon (180×180) が iOS のホーム画面に追加された時の見え方。 角丸マスクがかかる前のキャンバスを正しく作れます。
🤖 Android ホーム画面
icon-192 が Android のホーム画面に円形クロップで表示された時の見え方。 円の外側に重要な要素が無いかチェック。
🔍 Google検索結果
検索結果のサイト名横に表示される 192×192 ファビコンの見え方。 SEO的にも重要な場所での視認性を事前に確認できます。
動作確認済みブラウザ
| ブラウザ | 画像入力 | テキスト / 絵文字 | ICO / PNG / ZIP 出力 |
|---|---|---|---|
| Windows Chrome / Edge | ✓ | ✓ | ✓ |
| Mac Chrome / Safari | ✓ | ✓ | ✓ |
| Firefox | ✓ | ✓ | ✓ |
| iPhone Safari | ✓ | ✓ | ✓ |
プライバシーについて
画像の読み込み ・ 編集 ・ 出力は すべてブラウザ内 (あなたの PC ・ Mac ・ スマホ上) で完結 します。 サーバーへのアップロードは一切ありません。 機密ロゴ ・ 未公開デザインにも安心してお使いください。 トラッキング ・ Cookie ・ 広告タグも全て未搭載です。