# Site Identity & Logo

## 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:

```toml {6-10}
# src/config/config.toml
[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.

#### Different Logo for Footer

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.

```astro del={4} ins={5}
// src/layouts/components/global/Footer.astro
<!-- 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.

```toml
# src/config/config.toml
[site.favicon]
  path  = "/images/favicons"  # Favicon storage path (no need to change it)
  image = "/images/logo.svg"  # Use your logo here
```

#### Generate Favicons

1. Place your logo image in the `image` path.
2. Run this command in your terminal:

   ```bash
   npm run generate-favicons
   ```

3. 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`:

```toml
# src/config/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!