javascript

The following JS function will:

• Create a favicon from an emoji
• Change the current page favicon
• Remove the emoji from the page title if exists

 1function setEmojiAsFavicon(emoji) {
 2  // Remove emoji from page title if exists
 3  document.title = document.title.replace(/^[\p{Emoji}\s]+/u, '').trim();
 4
 5  // Create a canvas to draw the emoji
 6  const canvas = document.createElement('canvas');
 7  canvas.width = 16;
 8  canvas.height = 16;
 9  const ctx = canvas.getContext('2d');
10  
11  // Draw emoji, centered and scaled with transparent background
12  ctx.font = '16px serif';
13  ctx.textAlign = 'center';
14  ctx.textBaseline = 'middle';
15  ctx.fillText(emoji, 8, 10);
16  
17  // Convert canvas to favicon
18  const link = document.querySelector("link[rel~='icon']") || document.createElement('link');
19  link.type = 'image/x-icon';
20  link.rel = 'shortcut icon';
21  link.href = canvas.toDataURL();
22  
23  // Append to head if not already there
24  if (!document.querySelector("link[rel~='icon']")) {
25    document.head.appendChild(link);
26  }
27}

See Also