Skip to content
Living Life

Type to search…

↑↓to navigate
Esc

Customize avatar and favicon (with optimized defaults)

How to customize the sidebar avatar and browser favicon in Chirping Astro, with examples for optimized local assets plus public/remote fallbacks.

Customization1min read

Branding this theme usually starts with two files: your profile avatar in the sidebar and your favicon in the browser tab. This guide shows the fastest path, then the fallback options.

The theme is now optimization-first for local src assets.

  1. Put your avatar file in src/assets/images/site/.
  2. Import it in src/config.ts.
  3. Set SITE.author.avatar to the imported object (not .src).
import avatarImg from './assets/images/site/avatar.png';


export const SITE: SiteConfig = {
  // ...
  author: {
    name: 'Your Name',
    avatar: avatarImg,
    bio: 'Writing about Astro and web performance.',
  },
};

Why this is preferred:

  • Sidebar rendering uses Astro Image for imported metadata.
  • You get Astro image pipeline behavior by default.
  • You keep type safety via author.avatar?: string | ImageMetadata.

If you need a stable public URL, use a string path under public/:

author: {
  name: 'Your Name',
  avatar: '/images/avatar.png',
}

This renders with plain img intentionally. Files in public/ are served as-is.

author: {
  name: 'Your Name',
  avatar: 'https://example-cdn.com/avatars/me.jpg',
}

This also falls back to plain img in the sidebar. Use this when your avatar is managed externally.

The favicon is imported in src/layouts/BaseLayout.astro:

import faviconImg from '../assets/images/site/favicon.svg';

And linked in <head>:

<link rel="icon" type="image/svg+xml" href={withBase(faviconImg.src)} />

Fastest way to customize it:

  1. Replace src/assets/images/site/favicon.svg with your own file.
  2. Keep the same file name if you do not want to touch code.

If you prefer PNG, import a PNG file and update the type:

import faviconImg from '../assets/images/site/favicon.png';
<link rel="icon" type="image/png" href={withBase(faviconImg.src)} />

For broader device/browser support, add extra icon links:

<link rel="icon" type="image/svg+xml" href={withBase(faviconImg.src)} />
<link rel="icon" type="image/png" sizes="32x32" href={withBase('/icons/favicon-32.png')} />
<link rel="icon" type="image/png" sizes="16x16" href={withBase('/icons/favicon-16.png')} />
<link rel="apple-touch-icon" sizes="180x180" href={withBase('/icons/apple-touch-icon.png')} />

Store these fixed-size files in public/icons/.

  • Want best default performance and simplest maintenance: imported avatar asset from src/assets.
  • Need a fixed URL or externally hosted image: string avatar path/URL fallback.
  • Want zero-code favicon update: replace src/assets/images/site/favicon.svg in place.
  • Need broad legacy/device coverage: add multiple PNG/icon links.

That is all you need to fully brand the avatar and tab icon without changing the rest of the theme architecture.

Comments

Comments need configuration

Giscus is enabled but not yet configured. Add the repository details below to start collecting comments.

  1. Visit giscus.app and select your public GitHub repository (Discussions must be enabled).
  2. Copy the generated data-repo-id, data-category and data-category-id values.
  3. Set the PUBLIC_GISCUS_ENABLED, PUBLIC_GISCUS_REPO, PUBLIC_GISCUS_REPO_ID, PUBLIC_GISCUS_CATEGORY and PUBLIC_GISCUS_CATEGORY_ID env vars in your .env file.
  4. Rebuild the site — this notice will be replaced by the live comments thread.

Open giscus.app