From 7070a1992a6c9462d50afcc7139f8f97e1dce2b8 Mon Sep 17 00:00:00 2001
From: Geoffrey Garrett <g.h.garrett13@gmail.com>
Date: Mon, 27 Jun 2022 23:15:33 +0000
Subject: [PATCH] docs(config.md): Fixed multi-favicon examples and general favicon explanation throughout
---
content/notes/config.md | 38 ++++++++++++++++++++++++++++++--------
1 files changed, 30 insertions(+), 8 deletions(-)
diff --git a/content/notes/config.md b/content/notes/config.md
index 8c758ed..c9cbd0a 100644
--- a/content/notes/config.md
+++ b/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`.
--
Gitblit v1.10.0