Website Address To Favicon Icon Converter

function processImage(originalImg, websiteUrl = "example.com", size = 64, shape = "rounded", useOriginalImage = "no", bgColor = "auto") {
    // Parameter normalization
    size = parseInt(size, 10);
    if (isNaN(size) || size <= 0) size = 64;

    const canvas = document.createElement('canvas');
    canvas.width = size;
    canvas.height = size;
    const ctx = canvas.getContext('2d');

    // Create shape masking path (useful for rounded/circular favicons)
    ctx.beginPath();
    if (shape === "circle") {
        ctx.arc(size / 2, size / 2, size / 2, 0, Math.PI * 2);
    } else if (shape === "rounded") {
        const r = size * 0.2; // 20% border radius
        ctx.moveTo(r, 0);
        ctx.lineTo(size - r, 0);
        ctx.quadraticCurveTo(size, 0, size, r);
        ctx.lineTo(size, size - r);
        ctx.quadraticCurveTo(size, size, size - r, size);
        ctx.lineTo(r, size);
        ctx.quadraticCurveTo(0, size, 0, size - r);
        ctx.lineTo(0, r);
        ctx.quadraticCurveTo(0, 0, r, 0);
    } else {
        // "square" or any unrecognized shape defaults to square
        ctx.rect(0, 0, size, size);
    }
    ctx.closePath();

    // Clip the drawing region to the chosen shape
    ctx.clip();

    // Mode 1: If requested, use the original image to generate the favicon
    if (useOriginalImage === "yes" || useOriginalImage === "1") {
        if (originalImg && originalImg.width && originalImg.height) {
            // Draw and scale to fit
            ctx.drawImage(originalImg, 0, 0, size, size);
            return canvas;
        }
    }

    // Mode 2: Generate a beautiful letter-based favicon from the Website Address (Standard fallback approach)
    let domain = websiteUrl;
    try {
        if (!websiteUrl.startsWith('http://') && !websiteUrl.startsWith('https://')) {
            domain = new URL('http://' + websiteUrl).hostname;
        } else {
            domain = new URL(websiteUrl).hostname;
        }
    } catch (e) {
        // Fallback if URL parsing fails
        domain = String(websiteUrl);
    }

    // Clean up "www." for a better initial letter match
    domain = domain.replace(/^www\./i, '').trim();
    const firstLetter = (domain.charAt(0) || 'W').toUpperCase();

    // Deterministic random color generator based on the domain name
    const colorPalette = [
        '#F44336', '#E91E63', '#9C27B0', '#673AB7', '#3F51B5', '#2196F3',
        '#03A9F4', '#00BCD4', '#009688', '#4CAF50', '#8BC34A', '#CDDC39',
        '#FFB300', '#FF9800', '#FF5722', '#795548', '#607D8B', '#333333'
    ];

    let colorIndex = 0;
    for (let i = 0; i < domain.length; i++) {
        colorIndex += domain.charCodeAt(i);
    }

    // Assign color
    const renderedBgColor = (bgColor === "auto" || !bgColor) ? colorPalette[colorIndex % colorPalette.length] : bgColor;

    // Draw background
    ctx.fillStyle = renderedBgColor;
    ctx.fill(); 

    // Draw text (letter)
    ctx.fillStyle = "#FFFFFF";
    ctx.textAlign = "center";
    ctx.textBaseline = "middle";
    // Scale font size based on overall favicon size
    ctx.font = `bold ${size * 0.55}px Arial, Helvetica, sans-serif`;
    
    // Fill text completely centered (slight vertical offset for visual balance)
    ctx.fillText(firstLetter, size / 2, size / 2 + size * 0.05);

    return canvas;
}