Better Favicon

[tuetenk0pp]

First, I want to thank you for the updates you released. The Theme looks so much better now!

I wondered, if the favicon could be replaced and did some google research. Appearently, it is really easy to change the favicon if you do the change inside a theme. It's literally just a line of code in the theme header (see this forum thread):

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

I imagine one could set it to a path inside the theme folder.

I also know of a tool that could come in handy: https://realfavicongenerator.net/.

What I unfortunately don't have, is a ready to use favicon. I just think that the original webtrees favicon doesn't quite fit the clean and esthetic looks of your theme, especially if webtrees is used as a PWA on mobile. Maybe you or someone else (or future me) has the inspiration to make a better favicon.

[tuetenk0pp]

I imagine one could set it to a path inside the theme folder.

Just a little bit down the forum thread, I found this line:

<link rel="shortcut icon" href="', WT_THEME_DIR, 'images/favicon.ico" type="image/x-icon" />

[jchue]

Nice suggestion, and thank you for the research. I agree that the default webtrees logo isn't the prettiest. 🙂

Creative Tim, the creators behind the Argon design, actually designed a logo for Argon:

An idea would be to use the honeycomb pattern on the left as the icon. What do yo think?

[tuetenk0pp]

Looks quite nice! But I was productive in the meantime and went through your code to find the color gradient and font used in the header. So I created this logo here. It's not perfect, but I like it because it also uses the big W from the original logo. What do you think? I wasn't sure about the corner radius, so I didn't set one.

[jchue]

Thanks for being proactive; I dig it! I like how it alludes to the periodic table of elements. If you don't mind, could you make a 16x16 version? When I scale it down, it gets a bit blurry:

We could also try slightly rounded corners to see how that looks.

[tuetenk0pp]

If you don't mind, could you make a 16x16 version?

Yes I can sure do. I did this in MS Publisher, but I think a proper .svg will be nicer to work with. Unfortunately I don't have much spare time at the moment. Maybe I'll get to it next week.

Tasks:

• create .svg version
• find a good corner radius that somehow matches a value in rem from the main css file
• make different exports for different clients: e.g. generic browser favicon, apple touch icon, ...

find a good corner radius that somehow matches a value in rem from the main css file

I could use your help with that. Basically, I need to know the font size related to rem and a value. I would translate that to a em value inside the .svg version of the logo.

[jchue]

Sorry, I'm not sure what you mean. rem is relative to the user's browser font size, which for most is defaulted to 16px.

[tuetenk0pp]

ok I figured it out. I actually created a fork and would be happy to make a PR. Unfortunately, I don't have the knowledge to also take care of making the right changes in the theme files. My suggestion is that you create a different develop branch to which I then will make a PR so that we can work on this together. Sounds good?

This is what I have done:

• made .svg version of the logo
• created a github workflow that calls the realfavicongenerator api to generate the appropriate files and commits it to the repo

This is what we/you need to figure out:

• make changes to the logo if desired
• add an api key for realfavicongenerator as github secret to the repo
• move logo.svg to another location if desired
• move favicons to another location if desired (modify github workflow)
• choose a path for favicons inside the theme (need to know for realfavicongenerator api)
• make changes to header section of the theme
• optional: extend github workflow so that it automatically builds the entire theme and attaches it to a release (I have never done that but I imagine that it would be possible)

So, what do you think? Did your plans go another direction or are you happy with this?

[tuetenk0pp]

A note on the earlier version of the logo: I had the orientation of the background gradient wrong. I hope that it is correct now...

[jchue]

Hi, sorry you did all that work, but I'm thinking it's overkill to add a GitHub workflow for this, especially since there's no reason for the icons to be regenerated every single time.

Replacing the icons is more challenging than I thought, since the webmanifest.json file is generated dynamically with the image paths at request time. Until we can figure out how to do this, I propose we just have the three static images:

• apple-touch-icon.png (180x180)
• favicon-32.png (32x32)
• favicon-192.png (192x192)

And add them to the assets directory to just have users optionally upload them to their sites separately (since they need to be under the root and public directories, not the argon theme directory).

[tuetenk0pp]

Yeah I understand, it is a bit overkill. My intention was to make the generation of the .png files completely transparent and to eliminate the influence of my own or your own computer, so that the files are reproducable. The workflow would only run if logo.svg changed, so not on every push. I could also try and modify the workflow to only output the three files you mentioned (if I manage to understand how I did that in the first place ;-) ). But thats just an explanation. I'm fine with no workflow.

About replacing the icons: I have no idea how all of this works. All content inside favicons/ was actually generated by realvafivongenerator. So, since you are the one who does the tricky stuff, you decide how you want to do it.

[tuetenk0pp]

Hi @jchue I am about to make a PR that contains the png-files you specified and some short instructions on how to set them up. It also contains a workflow that generates the png files from the provided svg for you. But this only runs, if the svg file has been changed. Hope thats ok.

Have you tried this method from the forum thread I mentioned?

<link rel="shortcut icon" href="', WT_THEME_DIR, 'images/favicon.ico" type="image/x-icon" />