#Svg favicon

3 messages · Page 1 of 1 (latest)

hoary sleet
#

I have the following line in my layout
<link rel="icon" href="/small-logo.svg" type="image/svg+xml" />

and a small-logo.svg file in my public folder

if I use /public/small-logo.svg it complains, but if not, it is not available as the favicon at least in dev mode.

eager windBOT
#

Hi @hoary sleet. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

#

In Astro, files placed in the public/ directory are served at the root of your site. This means that if you have a file at public/small-logo.svg, you should reference it in your HTML as /small-logo.svg, not /public/small-logo.svg. Using /public/small-logo.svg will not work, because the public/ part is not included in the URL path—Astro copies the contents of public/ directly to the root of your built site.

So, your line:

<link rel="icon" href="/small-logo.svg" type="image/svg+xml" />

is correct, assuming small-logo.svg is in the public/ directory. You should not use /public/small-logo.svg in your href attribute. If the favicon is not showing up in dev mode, double-check that:

  • The file is named exactly small-logo.svg and is in the public/ directory.
  • There are no typos in the filename or path.
  • Your browser cache is cleared or you do a hard refresh.

This is the standard way to reference static assets in Astro, as described in the documentation:

You can place any static asset in the public/ directory of your project, and Astro will copy it directly into your final build untouched. ... You can reference a public/ file by a URL path directly in your HTML templates.

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

Imports reference

If you continue to have issues, ensure that the file is not being blocked or misnamed, and that your dev server is running correctly.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: