.
Notice that there are some new env.*
variables in the previous code. Let's add them in our existing global data file src/_data/env.js
.
// src/_data/env.js
baseUrl = ...; // added previously
modules.export = {
siteName: 'your_website_name',
themeColor: '#fffff', // replace with any color
dir: {
...
favicons: `/assets/img/favicons/`,
},
base: {
...
favicons: `${baseUrl}${dir.favicons}`,
},
}
.
Next let's work on the browserconfig
which Windows requires:-
<!-- src/root/browserconfig.njk -->
---
layout: false
permalink: browserconfig.xml
ignore: true
---
<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
<msapplication>
<tile>
<square150x150logo src="{{env.base.favicons}}favicon-150.png"/>
<square310x310logo src="{{env.base.favicons}}favicon-310.png"/>
<TileColor>{{ env.themeColor }}</TileColor>
</tile>
</msapplication>
</browserconfig>
.
Last one. The web app manifest is a JSON file that tells the browser about your Progressive Web App and how it should behave when installed on the user's desktop or mobile device.
// src/root/web-manifest.njk
---
layout: false
permalink: web.manifest
ignore: true
---
{
"name": "{{ env.siteName }}",
"short_name": "{{ env.siteName }}",
"start_url": "/",
"icons": [
{
"src": "{{ env.base.favicons }}favicon-192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "{{ env.base.favicons }}favicon-512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"theme_color": "{{ env.themeColor }}",
"background_color": "{{ env.themeColor }}",
"display": "standalone"
}
You might want to test how the favicons show up in each platforms. There is no easy way to do it, you may need to test manually or create your own automation test (may not help if you want to test the photo quality).
There are some tools could help you to test on some of it.
To test on older browsers, like Internet Explorer, you can sign up for BrowserStack or Saucelabs. These two testing tools support multiple Desktop OSes, mobile OSes and browser versions. It makes testing easier (don't need to have a physical device ourselves).
However, the free trial period is short, and you will need to subscribe to continue using it.
On the other hand, you can use Chrome DevTools to test if your web manifest
is configured correctly.
If your website is a Progressive Web App (PWA) - Maskable icons are a new icon format that gives you more control and let PWA use adaptive icons. If you supply a maskable icon, your icon can fill up the entire shape and look great on all Android devices.
You may read this article for more details. This maskabel.app is a tool to help you create one.
Yay! We have generated and set up favicons, themes, and web manifest to support almost all of the platforms.
I wish we could have shorter, easier or a one size fit all favicon solution 😆. Keeping track on how each platform require a slightly different image size and meta tag is not fun at all.
In the coming posts, I plan to write about more on how I built my website with 11ty:
Let me know if the above topics interest you.
.
Here's the GitHub repo for the code above: jec-11ty-starter. I'll update the repo whenever I write a new post.
That's all. Happy coding!
Have something to say? Leave me comments on Twitter 👇🏼
Follow my writing: @JecelynYeen