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.
Choose the primitives library your project already uses. Both look the same: your theme, not the variant, controls colors, shape, type and motion.
About this feature
What it's 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.
Includes
- 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
Works with
- Radix UI and Base UI primitives (pick the one your project uses)
- React 19 and Tailwind CSS 4 in Next.js (App Router), Vite, React Router or TanStack Start, installed with the agentic-ui or shadcn CLI
- Your theme tokens, in light and dark mode
Install
Included with Agentic UI Kit (one-time license). Install needs your license key: see pricing · connect your project.
agentic-ui add generator-og-faviconnpx shadcn@4.17.0 add @agentic-ui/generator-og-faviconUsed in
A standalone component: drop it into any screen.
- Type
- Feature
- Variants
- Radix UI and Base UI
- Themes
- Light and dark
- Widths
- Preview it at desktop, tablet and mobile widths above.
- Motion
- Animated, with a reduced-motion fallback
- npm packages
- None beyond your project's React and Next.js
- Registry dependencies
lib-generator-foundation- Files
11 files
- components/agentic-ui/generator-og-favicon/og-favicon/og-favicon-generator.tsx
- components/agentic-ui/generator-og-favicon/og-favicon/png.ts
- components/agentic-ui/generator-og-favicon/og-favicon/layout.ts
- components/agentic-ui/generator-og-favicon/shared/color.ts
- components/agentic-ui/generator-og-favicon/og-favicon/render.ts
- components/agentic-ui/generator-og-favicon/shared/png-button.tsx
- components/agentic-ui/generator-og-favicon/og-favicon/generate.ts
- components/agentic-ui/generator-og-favicon/shared/token-palette.ts
- components/agentic-ui/generator-og-favicon/shared/generator-frame.tsx
- components/agentic-ui/generator-og-favicon/styles/og-favicon.css
- components/agentic-ui/generator-og-favicon/index.ts
Related components
Generator Border Radius Blob
CSS blob shape generator with draggable border-radius handles and an eight-value border-radius output.
Details and live previewGenerator Clip Path
Clip-path generator with draggable points for polygon, circle, ellipse and inset shapes.
Details and live previewGenerator Css Loader
CSS loader generator with ring, dots, bars, pulse and orbit variants that exports CSS and a React component.
Details and live previewGenerator Easing Spring Editor
A design-system team tunes the brand ease and spring and exports them as a tokens.json override for the Stripe personality.
Details and live preview