Favicon Works

日本語で痒いところに手が届くファビコン作成ツール「Favicon Works」を作りました

新しくサイトを作った時、 既存のロゴから ファビコン (favicon) を作ろうとして、 海外サービスを使った経験はありませんか? 「英語UI が分かりにくい」 「ICO のマルチサイズが選べない」 「実機での見え方が分からない」 ─ 痒いところに手が届かないモヤモヤを解消するため、 Favicon Works という無料ツールを公開しました。 ブラウザだけで 画像/文字/絵文字をドロップ → 編集 → ZIPで一括ダウンロード までが完結します。

なぜ作ったか：自サイトのファビコン作りで困ったから

実は、 Telisia Works のファビコンを作る時、 私自身がかなり苦労しました:

  • 海外サービスは英語UI で、 用語 (「sizes」「maskable」「touch-icon」 など) が分かりにくい
  • 多くのサービスが 16/32 だけしか同梱しない ICO を出してくる
  • Google検索結果用の 192×192 が抜けていて、 後から作り直しに
  • apple-touch-icon や PWA の manifest.json までフォローしてくれるサービスが少ない
  • 「実機でどう見えるか」 が確認できないまま、 アップロードして初めて気づくことが多い
  • 機密の未公開ロゴを、 海外サイトにアップするのも気が引ける

これらを 日本語UI で全部解決しよう、 と作ったのが Favicon Works です。

Favicon Works の全画面 (3カラムレイアウト)
全画面はこんな感じ。 左で入力・編集、 中央でプレビュー、 右で出力
Favicon Works を起動する

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

3つの入力方式 ─ 画像・文字・絵文字からファビコンの種を作れる

ロゴ画像が手元になくても、 文字や絵文字からファビコンを作れます。

🖼 画像から

ドラッグ&ドロップ / クリック選択 / Ctrl+V ペーストの3通り。 PNG / JPG / WebP / SVG / ICO に対応。 既存の .ico を読み込んで再編集も可能です。

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

🅰 テキストから

サイト名のイニシャル (1〜3文字) でファビコンを生成。 文字色・フォント (Serif / Sans-serif / Monospace / 日本語) を選んで、 即プレビューに反映されます。

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

🎨 絵文字から

お気に入りの絵文字をワンクリックでファビコンに。 ブログ・趣味サイトに気軽に使えます。

絵文字入力タブ

4種類の形状 + 編集機能でクオリティアップ

シンプルな矩形だけでなく、 角丸 / 円形 / squircle (iOS風) にもクリックで切り替えられます。 さらに 背景色 (透明/単色) ・明度・彩度 を細かく調整できるので、 サイトのブランドカラーに合わせて整えられます。

そのまま・角丸・円形・squircle の4種類を並べた比較
同じファビコンを4種の形状で切り替え。 squircle は iOS のアプリアイコン風

実機モック付きプレビューで「作って終わり」 を防ぐ

このツールの一番のこだわりが 実機モックプレビュー です。 作ったファビコンが実際にどう見えるかを、 4種類の実機環境で確認できます。

プレビューエリア全体。大きなプレビュー・サイズ別・実機モック4種が一覧できる
  • 🌐 ブラウザタブ: Chrome ・ Safari の白タブ背景に映えるか
  • 📱 iPhone ホーム画面: apple-touch-icon (180×180) が iOS の角丸マスク前にどう見えるか
  • 🤖 Android ホーム画面: icon-192 が Android の円形クロップでどう切り取られるか
  • 🔍 Google検索結果: 192×192 が SEO的に重要な検索結果でどう表示されるか

さらに ライト/ダーク 切替トグルがあり、 透過PNGの「白文字が暗い背景で映えるか」 もチェックできます。

ダークモードプレビュー
ダーク切替で透過PNGの見え方を確認

マルチサイズICOを自前実装で正しく出力

