12 replies

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;

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} />

<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.

Astro - dynamically adjust favicon

Similar Threads

Similar Threads

Similar Threads