Site Identity & Logo

Upstart makes it easy to customize your site’s branding, including the logo and favicon, through the config.toml file.

Customize Your Logo

To set your logo that will be displayed on the header and footer, edit the [site] section in the config.toml file:

[site]
  title          = "Upstart"          # Your site's title for SEO and OpenGraph
  description    = "A business & consulting theme"  # Your site's description
  logo                 = "/images/logo.svg" # Path to the site's logo
  logo_hover_animation = true # Enable or disable logo hover animation
  logo_text            = "Upstart" # Text displayed next to the logo
  logo_width           = "32px" # Width of the logo
  logo_height          = "32px" # Height of the logo

logo: Path to your main logo.
logo_text: Text next to the logo (if applicable).
logo_width & logo_height: Adjust the size of your logo.

If you want to use a different logo for footer, locate the <Logo /> component in src/layouts/components/global/Footer.astro file and update it as illustrated below.

<div class="flex flex-col gap-y-5 lg:pe-10">
  <Logo />
  <Logo src="/images/logo-white.svg" />
  {
    t("footer.description") && (
      <p class="opacity-90" set:html={markdownify(t("footer.description"))} />
    )
  }
  <Social
    layout="dark"
    link_type="follow"
    class="gap-1 mt-5"
    list={social.main}
  />
</div>

Set Up Your Favicon

Favicons appear in browser tabs and are essential for branding.

[site.favicon]
  path  = "/images/favicons"  # Favicon storage path
  image = "/images/logo.svg"  # Use your logo here

Generate Favicons

Place your logo image in the image path.
Run this command in your terminal:
Terminal window
```
npm run generate-favicons
```
The tool will create favicons for various platforms and save them to the directory specified in path.

Customize SEO Metadata

Optimize your site for search engines with these SEO settings in config.toml:

[seo]
  author   = "Your Name"             # Author name for SEO
  keywords = ["business theme", "consulting theme"]  # SEO keywords
  robots   = "index, follow"         # Search engine crawl rules

author: Set the author or organization for SEO.
keywords: Add keywords to improve search ranking.
robots: Control search engine crawling (e.g., “index, follow” to allow indexing).

🚀 You’ve customized the site’s identity and logo—now it’s time to update the fonts and colors!