How to change logo/favicon using material/overrides (src??)

[lingyaw]

Hi,

I'm trying to build MkDocs using the source code from this repository. In mkdocs.yml, the configuration includes custom_dir: material/overrides. I want to change the favicon.png and the icon, so I replaced favicon.png in docs/assets/favicon.png and logo.svg in material/template/.icon/logo.svg. these changes don't seem to take effect. Even after deleting all these images, the website still builds with the original logo. I’m also having the same issue with updating the color.

Does anyone know how to change the icon, favicon, and colors when same configuration from this repository (material/overrides?

[alexvoss]

Can I just ask so we understand you correctly - you are building the documentation for Material for MkDocs and then want to change things within it? Are you looking to use the documentation as a starting point for your own project? I am not sure I would recommend that. Have you tried setting your favicon and logo in a new project?

[lingyaw]

Hi Alexander,

I tried creating a new project and set up the favicon/icon, it works well! I also try to build the same website using the source code from this repository to have a better understanding of MkDocs. but I couldn't figure out how to change the favicon/icon when using material/overrides in mkdocs.yml. I might have misunderstood the code.

The website homepage does not match the one displayed at https://squidfunk.github.io/mkdocs-material/. Do you know where I can find the code (HTML, CSS, JavaScript) for that homepage in this repository? Or am I missing something when building the website?

[alexvoss]

The Material for MkDocs documentation site is built from the repository of the Insiders Edition. If you look at the footer, you can see it is "Made with Material for MkDocs Insiders".

[lingyaw]

Hi Alex, thanks a lot for this information! I will have a look

[kamilkrzyskow]

Your config with favicon: assets/favicon.png seems good, so I would say the problem could be the browser cache if it's not loading.

As for the logo, you've changed the file inside the material/templates directory, but are you sure this is the source for the files?
Have you installed the project using pip install -e . or did you use pip install mkdocs-material?
If you installed the theme using the latter, changes to the material/templates directory of the repository won't have any effect.

You can see the used "themes" via mkdocs serve --watch-theme. At the end of the log, a list of paths will be shown that are merged into one file tree that later is used to load the files. Typically you'd have your own project with your own overrides directory to put your own templates inside, including your logo image under the overrides/.icons directory, you could do that here with the material/overrides directory.

---

Like Alex is saying it's recommended to build your MkDocs site from scratch with mkdocs new and later add things that you need per the documentation or following the tutorial section.

The mkdocs.yml from the repository contains various customizations that are used specifically with this docs page, you might not need them and you might start to think that something is the "default" behaviour while it was the customization, like the special Insiders page.

[lingyaw]

Hi Kamil, thank you so much for these detailed explanation. I installed project from this repo using pip install -r requirement. Now I have started building website from scratch and it works well. have to say Modoc is quite practical tool for building documentation website. Thanks for the help!