Managing Logos

The site uses three logo images in different locations. Each one is loaded from its own directory under src/assets/. To change a logo, simply replace the image file in the corresponding directory — the filename does not matter.

Logo Locations

Changing a Logo

1. Navigate to the directory for the logo you want to change (see table above).
2. Delete the existing image file.
3. Drop in your new image file. Use any supported format: .jpg, .jpeg, .png, .webp, or .svg.
4. The filename can be anything — the component picks the first image it finds.

That’s it. Astro optimizes the image automatically at build time.

Example: To update the header logo, replace the file in src/assets/header/:

src/assets/header/
└── my-new-logo.png    ← any name works

Fallback Behavior

If a logo directory is empty or the image fails to load, the site displays plain “BEARS” text as a fallback. This means removing a logo file won’t break the site — it will just show the text version.

Tips

• Keep one file per directory. The component uses the first image found. Multiple files in the same directory may lead to unpredictable results.
• Use transparent backgrounds (PNG or WebP) for best results, since logos appear on both light and dark surfaces.
• Recommended dimensions: There is no strict size requirement — Astro resizes automatically — but a source image at least 400px wide ensures it stays sharp on high-DPI screens.
• The hero logo can differ from the header/footer logo. For example, the current hero logo includes the BEARS motto text, while the header and footer use a simpler wordmark.