From 28495292af1b75fd79f86644565e4a790753c442 Mon Sep 17 00:00:00 2001 From: Geoffrey Garrett Date: Tue, 28 Jun 2022 01:15:33 +0200 Subject: [PATCH] docs(config.md): Fixed multi-favicon examples and general favicon explanation throughout --- content/notes/config.md | 38 ++++++++++++++++++++++++++++++-------- 1 file changed, 30 insertions(+), 8 deletions(-) diff --git a/content/notes/config.md b/content/notes/config.md index 8c758edd..c9cbd0a4 100644 --- a/content/notes/config.md +++ b/content/notes/config.md @@ -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 ``` -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 `` tag. - `sizes` (optional): The `sizes` attribute of the `` 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: | + ``` +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`.