Add support for favicons #57

2023-08-28 09:46:21 +02:00 · 2023-08-28 09:46:21 +02:00 · b1c2e39ee3
commit b1c2e39ee3
parent 21fdc87b56
11 changed files with 32 additions and 0 deletions
--- a/README.md
+++ b/README.md
@ -72,3 +72,21 @@ Or to define a wholly custom theme, you will need to define the following CSS va

 For light mode palettes, the sequence of 00–07 should be reversed (light to dark, not dark to light).
 Note that not all colours are currently used in the theme.
+
+## Favicon
+
+risotto will automatically use favicons placed in the `static/` directory.
+The following files will be detected and included in your site's `<head>` section:
+
+* `favicon.ico`
+* `favicon-16x16.png`
+* `favicon-32x32.png`
+* `apple-touch-icon.png`
+* `site.webmanifest`
+
+You can generate these from an image or emoji using [favicon.io](https://favicon.io/) or a similar service.
+They must be placed directly under your site's `static/` directory, i.e. not in in a subdirectory or `themes/risotto/static/`.
+
+## Acknowledgements
+
+The 'cooked rice' emoji used as a favicon for the example site was created by the [Twemoji project](https://twemoji.twitter.com/) and is licensed under [CC-BY 4.0](https://creativecommons.org/licenses/by/4.0/).
--- a/exampleSite/static/.gitignore
+++ b/exampleSite/static/.gitignore
--- a/exampleSite/static/README
+++ b/exampleSite/static/README
@ -0,0 +1,6 @@
+The favicons in this directory were generated using the following graphics from Twitter Twemoji:
+
+- Graphics Title: 1f35a.svg
+- Graphics Author: Copyright 2020 Twitter, Inc and other contributors (https://github.com/twitter/twemoji)
+- Graphics Source: https://github.com/twitter/twemoji/blob/master/assets/svg/1f35a.svg
+- Graphics License: CC-BY 4.0 (https://creativecommons.org/licenses/by/4.0/)
--- a/exampleSite/static/android-chrome-192x192.png
+++ b/exampleSite/static/android-chrome-192x192.png
--- a/exampleSite/static/android-chrome-512x512.png
+++ b/exampleSite/static/android-chrome-512x512.png
--- a/exampleSite/static/apple-touch-icon.png
+++ b/exampleSite/static/apple-touch-icon.png
--- a/exampleSite/static/favicon-16x16.png
+++ b/exampleSite/static/favicon-16x16.png
--- a/exampleSite/static/favicon-32x32.png
+++ b/exampleSite/static/favicon-32x32.png
--- a/exampleSite/static/favicon.ico
+++ b/exampleSite/static/favicon.ico
--- a/exampleSite/static/site.webmanifest
+++ b/exampleSite/static/site.webmanifest
@ -0,0 +1 @@
+{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}
--- a/layouts/partials/head.html
+++ b/layouts/partials/head.html
@ -15,3 +15,10 @@
 <link rel="stylesheet" href="{{ printf "css/palettes/%s.css" (.Site.Params.theme.palette | default "base16-dark") | absURL }}">
 <link rel="stylesheet" href="{{ "css/risotto.css" | absURL }}">
 <link rel="stylesheet" href="{{ "css/custom.css" | absURL }}">
+
+<!-- favicon -->
+{{ if os.FileExists "static/favicon.ico" }}<link rel="icon" href="{{ "favicon.ico" | absURL }}">{{ end }}
+{{ if os.FileExists "static/favicon-32x32.png" }}<link rel="icon" type="image/png" sizes="32x32" href="{{ "favicon-32x32.png" | absURL }}">{{ end }}
+{{ if os.FileExists "static/favicon-16x16.png" }}<link rel="icon" type="image/png" sizes="16x16" href="{{ "favicon-16x16.png" | absURL }}">{{ end }}
+{{ if os.FileExists "static/apple-touch-icon.png" }}<link rel="apple-touch-icon" href="{{ "apple-touch-icon.png" | absURL }}">{{ end }}
+{{ if os.FileExists "static/site.webmanifest" }}<link rel="manifest" href="{{ "site.webmanifest" | absURL }}">{{ end }}
				`@ -0,0 +1 @@`
				`{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}`