Website Favicon Icon From URL Generator

async function processImage(originalImg, websiteURL = "https://github.com", iconSize = 128) {
    // Determine target size, parsing if a string is provided
    const sizeInt = typeof iconSize === "number" ? iconSize : parseInt(iconSize, 10) || 128;

    // Parse the provided website URL to extract the domain name
    let domain = "";
    try {
        let urlStrToParse = String(websiteURL).trim();
        // Fallback to https:// to allow URL constructor to gracefully parse domain
        if (!urlStrToParse.startsWith("http://") && !urlStrToParse.startsWith("https://")) {
            urlStrToParse = "https://" + urlStrToParse;
        }
        domain = new URL(urlStrToParse).hostname;
    } catch (e) {
        domain = String(websiteURL).trim() || "unknown-domain"; // Fallback
    }

    // Create the main visually pleasing container to render inside a UI div
    const container = document.createElement("div");
    container.style.width = "100%";
    container.style.maxWidth = "420px";
    container.style.margin = "0 auto";
    container.style.padding = "24px";
    container.style.boxSizing = "border-box";
    container.style.backgroundColor = "#ffffff";
    container.style.border = "1px solid #e1e4e8";
    container.style.borderRadius = "12px";
    container.style.fontFamily = "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'";
    container.style.boxShadow = "0 4px 12px rgba(0,0,0,0.05)";
    container.style.display = "flex";
    container.style.flexDirection = "column";
    container.style.alignItems = "center";

    // Title label for the widget
    const titleText = document.createElement("h2");
    titleText.innerText = "Favicon Extractor";
    titleText.style.margin = "0 0 20px 0";
    titleText.style.fontSize = "22px";
    titleText.style.fontWeight = "600";
    titleText.style.color = "#24292e";
    container.appendChild(titleText);

    // Wrapper for the icon itself to give it a neat transparent-ready presentation
    const imgWrapper = document.createElement("div");
    imgWrapper.style.width = `${sizeInt}px`;
    imgWrapper.style.height = `${sizeInt}px`;
    imgWrapper.style.display = "flex";
    imgWrapper.style.alignItems = "center";
    imgWrapper.style.justifyContent = "center";
    imgWrapper.style.borderRadius = "8px";
    imgWrapper.style.boxShadow = "inset 0 0 0 1px rgba(225,228,232,0.8), 0 2px 4px rgba(0,0,0,0.05)";
    imgWrapper.style.backgroundImage = "linear-gradient(45deg, #f8f9fa 25%, transparent 25%), linear-gradient(-45deg, #f8f9fa 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #f8f9fa 75%), linear-gradient(-45deg, transparent 75%, #f8f9fa 75%)";
    imgWrapper.style.backgroundSize = "20px 20px";
    imgWrapper.style.backgroundPosition = "0 0, 0 10px, 10px -10px, -10px 0px";
    imgWrapper.style.marginBottom = "24px";
    imgWrapper.style.overflow = "hidden";

    // Set up dynamically requested image tag targeting a favicon delivery service
    const img = new Image();
    img.alt = `Favicon for ${domain}`;
    img.style.maxWidth = "100%";
    img.style.maxHeight = "100%";
    img.style.objectFit = "contain";
    
    return new Promise((resolve) => {
        // On successful fetch, populate valid data bindings
        img.onload = () => {
            imgWrapper.appendChild(img);
            
            const detailsBox = document.createElement("div");
            detailsBox.style.width = "100%";
            detailsBox.style.backgroundColor = "#f6f8fa";
            detailsBox.style.padding = "16px";
            detailsBox.style.borderRadius = "8px";
            detailsBox.style.textAlign = "center";
            detailsBox.style.boxSizing = "border-box";
            
            const domainLabel = document.createElement("div");
            domainLabel.style.fontWeight = "600";
            domainLabel.style.fontSize = "16px";
            domainLabel.style.color = "#24292e";
            domainLabel.style.marginBottom = "6px";
            domainLabel.style.wordBreak = "break-all";
            domainLabel.innerText = domain;
            
            const sizeLabel = document.createElement("div");
            sizeLabel.style.color = "#586069";
            sizeLabel.style.fontSize = "14px";
            sizeLabel.innerText = `Favicon successfully fetched (Size: ${img.width}x${img.height})`;
            
            detailsBox.appendChild(domainLabel);
            detailsBox.appendChild(sizeLabel);
            
            container.appendChild(imgWrapper);
            container.appendChild(detailsBox);
            resolve(container);
        };

        // Fallback functionality in case API is blocked, CORS drops, or URL provides nothing
        img.onerror = () => {
            const fbCanvas = document.createElement("canvas");
            fbCanvas.width = sizeInt;
            fbCanvas.height = sizeInt;
            fbCanvas.style.maxWidth = "100%";
            fbCanvas.style.maxHeight = "100%";
            fbCanvas.style.objectFit = "contain";
            
            const ctx = fbCanvas.getContext("2d");
            // Safely compute sizing against dimensions that might randomly equal zero
            const ow = originalImg.width || 1;
            const oh = originalImg.height || 1;
            const scale = Math.min(sizeInt / ow, sizeInt / oh);
            const w = ow * scale;
            const h = oh * scale;
            const x = (sizeInt - w) / 2;
            const y = (sizeInt - h) / 2;
            
            // Draw uploaded original as the fallback mockup
            if (originalImg && originalImg.width > 0) {
                ctx.drawImage(originalImg, x, y, w, h);
            }
            imgWrapper.appendChild(fbCanvas);
            
            const errorBox = document.createElement("div");
            errorBox.style.width = "100%";
            errorBox.style.backgroundColor = "#fff0f0";
            errorBox.style.border = "1px solid #ffdce0";
            errorBox.style.padding = "16px";
            errorBox.style.borderRadius = "8px";
            errorBox.style.textAlign = "center";
            errorBox.style.boxSizing = "border-box";
            
            const errorTitle = document.createElement("div");
            errorTitle.style.fontWeight = "600";
            errorTitle.style.color = "#d73a49";
            errorTitle.style.marginBottom = "6px";
            errorTitle.style.fontSize = "15px";
            errorTitle.innerText = "Not Found or Restricted";
            
            const errorDesc = document.createElement("div");
            errorDesc.style.color = "#86181d";
            errorDesc.style.fontSize = "14px";
            errorDesc.innerText = `Unable to pull favicon for ${domain}. Showing uploaded image instead.`;
            
            errorBox.appendChild(errorTitle);
            errorBox.appendChild(errorDesc);
            
            container.appendChild(imgWrapper);
            container.appendChild(errorBox);
            resolve(container);
        };

        // Trigger dynamic API service payload
        const apiSegmentParams = encodeURIComponent(domain) + '&sz=' + sizeInt;
        img.src = 'https://www.google.com/s2/favicons?domain=' + apiSegmentParams;
    });
}