Site Identity & Logo

Stella Theme Documentation

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

Customize Your Logo

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

# Site Configuration
[site]
  title            = "Stella" # Shared title for SEO and OpenGraph
  description      = "A customizable and multipurpose saas & startup astro theme built with Tailwind CSS and Astro Js" # Shared description for SEO and OpenGraph
  tagline          = "Multipurpose Saas & Startup Astro Js Theme"
  taglineSeparator = "" # default is " - "
  baseUrl          = "https://stella-astro.pages.dev" # Base URL for the site and used in OpenGraph meta tags.
  logo             = "/images/logo.svg" # Path to the site's logo
  logoText         = "Stella" # Text displayed next to the logo
  logoWidth        = "2rem" # Width of the logo
  logoHeight       = "2rem" # Height of the logo

logo: Path to your main logo image (shown in the header and footer).
logoText: Text rendered next to the logo image. Stella ships with "Stella"; leave it empty if your logo already includes the brand name. Markdown is supported here.
logoWidth & logoHeight: Rendered dimensions of the logo. Stella uses rem values, but px works too (e.g. "86px").

Set Up Your Favicon

Favicons appear in browser tabs and are essential for branding.

  # Add your site logo in image path below and open your terminal and run "npm run generate-favicons" to generate favicons for different devices and platform (https://realfavicongenerator.net/checker)
  [site.favicon]
    path  = "/images/favicons" # favicon images path (No need to change it)
    image = "/images/logo.svg" # Add your site logo path here and follow upper instruction

Generate Favicons

Place your logo image at the image path (Stella points this at /images/logo.svg by default).
Run this command in your terminal:
Terminal window
```
npm run generate-favicons
```
The tool creates favicons for various platforms and saves them to the directory specified in path.

Customize SEO Metadata

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

# SEO Metadata
# Specific SEO configurations that complement the general site settings.
[seo]
  author = "Getastrothemes"
  keywords = [
    "saas astro theme",
    "saas business astro theme",
    "startup astro theme",
  ] # SEO keywords
  robots = "index, follow" # Instructs search engines on how to crawl and index the pages.

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!