Question Changing logo,favicon is easy for developers, but difficult for me.

I looked pretty carefully at the customization board.
Changing the logo of the header part in the custom theme
I know how.

However, how to change the header logo in webtrees default theme
I do not know. Also, I don't know how to change the favicon.

The image file displayed in the favicon and header in the folder where the web tree is installed ico,png
The file was found, but the image file exists in the home folder and in another folder.
I don't know what to change.

On the premise that the web tree default theme is used.
I would like to know how to change the favicon and how to change the Header Logo.

Please let me know the location of the ico,png file and folder to be modified.

This part can be very easy for developers, but if it's not
It is also a very difficult problem.

I took a screenshot of the part I wanted to edit and attached it.
(The screen about changing the favicon was not captured.)

Login Header logo


Header logo


Please help.

See github.com/fisharebest/webtrees/issues/3173 and github.com/fisharebest/webtrees/issues/3948
It's being worked on to make it easier, but not with highest priority.

bertkoor wrote:

See github.com/fisharebest/webtrees/issues/3173 and github.com/fisharebest/webtrees/issues/3948
It's being worked on to make it easier, but not with highest priority.

Thanks for your reply.
Through the link you provided, I understood that changing the favicon is not yet easy.

From the answers above, I understood that changing the favicon is not easy. However, I know how to change the header logo.
I am using my site using webtreees, but
Instead of the webtrees logo in the hedaer location, it can represent and represent my site.
I would like to know how you can use your logo.
Please help.

I guess that you could use the css/js module to change the default logo in the webtrees theme.
Place your logo in the public folder on the server and then add the following css in the css/js module:

<style>
.wt-site-logo:after {
content: url(https://yourwebtreessite/public/yourlogo.jpg)
}
</style>

JustCarmen wrote:

I guess that you could use the css/js module to change the default logo in the webtrees theme.
Place your logo in the public folder on the server and then add the following css in the css/js module:

<style>
.wt-site-logo:after {
content: url(https://yourwebtreessite/public/yourlogo.jpg)
}
</style>

Thank you

Beautiful

Hello JustCarmen,

Tried your change suggestion and after finding that it needs
.wt-site-logo:after {
content: url("https://yourwebtreessite/public/yourlogo.jpg")
}
quotation marks in the URL, it worked. However, I cannot seem to resize the logo regardless of its original size. It will always stretches to the respective column size (much too big) regardless of further CSS "height" and "width" restrictions that I specify.
Do I need to take "flex" into account somewhere? (I am slightly overwhelmed as an amateur coder).
Once I can control the size with CSS, I will move further into using media queries for important device display sizes.
If you have any update, that would be greatly appreciated.