파비콘 제작

Browser · DevTools console

현재 입력 반영은 코드에 사용된 항목에만 적용됩니다. 파일 입력은 예제에 포함하지 않습니다.

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);
});