Site Identity & Logo

Upstart Theme Documentation

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" # Shared title for SEO and OpenGraph
  description        = "A highly customizable saas & startup astro theme built with Tailwind CSS and Astro Js" # Shared description for SEO and OpenGraph
  tagline            = "Saas & Startup Astro Js Theme" # Appended to page titles unless disabled
  baseUrl            = "https://upstart-astro.pages.dev" # Base URL used in OpenGraph and canonical tags
  logo               = "/images/logo.svg" # Path to the site's logo
  logoHoverAnimation = true # Enable or disable logo hover animation
  logoText           = "Upstart" # Text displayed next to the logo
  logoWidth          = "32px" # Width of the logo
  logoHeight         = "32px" # Height of the logo

title: shared name used for SEO, Open Graph, and as the fallback brand when no logo image or logoText is set.
description and tagline: shared meta description and the tagline appended to page titles.
baseUrl: canonical site URL used in Open Graph and sitemap output.
logo: Path to your main logo image.
logoHoverAnimation: toggles the subtle logo hover animation unique to Upstart. Set to false to disable it.
logoText: text rendered next to the logo. If you leave both logo and logoText empty, Upstart falls back to the site title.
logoWidth & logoHeight: rendered dimensions of the logo image.

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.

<!-- Logo, Description and Social -->
<div class="flex flex-col gap-y-5 lg:pe-10">
  <Logo />
  <Logo src="/images/logo-white.svg" />
  {
    footerDescription && (
      <p class="opacity-90" set:html={markdownify(footerDescription)} />
    )
  }
  <SocialComponent
    layout="classic"
    linkType="follow"
    class="mt-5 gap-1"
    size="sm"
    list={social.main.filter((social) => social.enable)}
  />
</div>

The <Logo /> component accepts an optional src prop, so passing a different image path swaps the logo used in the footer only.

Set Up Your Favicon

Favicons appear in browser tabs and are essential for branding.

[site.favicon]
  path  = "/images/favicons"  # Favicon storage path (no need to change it)
  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   = "Getastrothemes"        # Author name for SEO
  keywords = [
    "saas astro theme",
    "saas business astro theme",
    "startup astro 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!