11
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Last updated at Posted at 2019-09-25

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

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

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

favi

何を作ったか

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

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

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

実行結果

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

中身

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

canvas-node

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

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

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

favi.js
"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.画像コピーで良かった感。

11
4
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
11
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?