Logo and Favicon

Step 1: Generate A Logo Image

I use OpenAI to generate a first draft of a logo using the following prompt.

Prompt

Please generate a colorful but minimalistic logo for this course website. The logo should be on a square 512x512 image. The background is plain white. (include course description).

Download this file and place it in the file docs/img/logo.png

Step 2: Use a Favicon Tool

Use a web-based favicon converter tool. I use

https://favicon.io/favicon-converter/

Drag the image generated by the prompt above into the web page and then download the zip file it generates.

Unzip the file and place the images into the docs/img directory:

• favicon.ico
• favicon-16x16.png
• favicon-32x32.png
• logo-180x180.png
• logo-192x192.png
• logo-512x512.png

Step 3: Update Your mkdocs.yml file

theme:
  name: material
  logo: img/logo.png
  favicon: img/favicon.ico

Adjust the CSS for the Logo Size

I prefer a logo in the upper left corner that is about 50x50 but up to 70x120 also work.

The file is: docs/css/extra.css

.md-header__button.md-logo {
    margin: 0;
    padding: 0;
}
.md-header__button.md-logo img, .md-header__button.md-logo svg {
    height: 50px;
    width: 50px;
}