Personal Favicon - not working if we use the local volume....

[jpquinta]

Description

I'm trying to add my personal favicon like is described on your manuals on your page. But it's not working....

I'm using the setting path to a local image relative that I have on my docker settings, that is the same for my personal Background (and this one is working) but the image of the "favicon.ico" is never load.

What can be wrong?

Thank you
JQ

homepage version

v0.9.1

Installation method

Docker

Configuration

These are the settings of my volumes for my docker

volumes:
      - ./config:/app/config
      - ./public/images:/app/public/images
      - ./public/icons:/app/public/icons

Container Logs

No response

Browser Logs

No response

Troubleshooting

This is the result:

[glime-ai[bot]]

Thanks for posting a discussion about homepage here on GitHub. Homepage now uses a fancy new AI tool thanks to our friends at Glime, so the answer below is the AI bot's attempt to answer your question. If you feel it's sufficient you can mark the answer and close this post, otherwise feel free to leave it open of course!

Thanks for using Homepage! ❤️

---

To troubleshoot the issue with your favicon not loading, please follow these steps:

1. Check the favicon file name and format: Ensure that the favicon file is named favicon.ico and is in the correct ICO format. Some browsers may not recognize favicons in other formats or with different names.

2. Verify the favicon path: Based on your Docker volume settings, the favicon should be placed in the ./public/icons directory on your host machine. Make sure the favicon is in this directory.

3. Restart the container: After adding or changing the favicon, you need to restart the Homepage container for the changes to take effect. This is a common requirement mentioned in the documentation.

4. Clear browser cache: Browsers aggressively cache favicons. Clear your browser cache or try accessing the page using a different browser or incognito mode to see if the favicon loads.

5. Check browser console: Open the browser's developer tools and check the console for any errors related to loading the favicon. This can provide clues if the file is not being found or if there's another issue.

6. Inspect the page: Right-click on the page and select "Inspect" or "View Page Source" to check the HTML head section. Look for the <link rel="icon" href="..."> tag and verify that the path to the favicon is correct.

7. Check file permissions: Ensure that the favicon file has the correct permissions and is readable by the container.

8. Review the documentation: Double-check the Homepage documentation to ensure you haven't missed any steps specific to setting up a custom favicon.

If you've followed all these steps and the favicon still isn't loading, please provide additional information such as any error messages in the browser console or container logs, as this can help further diagnose the issue.

This comment was generated by Glime.

[Mlearn]

Got the same problem.

[Panichdi]

Got the same problem.

[amanger-qual]

Same here!

[truhponen]

Hi,

I had similar issues but after mapping svg-file as favicon started working.
favicon: /images/kotimme.svg

After this change I still had problems with my Android-phone. When I added homepage to start screen it used Homepage-icon. To fix this I mapped my whole favicon set (cannot remember which online service I used) to Homepage-icons (which are in root of public folder).

My Docker compose with mappings:

  homepage:
    container_name: homepage
    image: ghcr.io/gethomepage/homepage:latest
    restart: unless-stopped
    ports:
      - 3000:3000
    volumes:
      - /config-local/homepage/config:/app/config # Make sure your local config directory exists
      - /config-local/homepage/icons:/app/public/icons
      - /config-local/homepage/images:/app/public/images
      - /config-local/homepage/favicon/android-chrome-192x192.png:/app/public/android-chrome-192x192.png
      - /config-local/homepage/favicon/android-chrome-512x512.png:/app/public/android-chrome-512x512.png
      - /config-local/homepage/favicon/apple-touch-icon.png:/app/public/apple-touch-icon.png
      - /config-local/homepage/favicon/favicon-16x16.png:/app/public/favicon-16x16.png
      - /config-local/homepage/favicon/favicon-32x32.png:/app/public/favicon-32x32.png
      - /config-local/homepage/favicon/favicon.ico:/app/public/homepage.ico
      - /config-local/homepage/favicon/mstile-144x144.png:/app/public/mstile-144x144.png
      - /config-local/homepage/favicon/mstile-150x150.png:/app/public/mstile-150x150.png
      - /config-local/homepage/favicon/mstile-310x150.png:/app/public/mstile-310x150.png
      - /config-local/homepage/favicon/mstile-310x310.png:/app/public/mstile-310x310.png
      - /config-local/homepage/favicon/mstile-70x70.png:/app/public/mstile-70x70.png
      - /config-local/homepage/favicon/safari-pinned-tab.svg:/app/public/safari-pinned-tab.svg
      - /config-local/homepage/favicon/site.webmanifest:/app/public/site.webmanifest

[super25k]

I had the same problem as @jpquinta.
Fixed by changing the name of favicon.ico to favicon.png.

Mappings were same as OP:

These are the settings of my volumes for my docker

volumes:
- ./config:/app/config
- ./public/images:/app/public/images
- ./public/icons:/app/public/icons

[github-actions[bot]]

This discussion has been automatically closed because it was marked as answered. See our contributing guidelines for more details.