Favicon maker

Browser · DevTools console

Current inputs apply only to fields used by the example. Selected files are not embedded.

const canvas = document.createElement("canvas");
canvas.width = canvas.height = 32;
const ctx = canvas.getContext("2d");
ctx.fillStyle = "#b6ebbd";
ctx.fillRect(0, 0, 32, 32);
ctx.fillStyle = "#17251a";
ctx.font = "bold 24px sans-serif";
ctx.textAlign = "center";
ctx.textBaseline = "middle";
ctx.fillText("S", 16, 17);
canvas.toBlob(blob => {
  const url = URL.createObjectURL(blob);
  const link = document.createElement("a");
  link.href = url;
  link.download = "favicon-32.png";
  link.click();
  setTimeout(() => URL.revokeObjectURL(url), 1000);
});