夢見がちWeb屋の浮かれ雑記帳

フロントエンド周りの技術ネタやらなんやらね

furを使ったFaviconの自動生成

Web開発とかしていると、ファビゴンやらバナーを手抜きでちゃちゃっと作りたくなる時がよくある。

多くの場合は、それっぽい色でタイトルやら頭文字やら書いてあるだけで十分だったりする。 でもそのためにわざわざペイントツールを開いてなんやかんやとやりたくない。

コマンドラインちょちょっと済ませたい!

というわけで作ったのがこれ ↓↓

github.com

Node.js製のCLIツールで、

npm install fur -g

としたあと、コマンドラインから手抜き画像の生成ができる。

例えばこのブログのfavicon

 fur favicon "blog-favicon.png" --text="浮" --color="bi" --font="cn" --shape="g"

とやると、こんな画像が生成される

f:id:okunishinishi:20170122103721p:plain

バナーの方は

fur banner "blog-banner.png" --text="夢見がちWeb屋の浮かれ雑記帳" --color="bi" --font="cn" --shape="c" --font-size=48

f:id:okunishinishi:20170122103726p:plain

仕組みとしては、js内でSVG画像を生成したあと、phantom.jsを使ってpngに変換している。