Astro - dynamically adjust favicon

So, I'm just pretty new regarding Astro. To change my favicon I assume I would need to do:

export interface Props {
  favicon?: image;
}

const { favicon = 'path' } = Astro.props as Props;

export interface Props {
  favicon?: image;
}

const { favicon = 'path' } = Astro.props as Props;

<link rel="icon" type="image/svg+xml" href={favicon} />

<link rel="icon" type="image/svg+xml" href={favicon} />

That is correct, right? Now, is there a way to dynamically adjust this favicon? Let's say, if user has light theme, use black favicon, and if user has dark theme, use white favicon.

8 Replies

MyndiOP•3y ago

~~Actually, I should pass a string, right? Not sure what I can pass on. Besides string, integer? and boolean.~~ Okay, the string question is solved, the other one remains! worrySmile

yes, url has to be a string.

Kevin Powell•3y ago

In this case, there is a much simpler solution 😄

<link href="favicon-light.png" rel="icon"
  media="(prefers-color-scheme: light)" 
/>
<link href="dark.png rel="icon"
      media="(prefers-color-scheme: dark)"/>

<link href="favicon-light.png" rel="icon"
  media="(prefers-color-scheme: light)" 
/>
<link href="dark.png rel="icon"
      media="(prefers-color-scheme: dark)"/>

Props wouldn't really help us in this situation anyway, since I don't think we could change them with JS, since the alternative is to use JS to check the user's preference and have it switch out the icon.

MyndiOP•3y ago

Props did help!

MyndiOP•3y ago

Brave (dark theme).

MyndiOP•3y ago

Edge (light theme).

MyndiOP•3y ago

It's dynamically passing the correct favicon :D

<link rel="icon" type="image/svg+xml" href={favicon} media="(prefers-color-scheme: dark)" />
<link rel="icon" type="image/svg+xml" href={faviconLight} media="(prefers-color-scheme: light)" />

<link rel="icon" type="image/svg+xml" href={favicon} media="(prefers-color-scheme: dark)" />
<link rel="icon" type="image/svg+xml" href={faviconLight} media="(prefers-color-scheme: light)" />

Thank you for the help Hearts

MyndiOP•3y ago

https://gyazo.com/961da143d9d230ff98c6b326de1a97e7

Gyazo

Kevin Powell•3y ago

Ah, combined with props, very nice 🙂

Gaming

Programming

Astro - dynamically adjust favicon