Fix favicon on Safari

This commit is contained in:
Richard Feldman 2023-09-17 22:03:10 -04:00
parent 789090a514
commit 0ab49454b3
No known key found for this signature in database
GPG Key ID: F1F21AA5B1D9E43B
3 changed files with 11 additions and 1 deletions

View File

@ -10,6 +10,9 @@
<script type="text/javascript" src="search.js" defer></script>
<link rel="stylesheet" href="styles.css">
<link rel="icon" href="/favicon.svg">
<!-- Safari ignores rel="icon" and only respects rel="mask-icon". It will render the SVG with
fill="#000" unless this `color` attribute here is hardcoded (not a CSS `var()`) to override it.
-->
<link rel="mask-icon" href="/favicon.svg" color="#7d59dd">
<!-- Prefetch links -->
</head>

View File

@ -9,6 +9,10 @@
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="/site.css">
<link rel="icon" href="/favicon.svg">
<!-- Safari ignores rel="icon" and only respects rel="mask-icon". It will render the SVG with
fill="#000" unless this `color` attribute here is hardcoded (not a CSS `var()`) to override it.
-->
<link rel="mask-icon" href="/favicon.svg" color="#7d59dd">
</head>
<body>

View File

@ -2,7 +2,7 @@ app "roc-website"
packages { pf: "../../examples/static-site-gen/platform/main.roc" }
imports [
pf.Html.{ html, head, body, footer, div, main, text, nav, a, link, meta },
pf.Html.Attributes.{ content, name, id, href, rel, lang, class, title, charset },
pf.Html.Attributes.{ content, name, id, href, rel, lang, class, title, charset, color },
]
provides [transformFileContent] to pf
@ -43,6 +43,9 @@ view = \page, htmlContent ->
meta [name "viewport", content "width=device-width"] [],
link [rel "stylesheet", href "/wip/site.css"] [],
link [rel "icon", href "/favicon.svg"] [],
# Safari ignores rel="icon" and only respects rel="mask-icon". It will render the SVG with
# fill="#000" unless this `color` attribute here is hardcoded (not a CSS `var()`) to override it.
link [rel "mask-icon", href "/favicon.svg", color "#7d59dd"] [],
],
body [] [
viewNavbar,