Zerosend
·9 分

ブラウザだけで作るファビコン一式 — /tools/favicon-generator の舞台裏

1 枚の画像から ICO / PNG / apple-touch-icon / site.webmanifest を生成するファビコン生成ツールを公開しました。ICO フォーマットを自前で書き出す実装のポイントを紹介します。

#ツール #技術解説

ファビコンが必要な理由

ファビコンは、ブラウザのタブやブックマーク一覧でサイトを識別する小さなアイコンです。スマートフォンのホーム画面に「追加」したときに表示されるアイコン (apple-touch-icon / PWA アイコン) も、ファビコン一式の一部です。「ファビコンがない」「サイズが揃っていない」といった状態は、ユーザーの信頼感を下げ、PWA 対応の妨げにもなります。

背景

サイトのファビコンを更新する作業は、新規サイトでも既存サイトのリブランディングでも発生します。ロゴ画像 1 枚から必要なアイコンセットを揃えるのは地味に手間のかかる工程です。

Zerosend のファビコン生成ツール は、この工程をブラウザ内で完結させます。ロゴ画像を外部に送らずに一式を作成できるので、NDA 下の受託案件や未公開のブランディング作業でも安心して使えます。

何が出力されるか

1 枚の画像 (PNG / JPG / WebP / SVG) から次の 9 ファイルを生成し、ZIP で配布します。

  • favicon.ico — 16 / 32 / 48px のマルチサイズ ICO
  • favicon-16.png / favicon-32.png / favicon-48.png
  • apple-touch-icon.png (180×180)
  • icon-192.png / icon-512.png (PWA)
  • site.webmanifest
  • snippet.html — <head> に貼り付ける link タグ

使い方ステップ

  1. 画像を準備する — 正方形の PNG / JPG / WebP / SVG を用意。最低でも 512×512px 推奨
  2. ドロップする — /tools/favicon-generator を開いてドラッグ&ドロップ
  3. ZIP をダウンロードする — ボタンを押すと 9 ファイルが入った ZIP が生成される
  4. HTML に貼り付ける — snippet.html の内容をサイトの <head> にコピーして完了

ICO を自前で書き出す

PNG は Canvas API で簡単に書き出せますが、ICO は少し工夫が必要です。とはいえ、Windows Vista 以降の ICO は PNG バイト列をそのまま埋め込める ため、意外と単純です。

構造:

  • ICONDIR (6 バイト): reserved / type / image count
  • ICONDIRENTRY (16 バイト × 画像数): 幅 / 高さ / bpp / サイズ / オフセット
  • 画像データ: PNG のバイト列を順に連結

依存ゼロで 30 行程度に収まります。domain/processors/faviconGenerator.ts で実装を公開しています。

よくある質問

Q. どのサイズが必要ですか？ A. 最低限は favicon.ico (16/32px) と apple-touch-icon.png (180px) です。PWA 対応するなら 192px と 512px も必要です。本ツールはこれらをすべて一括生成します。

Q. SVG のロゴから生成できますか？ A. はい。SVG を入力するとブラウザ側で各サイズにラスタライズしてから ICO / PNG を生成します。

検証の楽しさ

作ったあとは DevTools の Network タブで確認できます。画像選択 → 生成 → ダウンロードの全てで、あなたのロゴが外に出ないことを自分で検証できます。

関連ツール

  • 画像圧縮 — 入力画像が大きすぎる場合、事前に軽量化
  • 画像リサイズ — 正方形にトリミングしてからファビコン生成すると精度が上がる

まとめ

1 枚の画像から ICO / PNG / apple-touch-icon / manifest / HTML スニペットを、あなたの端末だけで生成できます。試してみてください。

© Zerosend Editorial ← Blog Index

関連記事

·8 分

音声形式を変換する — /tools/audio-convert の思想と使い方

Zerosend の音声形式変換ツールは、MP3 / WAV / M4A / FLAC / OGG などをサーバーに送らずブラウザ内で相互変換します。録音インタビューや音源ファイルの形式統一に。Zerosend 編集部が解説。

音声変換ツール
·10 分

音声をトリミング (切り出し) する — /tools/audio-trim の思想と使い方

Zerosend の音声トリミングツールは、音声ファイルをサーバーに送らずブラウザ内で任意の区間だけ切り出します。長尺インタビュー・会議録音・ポッドキャスト素材の整形に。Zerosend 編集部が解説。

音声トリミングツール
·8 分

HEIC を JPG に変換する — /tools/heic-to-jpg の思想と使い方

iPhone で撮った HEIC 画像を Windows / Android や古いシステムで開けるよう JPG に変換するツール。サーバーに送らずブラウザ内で変換する仕組みと注意点を Zerosend 編集部が解説。

HEIC画像iPhoneツール