How to Use FaviScript
Above you get an editor, a gallery and a background color selector. The code you write in the editor is run for a <canvas> of each of the sizes listed. Your code is wrapped in a function that is bound to a 2d canvas context and accepts two arguments, the canvas' height and width. Here is an example of what it does:
var canvas = document.getElementById('#my-canvas');
var context = canvas.getContext('2d');
function myFavicon(canvas, ctx) {
// do some pixel pushing here
// canvas.width === 123
// canvas.height === 456
};
myFavicon(123, 456);The gallery is where each of your icons are previewed. Once your code is run, all of the canvases are updated instantly. You'll also notice the site's favicon is updated as well.
The background color selector simply changes gallery background color. It does not actually change the background color of your icon! Choose a good color to design your icon on top of and you're ready to go. And just to be clear (hahaha), your icon's background is transparent unless you set it yourself in the code. The background color you choose in the color picker is just aesthetic.
About
More or less, this is the tool I've always wanted. I hate the process of creating icons for my small weekend projects, and yet, they look so naked without them. Even with a number of image editors at my disposal the whole process annoys me. So, FaviScript was created so I can make my own icons procedurally and never be without a favicon again.
The source code for FaviScript is open and available on GitHub.