Build a Favicon Generator with AI

Build a single-page favicon generator as a static HTML/CSS/JS site. Use a dark theme with background #0f0f17, card surfaces #12121a, and accent color #ec4899 (pink). Center the content at max-width 700px. The page layout has: a large live preview area at the top, controls in the middle, and download options at the bottom. Live Preview Area: Show a large canvas (256x256px displayed, but render at 512x512 internally for quality) centered on the page. This is the main preview canvas. Below the large canvas, show a row of size previews: the same favicon rendered at actual sizes — 16x16, 32x32, 48x48, 64x64, and 180x180 pixels — each on a small checkerboard background (to show transparency). Also include a "browser tab" mockup: a small rectangle that looks like a browser tab (rounded top corners, light gray background, tab text "My Website") with the 16x16 favicon displayed in the tab to the left of the text, showing exactly how the favicon will look in a real browser. Input Controls (organized in a card): 1. Content Input: A text input field (max 3 characters) for letters, numbers, or emoji. Default value: a rocket emoji. As the user types, the canvas updates in real time. Include a row of 12 quick-pick emoji buttons below the input: common choices like a lightning bolt, star, heart, fire, globe, music note, code brackets, camera, paintbrush, book, gear, and check mark. Clicking one inserts it into the input. 2. Text Color: A color picker (native HTML input) for the text/emoji color. Default: #ffffff. Only affects text characters, not emoji (emoji render in their native colors). 3. Background Color: A color picker for the background. Default: #3b82f6 (blue). Also include 8 preset color buttons in a row: #3b82f6, #ef4444, #22c55e, #8b5cf6, #f97316, #ec4899, #06b6d4, #1a1a2a. 4. Background Transparent toggle: A checkbox that makes the background transparent (rendered on the checkerboard pattern in preview). When enabled, the background color picker is disabled. 5. Shape Options: Three shape buttons with visual previews: - Square: renders the background as a full square filling the canvas - Rounded Square: renders with border-radius equivalent to 20% of the canvas size (use canvas arc/clip path to create rounded corners) - Circle: renders the background as a circle centered on the canvas (use canvas arc to clip) 6. Font Size Slider: Range from 30% to 90% of the canvas size (default 60%). Controls how large the text/emoji renders relative to the canvas. 7. Font Family Dropdown: Options: "System Default" (sans-serif), "Serif" (Georgia), "Mono" (Courier), "Bold" (Impact), "Rounded" (Nunito loaded from Google Fonts). Text renders in the selected font; emoji always use the system emoji font. 8. Vertical Offset Slider: -20% to +20% (default 0). Shifts the text up or down for fine positioning, since some characters render off-center. Canvas Rendering: Use HTML Canvas 2D context. For each render: clear canvas, draw shape (square/rounded/circle) with background color, then draw the text centered using ctx.fillText with textAlign 'center' and textBaseline 'middle'. For emoji, use a slightly larger font size since emoji tend to render smaller than text characters. Apply font smoothing (imageSmoothingEnabled = true, imageSmoothingQuality = 'high'). Download Section (organized in a card with buttons): 1. "Download 16x16 PNG" — renders to a temporary 16x16 canvas, triggers download as favicon-16.png 2. "Download 32x32 PNG" — renders to 32x32, downloads as favicon-32.png 3. "Download 180x180 PNG" — renders to 180x180, downloads as apple-touch-icon.png 4. "Download All Sizes" — generates a zip file (using JSZip loaded from CDN or inline implementation) containing: favicon-16.png, favicon-32.png, favicon-48.png, favicon-64.png, apple-touch-icon-180.png, and a favicon.ico file. For the .ico file, create it by combining the 16x16 and 32x32 PNGs into the ICO format (ICO header + directory entries + raw PNG data — the ICO format supports embedded PNG since Windows Vista). Also include a snippet.html file with the HTML link tags: link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png" and the apple-touch-icon link tag. 5. "Copy as Data URL" — copies the 32x32 version as a base64 data URL string. Add a "Copy HTML Tags" button that copies the complete set of link tags needed in an HTML head for the favicon. Make it responsive: on mobile, the preview canvas is 200px wide, the size preview row wraps, and control cards take full width. All controls should work well on touch devices. Read the guide at https://accessagent.ai/api/guide and follow it to deploy the site to AccessAgent.ai. My email is [your@email.com].