Merge pull request #146 from geoffreygarrett/hugo

content/notes/config.md

@@ -23,6 +23,68 @@ links: # Links to show in footer
     link: https://github.com/jackyzha0
 ```
 
+### HTML Favicons
+
+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 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:
+
+```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:
+- `rel`: The `rel` attribute of the `<link>` tag.
+- `type`: The `type` attribute of the `<link>` tag.
+- `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 (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`.
 

layouts/partials/head.html

@@ -10,7 +10,17 @@
     end }}
   </title>
   <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <link rel="shortcut icon" type="image/png" href="{{$.Site.BaseURL}}/icon.png" />
+
+  <!-- HTML Favicon -->
+  {{ $favicon := $.Site.Data.config.favicon | default (slice (dict "rel" "shortcut icon" "type" "image/png" "href" "icon.png")) }}
+  {{ $type := (printf "%T" $favicon) }}
+  {{ if eq $type "string" }}
+  {{ $favicon | safeHTML }}
+  {{ else }}
+  {{ range $favicon }}
+  <link rel="{{.rel}}" {{if .type}}type="{{.type}}"{{end}} {{if .sizes}}sizes="{{.sizes}}"{{end}} href="{{$.Site.BaseURL}}/{{.href}}" />
+  {{- end }}
+  {{ end }}
 
   <!-- CSS Stylesheets and Fonts -->
   <link