# Import brand from website: fill your brand kit in one step

[Canonical HTML page](https://gradiently.design/guide/import-brand-from-website)

Your website already knows your name, your one line pitch, your colour and your icon. One button on the Brand page reads them, and you decide what to keep.

## The short version

- Gradiently can read a brand's website and offer its name, description, theme colour and icon for the brand kit.
- Nothing is added automatically: each finding appears as a suggestion you can use or ignore.
- The name comes from the site's own name tags, the description from its meta description, the colour from its theme-color tag and the icon from its touch icon or favicon.
- A site with no theme-color tag or only an SVG icon gives fewer suggestions, so a few lines in its HTML head improve the result.
- Reading a website is part of the brand kit, which comes with Gradiently Pro.

To **import brand from website** details in Gradiently, open the Brand page, type your address into **Website** under Identity and choose **Read site**. Gradiently fetches the site's name, description, theme colour and icon, then offers each one: use the name, use the description as your tagline or About, add the colour to your brand colours, add the icon as a logo. You pick what goes in. It takes a few seconds and saves the most tedious part of setting up a kit.

## How to import your brand from a website

1. **Open the Brand page** Choose the brand you want to fill in. Each brand in your account has its own kit, so make sure you are in the right one.
2. **Enter the website** Under **Identity**, type the address into **Website**. A plain domain such as `crumb.co` is enough; you don't need the https.
3. **Choose Read site** Gradiently visits the page once, reads its head and fetches its icon. The button shows **Reading…** while it works.
4. **Use what fits** Each finding appears with its own button: **Use "Crumb" as the name**, **Use its description as the tagline**, **Use its description as About**, **Add its colour**, **Add its icon as a logo**. Ignore anything that's wrong.
5. **Read again after changes** If you update your site, choose **Read again**. When everything useful is already in the kit, the page says so.

The site's colour also turns up later as a suggestion in the **Colours** section, labelled with your site's name, so you can add it there if you skipped it the first time.

## What Gradiently reads from your website

It reads only the public homepage at the address you give, and only the parts that describe the brand. It doesn't crawl other pages, sign in or read your content.

| Kit suggestion | Where it comes from | Becomes |
| --- | --- | --- |
| Name | `og:site_name`, `application-name` or the Apple web app title | Brand name |
| Description | `meta name="description"`, or the Open Graph description | Tagline or About |
| Colour | `meta name="theme-color"` as hex or rgb() | A brand colour |
| Icon | The largest `apple-touch-icon`, other raster icons, then `/favicon.ico` | A logo, up to 256 px |

Four suggestions and their sources. The icon is redrawn as a PNG of at most 256 px before Gradiently keeps it.

Two details are worth knowing. SVG icons are skipped, because Gradiently won't rasterise someone else's SVG, so a site with only an SVG favicon gives no icon. And the colour must be a plain hex or rgb() value; a CSS variable in the theme-color tag can't be read.

## Make your website easy to read

If Read site comes back thin, the fix is usually a few lines in your site's HTML head. They help more than Gradiently: browsers use theme-color for the address bar on phones, and link previews use your Open Graph tags. [Open Graph tags](https://gradiently.design/guide/open-graph-tags) and [favicon design](https://gradiently.design/guide/favicon-design) go deeper.

```html
<head>
  <title>Crumb · Sourdough bakery in Leeds</title>
  <meta name="description" content="Slow sourdough and pastries, baked every morning on Kirkgate.">
  <meta property="og:site_name" content="Crumb">
  <meta name="theme-color" content="#c2410c">
  <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
  <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png">
</head>
```

Everything Read site looks for: a site name, a one line description, a hex theme colour and a raster touch icon at 180×180.

### Gives little

- No meta description, or one stuffed with keywords
- No theme-color tag, or a CSS variable in it
- Only an SVG favicon
- A homepage that redirects to a login screen

### Gives a full kit start

- One honest sentence about what you do
- A hex theme colour that matches your logo
- A 180×180 PNG touch icon
- A public homepage that loads quickly

## What to do after the import

The import gives you a foundation, not a finished kit. Four things are worth doing next, in this order.

1. **Upload proper logo files.** A favicon is tiny and square. Add your full logo as PNG, JPEG, WebP, GIF or AVIF, one for dark backgrounds and one for light; see [logo on a gradient background](https://gradiently.design/guide/logo-on-gradient-background).
2. **Round out the colours.** One theme colour is a start. Add a supporting colour and your darkest and lightest neutrals; [how to choose brand colors](https://gradiently.design/guide/how-to-choose-brand-colors) helps.
3. **Set your fonts.** Choose a heading and a body face, or [upload your own font files](https://gradiently.design/guide/custom-fonts-upload).
4. **Write the voice.** A site description tells the Designer what you are, not how you sound. Fill in Tone, In your words, Always and Never; [brand voice for AI](https://gradiently.design/guide/brand-kit-voice) shows how.

An Instagram post introducing Crumb, a sourdough bakery, using the name and description read from its website

A first post straight after the import: name and description from the site.

The same Crumb introduction as a vertical Instagram Story

The same brand as a story at 1080×1920, ready once the kit is set.

## When reading a website fails

If you see **We couldn't read that website**, the page didn't answer in time, returned an error or blocked the request. Check the address opens in a private browser window. Addresses that point to a private network, a login page or a file rather than a web page are refused on purpose. A site behind a strict bot wall may never be readable; type the details in by hand, which takes a couple of minutes.

> **Who can do this** Reading a site is part of the brand kit, which comes with Pro. In a shared workspace only owners and admins can change a brand kit. Gradiently reads the site once, when you ask, without cookies or credentials.

With the kit filled in, the Studio puts your colours first in every picker, offers your logos and starts designs in your fonts, and the Designer writes from your description. Pair it with a Mark that nobody else can use and your posts look like you from the first one. The rest of the kit is covered in [brand kit setup](https://gradiently.design/guide/brand-kit-setup).

## FAQ

### How do I get my brand colours from my website?

In Gradiently, enter your website on the Brand page and choose Read site. If your site has a theme-color tag, its colour is offered as a brand colour.

### Why didn't Read site find my logo?

It looks for raster icons such as an apple-touch-icon or favicon.ico and skips SVG icons. Add a PNG touch icon to your site, or upload your logo directly.

### Does importing overwrite my brand kit?

No. Each finding is offered as a suggestion, and nothing changes in the kit until you choose to use it.

### Can I import a brand from someone else's website?

The tool reads any public site, but use it for brands you run or work for. The kit should hold assets you have the right to use.

### What if my site has no description?

Read site will still offer what it finds. Write your tagline and About by hand, and consider adding a meta description to the site, which also helps search results.