Replace Facebook's favicon with an emoji or custom SVG

custom_emoji2.js

// ==UserScript==
// @name         Facebook Favicon
// @namespace    http://tampermonkey.net/
// @version      1.0
// @description  Replace Facebook's favicon with an emoji or custom SVG
// @author       azdanov
// @match        https://*.facebook.com/*
// @grant        none
// @run-at       document-start
// ==/UserScript==

(function() {
    'use strict';

    // Configuration
    const ICON_TYPE = 'svg'; // 'emoji' or 'svg'
    const EMOJI = '⭐'; // The emoji to use
    const SVG = `
    <?xml version="1.0" encoding="utf-8"?>
<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M3 12H21M3 12C3 16.9706 7.02944 21 12 21M3 12C3 7.02944 7.02944 3 12 3M21 12C21 16.9706 16.9706 21 12 21M21 12C21 7.02944 16.9706 3 12 3M12 21C4.75561 13.08 8.98151 5.7 12 3M12 21C19.2444 13.08 15.0185 5.7 12 3" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>`;

    function createFaviconFromEmoji(emoji) {
        const canvas = document.createElement('canvas');
        canvas.width = 32;
        canvas.height = 32;

        const ctx = canvas.getContext('2d');
        ctx.font = '28px Arial';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';
        ctx.fillText(emoji, 16, 16);

        return canvas.toDataURL();
    }

    function createFaviconFromSVG(svgString) {
        const blob = new Blob([svgString], { type: 'image/svg+xml' });
        return URL.createObjectURL(blob);
    }

    function updateFavicon() {
        const iconUrl = ICON_TYPE === 'emoji'
            ? createFaviconFromEmoji(EMOJI)
            : createFaviconFromSVG(SVG);

        let link = document.querySelector("link[rel*='icon']");

        // If no favicon exists, create one
        if (!link) {
            link = document.createElement('link');
            link.rel = 'icon';
            document.head.appendChild(link);
        }

        // Update favicon
        link.href = iconUrl;

        // Clean up if using SVG blob URL
        if (ICON_TYPE === 'svg') {
            // Revoke the old blob URL after a short delay to ensure the browser has loaded the new favicon
            setTimeout(() => URL.revokeObjectURL(iconUrl), 1000);
        }
    }

    // Initial update
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', updateFavicon);
    } else {
        updateFavicon();
    }

    // Update favicon when page visibility changes (helps with dynamic favicon updates)
    document.addEventListener('visibilitychange', updateFavicon);

    // Periodically check and update favicon (some sites might try to restore it)
    setInterval(updateFavicon, 2000);
})();