docs(config.md): Fixed multi-favicon examples and general favicon explanati...

Geoffrey Garrett

2022-06-27 7070a1992a6c9462d50afcc7139f8f97e1dce2b8

docs(config.md): Fixed multi-favicon examples and general favicon explanation throughout

 content/notes/config.md

@@ -25,23 +25,29 @@

### HTML Favicons

A Favicon is most commonly seen preceding the URL in a browser. Some
other examples include (but are not limited to) bookmarks, search history, and 
app icons (i.e. "save page to homescreen" on mobile devices). [File format support](https://en.wikipedia.org/wiki/Favicon#File_format_support)
and the [use of favicons](https://en.wikipedia.org/wiki/Favicon#Use_of_favicon) differ
across the combination of platforms and browsers.
A Favicon is most commonly seen as the **image preceding the URL in a browser**. 
Some other examples include (but are not limited to) bookmarks, search history, 
and app icons (i.e. "save page to home screen" on mobile devices).
[File format support](https://en.wikipedia.org/wiki/Favicon#File_format_support)
and the [use of favicons](https://en.wikipedia.org/wiki/Favicon#Use_of_favicon) 
differ across the combination of platforms and browsers.

If you would like to customize the favicons of your website, you can add them to the `data/config.yaml` file. The **default** without any set `favicon` key is:
If you would like to customize the favicons of your quartz-based website, you 
can add them to the `data/config.yaml` file. The **default** without any set 
`favicon` key is:

```html
<link rel="shortcut icon" href="icon.png" type="image/png">
```

The default can be overridden by defining a value to the `favicon` key in your `data/config.yaml` file. Here is a `List[Dictionary]` example format, which is equivalent to the default:
The default can be overridden by defining a value to the `favicon` key in your 
`data/config.yaml` file. Here is a `List[Dictionary]` example format, which is
equivalent to the default:

```yaml
favicon:
  - { rel: "shortcut icon", href: "icon.png", type: "image/png" }
#  - { ... } # Repeat for each additional favicon you want to add
```

In this format, the following keys are available:
@@ -50,18 +56,34 @@
- `href` (optional): The `href` attribute of the `<link>` tag.
- `sizes` (optional): The `sizes` attribute of the `<link>` tag.

If you plan to add multiple favicons generated by a website, it may be easier to define it as HTML:
If you plan to add multiple favicons generated by a website (see list below), it
may be easier to define it as HTML. Here is an example which appends the 
**Apple touch icon** to quartz's default favicon:

```yaml
favicon: |
  <link rel="shortcut icon" href="icon.png" type="image/png">
  <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
```

This second favicon will now be used as a web page icon when someone adds your 
webpage to the home screen of their Apple device. If you are interested in more 
information about the current, and past, standards of favicons, you can read 
[this article](https://www.emergeinteractive.com/insights/detail/the-essentials-of-favicons/).

Some websites that **generate favicons** for you (ordered alphabetically) include:
- [`favicon.io`](https://favicon.io/)
- [`realfavicongenerator.net`](https://realfavicongenerator.net/)
- [`www.favicon.cc`](https://www.favicon.cc/)

These sites will take a base image and generate a set of favicons for you, 
one of which will be, for example, the `apple-touch-icon` favicon. These sites
will often **also provide the HTML** for the favicon, which can be simply 
added to the `data/config.yaml` using the HTML format of the `favicon` 
argument. 

**Note** that all generated favicon paths, defined by the `href` 
attribute, are relative to the `static/` directory.

### Graph View
To customize the Interactive Graph view, you can poke around `data/graphConfig.yaml`.