Site Identity & Logo

Folex Theme Documentation

Folex 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 Configuration
[site]
  title             = "Folex" # Shared title for SEO and OpenGraph
  description       = "A highly customizable creative agency & personal portfolio business theme built with Tailwind CSS and Astro Js" # Shared description for SEO and OpenGraph
  tagline           = "Creative Agency & Personal Portfolio Business Theme"
  taglineSeparator = "" # default is " - "
  baseUrl          = "https://folex-astro.netlify.app" # Base URL for the site and used in OpenGraph meta tags.
  logo              = "/images/logo.svg" # Path to the site's logo
  logoAlternate    = "/images/logo-light.svg" # Path to the site's logo
  logoText         = "" # Text displayed next to the logo
  logoWidth        = "86px" # Width of the logo
  logoHeight       = "24px" # Height of the logo

logo: Path to your main logo.
logo_text: Text next to t he logo (if applicable).
logoAlternate: An alternative logo typically used in dark mode or when the background requires better contrast.
logo_width & logo_height: Adjust the size of your logo.

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/favicon.png" # Add your site logo path here and follow upper instruction

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 Metadata
# Specific SEO configurations that complement the general site settings.
# -----------------------------------------------------------------------------------------------------------------------------------
[seo]
  author   = "Getastrothemes"
  keywords = ["digital agency"]
  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!