2 min read

Fix Website Logo and Favicon Display in EmDash

If your logo and favicon aren't showing up on your EmDash site even though you've set them in the admin panel, here's a quick fix.

The Problem

I set up my logo and favicon through the EmDash admin panel (Settings > Logo and Settings > Favicon), but neither was showing up on the actual site. The header was still displaying a hardcoded CSS logo, and there was no favicon at all.

Turns out the issue was in my layout file — the template simply wasn't using the values from site settings.

The Fix

Both fixes go in your base layout file, typically src/layouts/Base.astro.

1. Displaying the Logo

The site settings are already available if you're calling getSiteSettings(). The logo object has a url property (not src like image fields on entries), so you need to use a plain <img> tag rather than the EmDash <Image> component.

Here's what the header link should look like:

{settings.logo?.url ? (
  <img src={settings.logo.url} alt={settings.logo.alt || siteTitle} class="site-logo" />
) : (
  <!-- your fallback logo here -->
)}

The key thing to know: settings.logo returns { mediaId, url, alt }, which is a different shape from entry image fields that return { id, src, alt }. That's why the <Image> component doesn't work here — it expects src, not url.

Add some basic styling for the logo:

.site-logo {
  height: 48px;
  width: auto;
  object-fit: contain;
}

2. Displaying the Favicon

This one's even simpler. Just add a <link> tag in the <head>, before <EmDashHead>:

{settings.favicon?.url && (
  <link rel="icon" type="image/webp" href={settings.favicon.url} />
)}

Adjust the type attribute to match whatever format you upload — image/png, image/svg+xml, etc.

Why This Happens

EmDash gives you full control over your templates. The admin settings store the logo and favicon data, but it's up to your layout to actually render them. If your theme was generated from a starter template, it might have placeholder CSS logos instead of pulling from settings.

Quick Checklist

  • Make sure you've actually uploaded a logo and favicon in the admin panel under Settings
  • Use settings.logo?.url (with optional chaining) to avoid errors when no logo is set
  • Keep a CSS fallback for when the logo hasn't been configured yet
  • After deploying, do a hard refresh (Cmd+Shift+R) — browsers cache favicons aggressively

Continue reading

X:00 Y:00