毎回favicon.icoが無くてエラーが出てくるのが辛かったので一瞬でfavicon.icoを生成する

@yushimatenjinです。先日PlayCanvas運営事務局としてQiitaのOrganizationに登録していただきました。今日はいつもなんとなく見過ごしていたけれど少し気を取られていたfaviconが無い & 設定するのが少し手間という問題を解決したので共有をします。

faviconを入れていないときに出てくる console.errorの表示が気になる。

毎回からHTMLファイルを作成したときに出てくるエラーに気を取られる...

何を作ったか

faviconを一瞬で生成してくれるコマンドを作っただけです。今回はそれだけですが、少しだけ価値がありそうだなと思い投稿をさせていただきました。

こんな感じで一瞬でfavicon.icoを作ってくれるものです。

faviconとはなにか

favicon.icoの定義があまり深くわかっていなかったので、faviconについても調べてみました

w3.org -How to Add a Favicon to your Site
によるとFaviconの形式は
- 8ビットまたは24ビット
- サイズは16x16または32x32ピクセル
- 画像の形式はpng, gif, icoのうちのどれか

だそうです。2005年の情報なのでも新しくなっているのだろうか後方の互換はあるだろうと思いこの仕様に則って作りました。

faviconを自動生成する

npmの動く環境で。faviという今回作成したライブラリを使用することでカレントディレクトリにfavicon.icoをfaviconを自動生成します。

主な動かし方は2つあります。

npxを使用する

1. npxを使用し実行
   

npx favi

インストールをして使う

1.グローバルにインストール

npm install -g favi

2.実行

favi

実行結果

カレントディレクトリにfavicon.icoが追加されます。

中身

作成したライブラリはGitHubで公開をしています。
yushimatenjin/favi

canvas-node

使用した外部のライブラリとしてcanvas ★6000↑ というライブラリを使用しました。

GitHubのスター数が6000を超えており、Node.jsでCanvasのような操作をすることができるライブラリ。
WebのCanvas APIを多くサポートしており、作成した画像のエクスポートもすることができる。

このライブラリを使うことでNode.jsでもブラウザ上からcanvasを操作するような書き方で画像を作ることができます。

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const fs = require("fs");
const canvas_1 = require("canvas");

const CANVAS_SIZE = 32;
const OUTPUT = "./favicon.ico";
const canvas = canvas_1.createCanvas(CANVAS_SIZE, CANVAS_SIZE);
const ctx = canvas.getContext("2d");
ctx.fillStyle = "rgb(255, 255, 255)";
ctx.fillRect(0, 0, CANVAS_SIZE, CANVAS_SIZE);
ctx.fill();
ctx.fillStyle = "rgba(255,98,89,1);";
ctx.font = "40px sans-serif";
ctx.fillText("●", 5.0, CANVAS_SIZE - 4);
ctx.fill();

const out = fs.createWriteStream(OUTPUT);
const stream = canvas.createPNGStream();

stream.pipe(out);
out.on("finish", () => console.log("The favicon was created."));

このソースコードから生成されるファビコンがこれです。

念の為Mac標準のプレビュー機能で確認してみる

• 32x32ピクセル
• 色空間: RGB

これで、毎回プロジェクトを作成するたびに、適当なfaviconを用意をするに少し時間を取られていたことが解消されました。

ps.画像コピーで良かった感。