2025年にFaviconを自動生成する

Favicon Generator

2025年にFaviconを用意する方法 を見て、記事の内容に沿って自動でFaviconを生成してくれるツールを作ってみました。

試してみる

使い方

1. 正方形比率のSVG画像をアップロードする。
2. 生成されたHTMLコードとダウンロードした画像ファイルをプロジェクトに含める。
3. 終わり。

詳細

• ✅ SVGファイルはSVGOで最適化されます。

• ✅ ICOファイルには16px、32pxの画像が含まれます。

• ✅ 180px、192px、512pxのPNG画像が生成されます。

• ❌ PNGファイルはSquooshで圧縮されません。

感想

GPTと一緒に作業しましたが、UIはうまく作ってくれたものの、外部モジュールを取り込む部分で不具合がかなり出ました。この部分は人が介入する必要がありました。
ICOファイルも作れなかったため、別の新しい会話を開いてコードを作り直してもらう必要がありました。

久しぶりにこういうものを作って、とても楽しかったです.

[honglu]

とても役に立ちました！ありがとうございます。

[hi098123]

PNG圧縮は Squoosh を使わず、
UPNG https://github.com/photopea/UPNG.js を使えば、今のコードでもそれほど難しくなく圧縮できると思います。
（以前に比較したときは、png では性能や圧縮率が同等か、やや優位だったように記憶しています。正確ではありません。）
cnum の値を 0〜256 で指定して圧縮でき、128 くらいなら実用的に圧縮できるはずです。

[secret3056]

mask icon の生成は、色を取り除いて手作業で行う必要がある、という追加情報があるとよさそうです。

[secret3056]

ああ、mask icon はもう使われていないんですね……

[xguru]

うわー、いいですね。記事を見て、AIと一緒にすぐ作るプロジェクトだなんて（笑）。世の中はこんなふうに変わっていくんですね。

[huiya]

単純作業が減って、作業の負担がなくなったように感じます。本当に良い時代です！