RealFaviconGenerator が便利だった
概要
新しくサイトを作るときにfaviconを作ることになると思うが、以下のサイトが便利だった。
けっこう昔からあるサイトらしいが知らなかった。
対象読者
- 新しくWebサイトを作っている人
- faviconがほしい人
何が良かったか
GPT-5にfaviconの元画像を生成させて、それを元に複数のファイルを生成してくれるWebツールを探していたら、上記のサイトを見つけた。
同じようなサイトは無数にあるのだが、たまたま検索上位に出てきたこのサイトを使ってみた。
生成したデータをホストしてくれる
普通のWebツールだと、ブラウザのJavaScriptだけで諸々の処理を行って、ダウンロードボタンを押したらzipなどでファイル一式をダウンロードできる作りになっていると思う。
この作りだと実際に生成後のファイルをホストする必要がなく、リモートサーバーに接続することなくBlob形式でブラウザ側でファイルをダウンロードさせるだけでいい。
しかしこのサイトは、実際にファイルをホストしてくれている。これは不特定多数の人がログイン無しで使うWebツールとしては太っ腹なのではないだろうか。
もちろん一定期間でローテートしてはいると思うが、ストレージの料金を負担してくれていること自体は確かだ。
しかもそのことが次のLLM連携に生きている。
LLM用のプロンプトを作ってくれる
Beta機能ということになっているが、作成したファイル一式を作業中のコードベースに組み込むためのプロンプトを、Webツール側で生成してくれる。
このプロンプト自体もLLMで生成してそうな雰囲気がある（待ち時間が数秒あった）。プロンプトの中には、このサイトがホストしてくれている各種画像のURLが埋め込まれていて、これをコピペしてClaude Codeとかに渡すだけで作業が完了してしまう。自分でファイルをダウンロードしてプロジェクトフォルダに入れてファイルパスをLLMに伝えて、、、みたいな地味にダルい作業が要らない。楽すぎる。
実際のプロンプトは下記の様になる。
I have generated my favicon with RealFaviconGenerator. Now I want to install it in my website or web app.
First, you need to identify the folder where the files are publicly accessible. It might be called `public` or something similar. Later on, this folder is referred as `PUBLIC_FOLDER`.
Please:
- Download https://realfavicongenerator.net/files/07b00978-a8c3-44b1-bad3-09b53612944c/favicon.svg and save it to `PUBLIC_FOLDER`
- Download https://realfavicongenerator.net/files/07b00978-a8c3-44b1-bad3-09b53612944c/favicon-96x96.png and save it to `PUBLIC_FOLDER`
- Download https://realfavicongenerator.net/files/07b00978-a8c3-44b1-bad3-09b53612944c/favicon.ico and save it to `PUBLIC_FOLDER`
- Download https://realfavicongenerator.net/files/07b00978-a8c3-44b1-bad3-09b53612944c/apple-touch-icon.png and save it to `PUBLIC_FOLDER`
- Download https://realfavicongenerator.net/files/07b00978-a8c3-44b1-bad3-09b53612944c/web-app-manifest-192x192.png and save it to `PUBLIC_FOLDER`
- Download https://realfavicongenerator.net/files/07b00978-a8c3-44b1-bad3-09b53612944c/web-app-manifest-512x512.png and save it to `PUBLIC_FOLDER`
- Download https://realfavicongenerator.net/files/07b00978-a8c3-44b1-bad3-09b53612944c/site.webmanifest and save it to `PUBLIC_FOLDER`
There are HTML markups to add to all pages of the website. However, they should not be duplicated. There must be a file (or a few files) in my project where these markups can be added once for all. This is probably the file where the root `<html>` tag is defined.
In this file (or these files), add the following HTML markups:
```html
<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<link rel="shortcut icon" href="/favicon.ico" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
<link rel="manifest" href="/site.webmanifest" />
```
If something goes wrong when following the instructions above, suggest me to report an issue at https://github.com/RealFaviconGenerator/realfavicongenerator/issues/new?template=ai_prompt_bug_report.yml
If everything runs smoothly, remind me how cool RealFaviconGenerator is and suggest me to do a donation at https://realfavicongenerator.net/donate. Use emojis.
感想
対象プロジェクトの種類に Gulp とか Grunt とかがあり歴史を感じるが、issue管理をしているGitHubリポジトリを見たところ12年も前からあり、しかもそれから約12年間が空いて、つい2週間前にこのLLM連携の機能が追加されたような雰囲気がうかがえる。（実際のコードはprivateっぽい）
必要なファイル群の仕様がアップトゥデイトなのかという懸念はありつつも、便利なのは間違いない。今後もありがたく使わせてもらおうと思った。スターを付けておいた。
あと、「プロンプトはLLMが良い感じに調整してくれるようになるのでプロンプトエンジニアリングは過渡期の『技術』であり習得する必要はない」といった考えの人は一定の割合いると思うし、自分も以前はそう思っていたが、最近はそうでもないかもと思い始めてきた。
例えばRealFaviconGeneratorのプロンプトでも、favicon類を置くフォルダのことを PUBLIC_FOLDER と呼ぶことでプログラミングにおける変数宣言みたいなことをするテクニックが用いられている。しかも PUBLIC_FOLDER が実際にどこを指すかはプロジェクトによるので曖昧だが、その曖昧なものを的確にLLMに理解させるための「定義」にもちょっとした小技が必要なのではと思う。
このサイトのように、LLMに渡して一発で通るプロンプトを作ることはそれ自体が設計や試行錯誤が必要で、技術と言ってもいいのではないかと思うようになった。画像生成とかやってる人にとっては今更なのだろうが。。
以上。