Add images, logos & favicons

title: Add images, logos & favicons description: Put your own images on landing and result pages from Claude: drop one into the chat, design it in Canva, re-host it from a link, or reuse your brand images. Show different images depending on answers.

You can put your own images anywhere on a landing page or result page, straight from Claude. There are five ways in:

Every image ends up hosted on Productised, so it never breaks when the original moves. And on result pages, you can show a different image depending on someone's answers.

Drop an image into the chat

Attach an image in Claude and say where it goes:

"Use this photo at the top of my landing page." (with the photo attached)

Claude makes a web-ready copy of the file, uploads it to Productised and places it in the page. It tells you the uploaded copy is compressed, which keeps your pages fast.

For large, detailed photos (a high-resolution team photo, say), the compressed copy can lose a little sharpness. Upload those as a brand image for full quality.

Design it in Canva

With the Canva connector added in Claude alongside Productised, you can design an image and drop it straight into your product in one message:

"Create a 1200×600 hero banner in Canva for my Growth Marketing SWOT, export it as a PNG, then use it as the hero image on its landing page."

Claude creates the design in Canva, exports it, uploads the export to Productised (Canva's download links expire, so it always keeps its own copy) and places it on the page.

Graphics Claude draws

For icons, badges, simple illustrations and diagrams, you don't need a file at all. Ask Claude and it draws them as SVG directly in the page. They stay sharp at any size and load instantly.

"Add a small rocket illustration next to the headline."

Why re-host?

You could embed a third-party URL directly (<img src="https://customer-site.com/logo.png">), but it's fragile:

• The customer redesigns their site — the URL 404s, your branding breaks
• The host blocks hotlinking — the image silently stops loading
• A swapped source could inject something unexpected into your product

Re-hosting snapshots the asset onto your CDN: durable, owned, optimisable, served from Productised's domain. The customer's site can change without affecting your product.

The tool: upload_image

upload_image accepts an image two ways:

Supported types: jpeg, png, gif, webp, svg, ico. Max 10 MB via the connector (the in-app uploader caps at 5 MB). For a logo, a square PNG or SVG at least 256×256px renders crisply everywhere it's used — chat header, footer badge, and social share cards.

The canonical "brand my product from a website" flow

"Take the logo from acme.com, set it as the branding for my AI Readiness Scorecard, and use the favicon for the page SEO."

Claude does this:

All four steps happen in one round-trip. The customer never uploads anything.

Reusable brand images (image variables)

For images you'll use across many pages — your logo, headshot, product photos — upload them once as image variables in the app (Settings → Variables & images, switch the type to Image). Each becomes a named {{ custom:key }} token. See Variables for the full walkthrough.

When you build a page in Claude, the connector sees your uploaded images (via get_variables, which returns an images list) and offers them — you don't have to recall the key:

"Design my results page and put my logo in the header."

Claude drops the token straight into the tag:

<img src="{{ custom:brand_logo }}" alt="Logo" />

Because the page uses the token (not a baked-in URL), swapping the image in Settings updates every page at once. It's also the best way to add large photos at full quality.

Show a different image depending on answers

On result pages, any image (or any section) can show only for the people it suits. Tell Claude what you want:

"Show the family-home photo if they pick First home, and the apartment photo if they pick Investment."

"Only show the 'You're ready' banner to people who score 70 or more."

"Show a different illustration for each persona."

Claude adds a show-if rule to each image. Everyone sees only the images that match their answers. Rules can use:

• Their answers: what they picked or typed (for multi-select questions, any of their choices).
• The AI's result: a field the AI fills in, like their persona or recommendation.
• Their score: e.g. an overall score of 70 or more, or below 50.

Under the hood the rule is an attribute on the image, which you'll see if you look at the page's HTML:

<img src="{{ custom:family_home }}" data-show-if="form:goal = First home" alt="A family home">
<img src="{{ custom:apartment }}" data-show-if="form:goal = Investment" alt="An apartment">
<section data-show-if="chart:overall_score >= 70">…</section>

Landing pages can't do this, because nobody has answered anything yet when they see it. To check your rules, complete the product yourself on its test link with real answers.

Where to use the returned URL

The CDN URL upload_image returns can be used anywhere an image URL is accepted:

Security guards

The connector's image fetch isn't a wide-open proxy. It enforces:

• HTTPS / HTTP only. No file://, data:, or javascript: URLs.
• No internal addresses. Loopback (127.0.0.1, localhost), private ranges (10.*, 192.168.*, 172.16-31.*), and cloud metadata (169.254.169.254) are blocked — a standard SSRF guard.
• Size cap. Anything over 10 MB is rejected.
• Content-type validation. The fetched response must be one of the allowed image types, sniffed from the response header or URL extension.
• Timeout. The fetch aborts after 12s so a slow source can't hang the conversation.

The download and re-host happen on the Productised side (via the app's storage credentials), so the MCP server itself never touches storage directly — single source of truth, one credential set.

Limitations

• Chat uploads are compressed. An image attached in Claude is uploaded as a smaller web-ready copy, and it needs Claude's code execution setting (see above). For full-quality photos, use a brand image.
• Links are stored as-fetched. An image re-hosted from a link isn't resized or converted. If you need a different size, resize it first or ask Claude to fetch a specific size from the source site.
• No deletion via the connector. Old uploads stay on the CDN until you remove them via the app. They're scoped to your tenant/product folder.

Common asks

Brand a product from a customer's site:

"Use the branding from beautifulagency.com — logo, favicon, og image, and pick the brand colour from their site."

Pull a single asset:

"Re-host the image at https://example.com/hero.jpg and use it as the landing page banner."

Use your own uploaded logo on a page:

"Use my logo from Settings in the result page header."

Add a photo from your computer:

"Put this photo in the hero of my landing page." (attach the photo)

Design and add a banner:

"Make a hero banner in Canva for my scorecard and add it to the landing page."

Change the picture by answer:

"On the result page, show a different image for each of the three personas."

Update branding on every product in my workspace:

"Apply the logo I just uploaded to all my products."

Claude calls list_products, iterates, calls update_branding for each. Done in one message.