---
title: "Brand and typography"
description: "Colours, fonts, logo and site icon: what is picked up from your site automatically and what you set yourself."
updated: "2026-08-29"
verifiedAgainst:
  - packages/shared/src/themes.ts
  - packages/shared/src/assets.ts
  - apps/web/components/theme-configurator.tsx
  - apps/web/lib/server/site-icon-upload.ts
  - apps/web/app/api/assets/upload-site-icon/route.ts
---

Brand settings sit on top of the theme. The theme decides the shape; these
decide how it looks.

## What is inferred

During setup Blogged reads your site for its palette, typography and logo, and
proposes them. Everything inferred is shown as inferred, so you can tell what was
found from what you chose.

## What you set

<PropertyList>
  <Property name="Colours">
    Primary, secondary, accent, background and text. Each theme ships defaults
    that work; overriding one is a decision to hold the rest against it.
  </Property>
  <Property name="Typography">
    Font choices within the theme's scale. The scale itself belongs to the theme,
    which is what stops a font change breaking the layout.
  </Property>
  <Property name="Logo">
    The exact file, not an approximation. See
    [metadata and alt text](/assets/metadata).
  </Property>
  <Property name="Site icon">
    The small square mark browsers show in a tab and search engines show beside
    a result. Automatic or a file of your own, covered below.
  </Property>
</PropertyList>

## The site icon

The site icon has two modes, and Automatic is the default.

<Tabs>
  <Tab label="Automatic">
    Your header logo is reused as the icon when it is close enough to square to
    survive being shown small: it has to be at least 48 pixels on each side and
    roughly square rather than a wide wordmark.

    When the logo does not qualify, or there is no logo, the icon falls back to
    a single letter taken from your site name. It is the first letter or digit
    in the name, capitalised. A name with no letters or digits in it falls back
    to `B`.
  </Tab>
  <Tab label="Custom">
    Upload the exact mark you want. Because a wide logo cannot become a good
    icon by cropping, the upload is checked rather than accepted and squashed.
  </Tab>
</Tabs>

### What a custom icon has to be

<PropertyList>
  <Property name="Square" type="required">
    Checked on the file you upload, not fixed for you. A rectangular image is
    refused rather than cropped, because choosing which part to keep is your
    decision and not ours.
  </Property>
  <Property name="At least 180 by 180" type="raster only">
    PNG, JPEG and WebP have to clear this. An SVG is exempt, since it has no
    fixed pixel size to fail.
  </Property>
  <Property name="2 MB or smaller" type="required">
    Larger files are refused before anything is processed.
  </Property>
  <Property name="PNG, JPEG, WebP or SVG" type="required">
    An SVG is additionally checked for active or external content and is
    refused if it carries any, since an icon is served to every visitor.
  </Property>
</PropertyList>

Whatever you upload is re-encoded to a single square size, so one file covers
every place the icon appears rather than you supplying several. Owners, admins
and editors can all set it.

## Contrast

Colours are yours, and readability is not negotiable: text that fails against its
background is a problem for readers and for search. If you set a palette that
reads badly, the preview is where you will see it.

## Previewing

Brand changes render live against your real content at three widths before you
save.