コーディングエージェントと併走するとき Bootstrap Icons ほか CDN 経由での favicon が開発で便利だったメモです。

背景

AI とともに開発しているときに、だいぶ開発が進んでいくときに自分の開発したものに favicon が欲しくなってきます。

で、AI から 人間にデータ取ってきて！お願いされるわけですが、なかなか悩ましい。そもそも豊富なアイコンセットから検討したいし、できれば AI に取ってきてほしい。

なぜなら、そのプロジェクトフォルダの中に入れたり、コピペしたりと手間がかかるというか、ワンクッションの手渡しが悩ましい。

しかも、アイコンのサイトはダウンロードボタンが介在しやすかったりして AI が直接取りに行きにくかったり、一度、ど根性で Playwright で操作を作ってやってみたけど、これはやりすぎだなあ感が強い。

これがどうにかうまくいかないかなあと考えていました。

よく考えたら

よく考えたら AI コーディングエージェントが得意なこととして URL でアクセス可能なリソースの取得です。 url とか wget で取れるやつです。

ですので CDN 経由で直接ダウンロード可能なアイコンライブラリを提示してみたらうまくいきました。

Bootstrap Icons がよかった

ということで、そのなかでも使い勝手がよかったのは Bootstrap Icons でした。

2026/3 時点での情報です。

Bootstrap Icons · Official open source SVG icon library for Bootstrap

こんな感じでデータが取得できます。

https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/icons/[アイコン名].svg

ライセンスは MIT で list-check.svg, clipboard-check.svg, check-square-fill.svg みたいに取得できます。

「虫眼鏡みたいな SVG アイコンの favicon がいいなあ」とか伝えると、うまくいけば Bootstrap Icons の Web サイトのリストも見ながら、英語名で推測探してくれます。

SVG Faviconのいいところ

また、SVG favicon は以下のようないいところがあります。

• 解像度非依存なので様々な解像度で出しやすい
• ファイルサイズが小さめ
• テキストとして編集可能なのでコーディングエージェントで色要素を追加編集できたりする
• 主要ブラウザ対応（Chrome, Firefox, Edge, Safari）では対応している

ということで、以前と比べると導入しやすくなりました。Nuxt とかでアイコン指定だけすればサッと入りますし、この中でもテキストとして編集可能というところで、私の場合は、さっきの虫眼鏡アイコンは黒だったものをダウンロードしてから、コーディングエージェントに fillColor を作っているアプリに合わせて青色にしたりしてやりやすかったです！