tomoyanonymous/quartz-research-note
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Geoffrey Garrett 2022-06-28 01:15:33 +02:00
parent d3075c02bb
commit 28495292af
1 changed files with 30 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
content/notes/config.md
View File

@ -25,23 +25,29 @@ links: # Links to show in footer
### 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 @@ In this format, the following keys are available:
- `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`.