Vanilla JavaScript Projects

Project 94, SEO and site tools

Favicon Generator

Every site needs a set of icons: tiny ones for browser tabs, bigger ones for phones and app installs. This makes them all from one letter or picture.

NNN
Main API
Canvas 2D
Output
PNG + manifest
Dependencies
None
Your browser
Checking

Make your icon

Type up to two letters and pick colours and a shape, or upload a square image. Download the sizes you need and copy the code.

nookery.example
 





  
How it works
  1. Draw once per sizeEach size is drawn fresh on its own canvas, not scaled down from a big one, so small icons stay crisp.
  2. Shapes with clipA rounded rectangle, circle or square clip is applied before drawing, so letters and photos fit the chosen shape.
  3. Code that goes with itThe tool writes the link tags for the head and a web manifest for phones and app installs.

  
function icon(size, letter, bg, fg) {
  const c = document.createElement("canvas");
  c.width = c.height = size;
  const x = c.getContext("2d");
  x.beginPath(); x.roundRect(0, 0, size, size, size * 0.22); x.clip();
  x.fillStyle = bg; x.fillRect(0, 0, size, size);
  x.fillStyle = fg; x.textAlign = "center"; x.textBaseline = "middle";
  x.font = `800 ${size * 0.62}px sans-serif`;
  x.fillText(letter, size / 2, size / 2);
  return c.toDataURL("image/png");
}