@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を使用する
- 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.画像コピーで良かった感。