ファビコンの基本フォーマット favicon.ico は、 16 / 32 / 48 / 64 / 128 / 256 px を 1ファイルに同梱できる伝統的フォーマットです。 ブラウザが表示場所 (タブ ・ ブックマーク ・ 拡大表示) に応じて自動で最適なサイズを選んでくれる優れもの。

しかし、 海外サービスでは 16/32 だけ の貧弱な ICO を出してくることが多いです。 Favicon Works では ICONDIR + ICONDIRENTRY を自前実装して、 PNG埋め込み式のフルサイズマルチICO を出力します。

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

加えて、 任意のサイズで PNG / ICO を追加出力できるので、 「PWA用に 384px が欲しい」 「特殊サイズで作りたい」 などのニッチな要望にも対応できます。

HTMLの link タグも自動生成

ファビコンを設置する時、 HTML の <head> に書くべき <link> タグは意外と複雑で、 順序や属性を間違えると正しく認識されません。 Favicon Works では選択した出力ファイルに応じて、 正しい <link> タグを自動生成します。

HTMLコード自動生成エリア

「コピー」 ボタンでクリップボードに入るので、 そのまま自分のHTMLに貼り付けるだけ。 さらに 全部入りZIP には README.txt が同梱されていて、 ファイルの配置場所と link タグの設置手順を日本語で解説しています。

プライバシー：画像はあなたのブラウザから出ません

Telisia Works の3つのツール (相棒電卓 ・ スクリーンショットエディター ・ リネームワークス ・ Favicon Works) はすべて 完全ローカル処理で統一しています。

  • 画像の読み込み・編集・出力は すべてあなたのブラウザ内で実行
  • 通信が発生するのはツールHTMLを取得するときだけ
  • Cookie ・ 解析ツール ・ 広告タグ ・ 追跡スクリプト、 すべて未搭載
  • 単一HTMLで構成され、 ブラウザの「ソース表示」 で全コードが読めます

未公開のロゴデザイン、 顧客に納品予定のブランドアイコン、 趣味で作ったキャラクターアイコンなど、 「オンラインツールに上げたくない」 タイプの画像でも安心して使えます。

開発の裏側

技術的に面白かった/苦労した点も少し:

  • ICOフォーマットの自前実装: 仕様書を読みながら ICONDIR (6バイト) + ICONDIRENTRY (16バイト × N) を DataView で組み立て、 各サイズの PNG を連結。 「256px の時だけ widthフィールドに 0 を入れる」 という古い仕様の罠もあって面白かった
  • 絵文字の Canvas 描画: ブラウザの絵文字フォントを Canvas に書き込めるんですが、 サイズ感が機種依存。 380px のフォント指定 + textBaseline の微調整で揃えました
  • iOS / Android のホーム画面モック: 実機のアイコンマスク (iOS は角丸、 Android は円形) を CSS の border-radius で再現。 アプリ風UIをHTMLで作るのが意外と楽しい

これらの試行錯誤は別記事で詳しく書く予定です。

まとめ：ファビコン作成を5分で

  • 画像 / 文字 / 絵文字の3方式で、 ファビコンの種を作れる
  • 4種の形状 + 編集機能でブランドに合わせて整えられる
  • 4種の実機モックで、 タブ ・ iPhone ・ Android ・ Google検索結果の見え方を確認
  • マルチサイズICO + PNG + manifest を一括出力、 HTMLコードも自動生成
  • README同梱の全部入りZIP で、 設置までスムーズ
  • 完全ローカル処理 で機密ロゴも安心

「新しいサイトを作ったら、 まず Favicon Works でファビコンを作る」 ─ そんなブックマーク必須のツールを目指して作りました。 試行錯誤しながら作ったので、 「こういう機能が欲しい」 「ここが分かりにくい」 などのフィードバックは大歓迎です ✨

Favicon Works を起動する

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

ぜひ 機能紹介ページ もご覧ください。 改善要望や 「こういう機能が欲しい」 という声は、 お問い合わせフォーム や X からお気軽にどうぞ。

記事内で紹介したツールはこちら

Favicon Works を起動

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