Web Tool

Favicon Works

日本語で痒いところに手が届く ファビコン生成ツール。 マルチサイズICO ・ PNG ・ apple-touch-icon ・ PWA manifest を一発で作成。 ブラウザタブ ・ iPhone ・ Android ・ Google検索結果 の実機モックでプレビューを確認しながら、 安心して作れます。 完全ローカル処理、 画像はサーバーに送信されません。

画像をドロップして、 そのまま出力するだけ

Favicon Works を起動

※ 別窓で開きます ・ 登録不要 ・ 完全無料

Favicon Works の全画面 (3カラム + ヘッダー + フッター)

クイックスタート

3ステップで初めてのファビコンが完成します。 まずはこの順で操作してみてください。

01
画像を読み込んだ直後の左カラムと中央プレビュー

画像を読み込む

左カラムに画像をドラッグ&ドロップ。 中央の大きなプレビューに即座に表示されます。 PNG / JPG / WebP / SVG / ICO に対応。

02
形状とパディングを調整中の編集パネル

形状や色を整える

形状 (角丸 / 円 / squircle)、 背景色、 色調整 (明度・彩度) を編集。 全サイズのプレビューと実機モックがリアルタイムで反映されます。

03
出力ファイルを選択して全部入りZIPを押す直前

ZIPで一括ダウンロード

右カラムで必要なファイルを選び、 「📦 全部入りZIP」 をクリック。 設置手順を書いた README も同梱されます。

3種類の入力方式

用意した画像でも、 文字や絵文字からでも、 ワンクリックでファビコンの種を作れます。

画像入力タブ。ドラッグ&ドロップエリアとファイル形式案内

🖼 画像から

ドラッグ&ドロップ / クリック選択 / Ctrl+V ペーストの3通り。 SVG ・ ICO も読み込み可能で、 既存ファビコンの再編集にも使えます。

テキスト入力タブ。文字・背景色・フォント選択

🅰 テキストから

1〜3文字 + 背景色 + 文字色 + フォント5種から、 イニシャル風ファビコンを即生成。 背景透過にも対応。

絵文字入力タブ。絵文字と背景色

🎨 絵文字から

お気に入りの絵文字をワンクリックでファビコン化。 ブログ・趣味サイトに気軽に使えるカジュアル路線。

編集機能 ─ 形状 ・ 背景 ・ 色調整

「形状」「パディング」「背景」「色調整」 の4種類。 ほぼリアルタイムでプレビューに反映されます。

編集パネル全体。形状・パディング・背景・色調整が縦に並ぶ

編集パネル全景

4つの編集セクションが縦に並ぶ。 上から順に試していけば、 自然とファビコンが完成します。 「編集をリセット」 で一気に初期状態に戻せます。

そのまま・角丸・円形・squircle の4種類を並べた比較図

4種類の形状

「そのまま」 「角丸」 「円形」 「squircle」 から選択。 squircle は iOS のアプリアイコンに使われる柔らかい丸角四角形です。

実機モック付きプレビュー

作ったファビコンが実際の画面でどう見えるかが、 1枚に集約されています。 ライト / ダーク 切替で両方の見え方を確認できます。

プレビューエリア全体。大きなプレビュー・サイズ別・実機モック4種が一覧できる

ライトモード

中央に256pxの大きなプレビュー、 下に各サイズ (16〜96px) の縮小プレビュー、 さらに ブラウザタブ ・ iPhone ・ Android ・ Google検索結果 の4種類の実機モック。

ダークモードに切り替えた状態のプレビュー

ダークモード

透過PNGの「白文字が見えるか?」 「暗い背景に映えるか?」 を確認するためのダークモード。 切替トグル1つで全モックが反転します。

柔軟な出力機能

必要なファイルだけを選んで、 個別 / ZIP の好きな形式でダウンロード。 HTML の <link> タグも自動生成されます。

出力ファイルチェックリストとマルチサイズICOの説明

📋 出力リスト

favicon.ico (マルチサイズ) ・ PNG各種 ・ apple-touch-icon ・ site.webmanifest など、 必要なファイルにチェック。 マルチICOの仕組みも日本語で解説。

指定サイズで追加機能。任意サイズPNG/ICOの追加

📏 任意サイズ

8〜1024px の任意のサイズで PNG / ICO を追加。 追加するとプレビューにも反映され、 リストから ✕ で削除も可能。

HTMLコード自動生成エリア。link タグが並んでコピーボタン

🔧 HTMLコード

選択した出力に応じて <link> タグを自動生成。 「コピー」 ボタンでクリップボードに入るので、 HTMLの <head> に貼り付けるだけ。

こんな時に便利

マルチサイズ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 ・ 広告タグも全て未搭載です。

さあ、 サイトに似合うファビコンを作ろう

Favicon Works を起動

※ 別窓で開きます ・ 登録不要 ・ 完全無料