Adding a favicon?

Technical Questions
1

I added a favicon.ico file to the root directory of my app (see attached screenshot) and tried both with and without a manually added rel link in the head of the [[…pages]] file. I cannot seem to get the favicon to work. The file doesn’t even appear hosted on the root directory once I run. I just see a builder 404 page at /favicon.ico

Cleared my cache as well, no luck.

Any tips here?

Screen Shot 2024-03-27 at 9.45.54 AM
Screen Shot 2024-03-27 at 9.45.54 AM420×716 59.3 KB

2

Hello @danpeskin,

We recommend you keep the favicon.ico file inside the public directory, that way it will be accessible publicly and you may not encounter a 404 error

  1. Place your favicon.ico file inside the public directory of your application.

  2. In your header code, you can reference the favicon using a relative path from the root of your application. For example:

    <link rel="icon" type="image/x-icon" href="/favicon.ico">

    This assumes that your web server is configured to serve static files from the public directory, and the path /favicon.ico corresponds to the location of your favicon.ico file within the public directory.

  3. Ensure that your web server is configured to serve static files correctly. It should be set up to serve files from the public directory when requested.

By placing the favicon.ico file inside the public directory, you ensure that it’s easily accessible and that it will be served correctly by the web server.

3

Thank you! Understood on adding the files to public and was able to add the reference in the app. I’m not quite savvy on the configuration to serve static files though. How would I go about that?

4

Hello @danpeskin,

This depends on the server you are using, for Nginx, you need to configure a location block to serve static files. Add the following inside your server block or within a location block:

location / {
    root /path/to/your/public/directory;
    index index.html index.htm;
}