{
  "id": 16256960,
  "title": "Generating Hero Images, Icons and OG Cards for a Side Project with Nano Banana 2.1",
  "url": "https://urgent.news/2026/10/24/generating-hero-images-icons-and-og-cards-for-a-side-project-with",
  "topic": "tech",
  "section": "Tech",
  "published": "2026-10-24T01:21:39.000Z",
  "source": {
    "name": "Dev.to",
    "slug": "dev-to",
    "url": "https://dev.to/marcushuang/generating-hero-images-icons-and-og-cards-for-a-side-project-with-nano-banana-21-384h"
  },
  "original_language": "en",
  "account": "Side projects often struggle with assets right before launch. To tackle this, I use the independent web app Nanobanana21pro.com, built on Google's Nano Banana image models. Unlike Google AI Studio, Nanobanana21pro.com is a separate service. I write asset specifications in a small spec file in the repository. This includes brand colors, style description, and asset requirements like hero image dimensions and icon count.\n\nI generate the hero image first, setting the visual language for the project. For example, I might ask for a soft 3D clay illustration of a rocket made of stacked code brackets launching from a laptop keyboard, with navy and sky blue accents. I specify no text to ensure the focus remains on the image. It's crucial to leave space on the hero image for a headline, as this will be added later via HTML.\n\nAfter creating the hero, I use it as a reference for the rest of the assets. Nanobanana21pro.com allows up to 14 reference images, so I attach the approved hero and assign it a role: style, color palette, and lighting reference. I then create single icons using the same style, ensuring consistency across all assets. For instance, I generate soft 3D clay icons of a padlock, lightning bolt, and chart, all on a plain #F8FAFC background.\n\nWhen creating the Open Graph (OG) card image for social media previews, I add text to the image using the reference image for style and palette. The OG card should have bold white letters for the project name, smaller sky blue letters for the tagline, and the rocket image from the hero on the right. I keep the text short and check it carefully before publishing.\n\nBudgeting the runs is straightforward. Nanobanana21pro.com shows a credit quote before submitting an image. One 2K hero image costs 12 credits, three 1K icons cost 8 credits each, and one 1K OG card costs 8 credits. With a few retries, the total cost fits within a small credit pack. One-time packs start at $2.99, and monthly plans are $18.99 or $44.99. Batch sizes increase the cost, so I explore different pricing options based on my needs.",
  "summary": "Every side project hits the same wall right before launch: the code works, but the landing page has no images. Here is the workflow I use to generate a consistent asset set with nanobanana21pro.com , an independent third-party web app built on Google's Nano Banana image models. Disclosure: nanobanana21pro.com is not a Google product and not Google AI Studio. It is a separate service, not…",
  "key_points": [
    "Nanobanana21pro.com generates assets for side projects",
    "Spec file includes brand colors, style, and asset requirements",
    "Hero image sets visual language for project"
  ],
  "editors_take": "Using reference images to maintain visual consistency across different asset types allows solo developers to build professional brand identities for side projects without the traditional overhead of manual design.",
  "illustration": null,
  "coverage": {
    "outlets": 1,
    "also_reported_by": []
  },
  "ai_generated": true,
  "disclaimer": "Summaries, key points and the editor’s take are written by software from other outlets’ reporting and may contain errors — always check the linked original."
}