Favicon not working

[Zo-Bro-23]

Hi, I'm not able to get a favicon to show for my moonwalk website. I've tried the following:

• Add icon to icon.png in the root directory
• Add icon to the assets/images/favicon/favicon-16x16.png directory
• Update the icon property in _config.yml

I tried searching up on the topic, and that tells me that I should add the favicon HTML tag to either _layouts/head.html or _layouts/default.html. I'm not sure how the theme works in this situation though. Will adding the layout file override the theme (in _config.yml for GH Pages and Gemfile locally)? Or will the layout file I add be used separately from the layout files specified for the theme?

Also, is this the right way to make the favicon work? I would prefer not to clone the repo, and to use moonwalk as a theme, to keep everything lightweight, so how do I add a favicon for my website? Help would be appreciated; thanks.

[SethBarberee]

This issue made me look into mine again and was able to fix mine up.

When you pull up the console (with F12 in firefox):

• Open Elements tab
• Open head section
• Look for link rel="shortcut icon type="image/x-icon href=...

Assuming you kept most of the moonwalk repo, this is being set in the head.html https://github.com/abhinavs/moonwalk/blob/85648eba5e0ac9cb2579a112c329dd4a46f4dea3/_includes/head.html#L23

I changed mine to allow me to change favicon in the config but you would need to change the above or include the file it's referencing in your repo for it to work.

[Zo-Bro-23]

Oh. https://github.com/abhinavs/moonwalk/blob/85648eba5e0ac9cb2579a112c329dd4a46f4dea3/_includes/head.html#L19 https://github.com/abhinavs/moonwalk/blob/85648eba5e0ac9cb2579a112c329dd4a46f4dea3/_includes/head.html#L20

I saw these and got confused. Any idea what those do?

Also, moonwalk has this line in its _config.yml:

favicon: "./logo.png" # relative path to site's favicon

That is currently nonfunctional, if I'm right?

[SethBarberee]

I saw these and got confused. Any idea what those do?

I don't use both of them (I don't think I copied them to my website IIRC)

That is currently nonfunctional, if I'm right?

It's a holdover from a prior commit 1-2 years before where you could configure the favicon versus the direct path that exists today.

[abhinavs]

Thanks a lot @SethBarberee for your response. You are right. I will try to correct the code to reflect the current state better.

@Zo-Bro-23 you can use https://realfavicongenerator.net/ to create a favicon. It will give you a bunch of images as well as the corresponding HTML snippet, that you can add in _includes/head.html.

If you are like me and don't want to corrupt the main images directory, I recommend you create a favicon directory inside images. Don't forget to specify path in realfavicongenerator.net

[Zo-Bro-23]

The file paths /assets/... don't work when deployed to GH Pages. You need to use assets/... instead. I've created a PR (#30) with this fix. Also, will merging the PR update the theme on GH Pages and Ruby Gems? Or do you need to push it to Gems separately?

[abhinavs]

Ruby gems and updates on gh-pages need to be made separately, but the source of the code is this repo. So changing here should be enough.

[Zo-Bro-23]

Ruby gems and updates on gh-pages need to be made separately, but the source of the code is this repo. So changing here should be enough.

Makes sense. Thanks!