# Generator Og Favicon

Open Graph image generator 1200x630 with title, subtitle and logo text, exported as PNG, SVG and a Next.js opengraph-image.tsx using ImageResponse.

- id: `generator-og-favicon`
- Page: https://agentic-ui-kit.com/components/generator-og-favicon
- Live preview: https://agentic-ui-kit.com/live/piece/generator-og-favicon?piece=generator-og-favicon

## Install

```bash
agentic-ui add generator-og-favicon
npx shadcn@4.17.0 add @agentic-ui/generator-og-favicon
```

## Metadata

- **Level:** feature
- **Category:** feature
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** open-graph-image-designer, og-image-1200x630, favicon-set-designer, png-export-canvas, svg-export, nextjs-opengraph-image-snippet, nextjs-icon-snippet, apple-touch-icon-snippet, image-response-export, system-font-stack, no-network-fonts, title-subtitle-logo-text, contrast-safe-text, theme-token-colours, background-styles, live-preview, presets, versioned-url-state, copy-to-clipboard, file-download, shadcn-registry-item
- **Intents:** configure, create-edit, import-export
- **Suits domains:** saas, analytics, settings, devtools
- **Interaction:** click, keyboard-navigation
- **Screen role:** management
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Open Graph image generator 1200x630 with title, subtitle and logo text, exported as PNG, SVG and a Next.js opengraph-image.tsx using ImageResponse, Favicon set designer with 16, 32, 48, 180 and 512 pixel PNGs, an SVG icon and Next.js icon.tsx and apple-icon.tsx, Social share card for a blog post or changelog with a theme-token background, no network fonts and a system font stack
- **Avoid when:** Custom brand fonts or photographic artwork; design those in a graphics tool., Dynamic per-page images with data from a database; start from the exported opengraph-image.tsx and read your data there.
- **Preserve when adapting:** single-draw-list, contrast-safe-text, system-font-stack
- **Replace when adapting:** presets, sample-copy, logo-text
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 8.7/10
- **Quality breakdown:** visual 8/10, responsive 8/10, accessibility 9/10, code 9/10
- **npm dependencies:** @agentic-ui/generator-foundation, @agentic-ui/tokens, react
- **Motion:** profile subtle, library css, reduced-motion fallback yes, target 55 fps
- **Registry dependencies:** lib-generator-foundation