Add icon to webpage

[zo0o0ot]

I'd like to add an icon to the site. It'd be nice if the icon appears in the tab when you go to https://leagify.github.io/

Something like this would be nice:

[TJScalzo]

I think I can help with this. Just to be sure I understand, you'd like that mustache image to be the favicon for the website? Would you like me to use that exact image or should I create one similar but more suited to the job of being a favicon?

[zo0o0ot]

If another image is better to the limited resolution of the favicon, that's fine. I'm looking for something vaguely handlebar moustache-y there.

[TJScalzo]

I can't seem to clone your repository correctly. I think it's something to do with the fact that the repository leagify.github.io is a submodule in this repository and is called public. I can make the favicon file, but I'm not sure I'd be able to make a pull request to this repository.

[karltanjuan]

Yes true @TJScalzo

[zo0o0ot]

That is unfortunate. Could you explain where this would fit in, if you were able to clone the repo? It looks like you've linked to the public output from the hugo command.

[TJScalzo]

I wonder if there's a way to add favicons through Hugo? The only way I know of is adding them manually.

[zo0o0ot]

I think hugo might add them through the use of "partials".
https://gohugo.io/templates/partials/

I remember that one theme used them, but a lot of themes do not.

I'm going to include your other comment below for reference's sake:

I've generated the files and placed them where they need to be. Since in the README of the main repo says the Hugo Static Site Templating engine was used, I'm not going to directly edit any of the html files. You should add the following code to the head of every page on the site (probably using Hugo):

<link rel="apple-touch-icon" sizes="180x180" href="/favicons/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicons/favicon-16x16.png">
<link rel="manifest" href="/favicons/manifest.json">
<link rel="mask-icon" href="/favicons/safari-pinned-tab.svg" color="#000000">
<link rel="shortcut icon" href="/favicons/favicon.ico">
<meta name="msapplication-config" content="/favicons/browserconfig.xml">
<meta name="theme-color" content="#ffffff">

[TJScalzo]

That's exactly what I was just about to say! I found this and was about to post that it might solve the problem.

[zo0o0ot]

Either way, I'm a ton closer to solving the issue than I was at the start.

[TJScalzo]

It seems like the theme you're using has a favicon partial template built into it that you can activate through what I'm assuming is the site's config file. I'm not sure how useful that is since it only allows for a single file, but it can be a point to start from.

[zo0o0ot]

OK, I think I figured it out.

If I add an icon to /static/favicons/ I can reference it in the site parameters.

theme = "ananke"
[params]
favicon = "favicons/apple-touch-icon.png"

It looks like this support was added recently (theNewDynamic/gohugo-theme-ananke#54)

[TJScalzo]

I don't know if I explained or not, but the files I added are so the site will have a nice favicon on all OSs. If you're fine with focusing on just the main favicon for right now, you'd want to use "favicons/favicon.ico". The one you've picked is specifically for if the website is used on an iPhone or iPad.

[zo0o0ot]

I'm OK with that if that's the case, but if so, is there any way to force a white background on the "favicon.ico" icon? It shows up as all black on my dark browser tabs.

[TJScalzo]

Let me know if you run into any other problems.

[zo0o0ot]

I think that did the trick. Thanks, @TJScalzo ! 🥇

[MaanavD]

So i made a nicer (in my opinion) favicon with white strokes around the objects. If you like it i'd love to send it over in .ico format!

[zo0o0ot]

@MaanavD I see an alpha background there, are the edges visible on a black background? If so, it does look cool.

[zo0o0ot]

You're right. That one is nice.

[zo0o0ot]

I added #11 but then I noticed that my path uses /favicons/ so I updated the reference in #12 to use the new icon. Sweet.