Favicon Generator - Create Favicons from Image, Emoji & Text Online

// Generate favicon files in the browser using Canvas API

function renderTextFavicon(text, options = {}) {
  const {
    size = 512,
    fontFamily = 'Inter, sans-serif',
    fontWeight = 'bold',
    textColor = '#ffffff',
    bgColor = '#4f46e5',
    shape = 'rounded',
    padding = 0.1,
  } = options;

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

  // Draw background
  ctx.fillStyle = bgColor;
  if (shape === 'circle') {
    ctx.beginPath();
    ctx.arc(size / 2, size / 2, size / 2, 0, Math.PI * 2);
    ctx.fill();
  } else if (shape === 'rounded') {
    const r = size * 0.15;
    ctx.beginPath();
    ctx.roundRect(0, 0, size, size, r);
    ctx.fill();
  } else {
    ctx.fillRect(0, 0, size, size);
  }

  // Draw text
  const fontSize = size * (1 - padding * 2) * 0.7;
  ctx.fillStyle = textColor;
  ctx.font = `${fontWeight} ${fontSize}px ${fontFamily}`;
  ctx.textAlign = 'center';
  ctx.textBaseline = 'middle';
  ctx.fillText(text, size / 2, size / 2);

  return canvas;
}

// Example usage
const canvas = renderTextFavicon('AB', {
  bgColor: '#4f46e5',
  textColor: '#ffffff',
  shape: 'rounded',
});

// Convert to PNG blob
canvas.toBlob((blob) => {
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url;
  a.download = 'favicon.png';
  a.click();
}, 'image/png');