Gaurav Sachdeva

Have you ever wanted to spice up your website’s favicon with a personalized touch? What better way than to use emojis? With just a few lines of JavaScript, you can replace the traditional favicon with an emoji, making your site feel modern, quirky, and memorable.

Here’s a simple code snippet to get you started:

const setFavicon = (emoji) => {
  const canvas = document.createElement("canvas");
  canvas.height = 32;
  canvas.width = 32;

  const ctx = canvas.getContext("2d");
  ctx.font = "28px serif";
  ctx.fillText(emoji, -2, 24);

  const favicon = document.querySelector("link[rel=icon]");
  if (favicon) favicon.href = canvas.toDataURL();
};

setFavicon("❤️");

With this code, you can easily customize your favicon with any emoji you like. Whether it’s a heart (❤️), fire (🔥), or something else that matches your site’s theme, this method is a fun and lightweight way to stand out.

Cheers! 🥳