Anatole: favicon not showing

Created on 18 Jun 2020  ยท  6Comments  ยท  Source: lxndrblz/anatole

Thank you very much for creating this theme. I think it looks great and was easy to set up. I think I am experiencing a bug with the favicon.

My static folder is set up as follows:

โ”œโ”€โ”€ CNAME
โ”œโ”€โ”€ css
โ”‚   โ””โ”€โ”€ table.css
โ”œโ”€โ”€ favicons
โ”‚   โ””โ”€โ”€ favicon.ico
โ””โ”€โ”€ img
    โ””โ”€โ”€ profile.png

config.toml looks like:

baseURL = "https://samedwardes.com/"
languageCode = "en"
DefaultContentLanguage = "en"
title = "Real Sam I Am"
theme = "anatole"
summarylength = 10
enableEmoji = true

# Enable Disqus
#disqusShortname = ""

# Google Analytics
#googleAnalytics = "UA-123-45"

[params]
title = ""
author = "Sam Edwardes"
description = "Real Sam I Am - a blog by Sam Edwardes"
profilePicture = "img/profile.png"
keywords = ["sam edwardes", "blog", "outdoors", "data-science", "cycling"]
favicon = "favicons/"
customCss = ["css/table.css"]
mainSections = ["post"]

The favourite icon does not show up on my site samedwardes.com:

Screen Shot 2020-06-18 at 12 58 48 PM

For reference:

Please let me know if any other info could be helpful.

good first issue

All 6 comments

Hi Sam. Thanks for submitting your issue. I've just checked your site and the favicon shows up perfectly fine. Did you try to view the page in private mode or on another device?

Thank you for the quick response! Maybe it is something to do with my browser cache or other issues. I will try and clear everything and test again. But if it is working on your end I trust it is working for other visitors.

May I suggest a PR to clarify in the documentation how to use the favicon? I would be happy to draft this.

P.s. I am a blog/web rookie. This is only the second site I have made, the first was Jekyl / GitHub pages, so maybe this is obvious and no docs requires?

Give it a try and let me know if it works. That's how it looks in my browser:
image

A PR is always welcome! Actually, incomplete/difficult documentation is something that frustrates me about most Hugo themes. I, therefore, try not make the same mistake and explain the configuration in a way it can be understood by beginners too.

Thanks for the feedback Alexander. I confirm that it is now working on my browser using Google Chrome. For some reason still no luck with Firefox. Anyways not a big issue for me at this point.

chrome

firefox

I also created PR #33. It adds an example of the favicon to exampleSite, and clarifies in the README how to set up.

Anatole also allows png based favicons:

```html





````

You might want to try generating those too by using faviconit. Your favicon.ico is also quite big dimensions wise. I will add a note about this to the readme too.

I think you solved it. The problem was my favicon was too big, and I also did not realize you should generate different icons for different scenarios.

I ended up resizing my icon to 260x260, and then fed it through realfavicongenerator.net/. I stored the resulting download in static/favicons/

It now works on Firefox.

Screen Shot 2020-06-21 at 1 12 55 PM

Thank you for your help troubleshooting this.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

msfjarvis picture msfjarvis  ยท  3Comments

PiotrWachulec picture PiotrWachulec  ยท  4Comments

mattarnster picture mattarnster  ยท  5Comments

PiotrWachulec picture PiotrWachulec  ยท  6Comments

GhostBasenji picture GhostBasenji  ยท  5Comments