Skip to content

Commit d5d2001

Browse files
WarwickGoateeWarwickGoatee
authored
Merge pull request #327 from UniversityofWarwick/ID-458
ID-458 Crestacular favicons part 2
2 parents d5d8772 + b7b6b20 commit d5d2001

24 files changed

Lines changed: 79 additions & 74 deletions

‎docs/_includes/favicon-links.html‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<link rel="apple-touch-icon" sizes="57x57" href="/dist/images/apple-touch-icon-57x57.png">
2+
<link rel="apple-touch-icon" sizes="60x60" href="/dist/images/apple-touch-icon-60x60.png">
3+
<link rel="apple-touch-icon" sizes="72x72" href="/dist/images/apple-touch-icon-72x72.png">
4+
<link rel="apple-touch-icon" sizes="76x76" href="/dist/images/apple-touch-icon-76x76.png">
5+
<link rel="apple-touch-icon" sizes="114x114" href="/dist/images/apple-touch-icon-114x114.png">
6+
<link rel="apple-touch-icon" sizes="120x120" href="/dist/images/apple-touch-icon-120x120.png">
7+
<link rel="apple-touch-icon" sizes="144x144" href="/dist/images/apple-touch-icon-144x144.png">
8+
<link rel="apple-touch-icon" sizes="152x152" href="/dist/images/apple-touch-icon-152x152.png">
9+
<link rel="apple-touch-icon" sizes="180x180" href="/dist/images/apple-touch-icon-180x180.png">
10+
11+
<!-- Default favicons -->
12+
<link rel="shortcut icon" type="image/x-icon" href="/dist/images/favicon.ico">
13+
<link rel="icon" type="image/png" href="/dist/images/favicon-32x32.png" sizes="32x32">
14+
<link rel="icon" type="image/png" href="/dist/images/favicon-96x96.png" sizes="96x96">
15+
<link rel="icon" type="image/png" href="/dist/images/favicon-192x192.png" sizes="192x192">
16+
17+
<!-- Light mode favicons -->
18+
<link rel="shortcut icon" type="image/x-icon" media="(prefers-color-scheme: light)" href="/dist/images/favicon.ico">
19+
<link rel="icon" type="image/png" href="/dist/images/favicon-32x32.png" media="(prefers-color-scheme: light)" sizes="32x32">
20+
<link rel="icon" type="image/png" href="/dist/images/favicon-96x96.png" media="(prefers-color-scheme: light)" sizes="96x96">
21+
<link rel="icon" type="image/png" href="/dist/images/favicon-192x192.png" media="(prefers-color-scheme: light)" sizes="192x192">
22+
23+
<!-- Dark mode favicon -->
24+
<link rel="shortcut icon" type="image/x-icon" href="/dist/images/favicon-dark-mode.ico" media="(prefers-color-scheme: dark)">
25+
<link rel="icon" href="/dist/images/favicon-dark-mode-32x32.png" type="image/png" media="(prefers-color-scheme: dark)" sizes="32x32">
26+
<link rel="icon" href="/dist/images/favicon-dark-mode-96x96.png" type="image/png" media="(prefers-color-scheme: dark)" sizes="96x96">
27+
<link rel="icon" href="/dist/images/favicon-dark-mode-192x192.png" type="image/png" media="(prefers-color-scheme: dark)" sizes="192x192">

‎docs/_includes/getting-started/progressive-web-apps.html‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
<h2 id="pwa" class="page-header">Progressive Web Apps</h2>
2+
<p>We've included icons to help you set up your application as a Progressive Web App (PWA) if you want. You'll find them
3+
in the images folder with the form <em>pwa-icon-[size]x[size].png</em>.</p>
4+
5+
<p>Here's an example of a PWA manifest.json file you can update and use for your application:</p>
6+
7+
<pre>
8+
{
9+
"short_name": "ID7",
10+
"name": "ID7 - University of Warwick brand",
11+
"icons": [
12+
{
13+
"src": "/dist/images/pwa-icon-512x512.png",
14+
"type": "image/png",
15+
"sizes": "512x512",
16+
"purpose": "any maskable"
17+
},
18+
{
19+
"src": "/dist/images/pwa-icon-192x192.png",
20+
"type": "image/png",
21+
"sizes": "192x192",
22+
"purpose": "any maskable"
23+
}
24+
],
25+
"id": "/",
26+
"start_url": "/",
27+
"background_color": "#A499F4",
28+
"display": "standalone",
29+
"scope": "/",
30+
"theme_color": "#A499F4",
31+
"description": "Standalone app for University of Warwick's ID7 brand",
32+
}
33+
</pre>
34+
35+
<p>There's more you can do with PWAs if you're intending for people to actually install your app. See <a href="https://web.dev/learn/pwa?hl=en">web.dev's guidelines</a> for more.</p>

‎docs/_includes/header-borderless.html‎

Lines changed: 1 addition & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -2,31 +2,8 @@
22
<meta http-equiv="X-UA-Compatible" content="IE=edge">
33
<meta name="viewport" content="width=device-width, initial-scale=1">
44

5-
<link rel="apple-touch-icon" sizes="57x57" href="/dist/images/apple-touch-icon-57x57.png">
6-
<link rel="apple-touch-icon" sizes="60x60" href="/dist/images/apple-touch-icon-60x60.png">
7-
<link rel="apple-touch-icon" sizes="72x72" href="/dist/images/apple-touch-icon-72x72.png">
8-
<link rel="apple-touch-icon" sizes="76x76" href="/dist/images/apple-touch-icon-76x76.png">
9-
<link rel="apple-touch-icon" sizes="114x114" href="/dist/images/apple-touch-icon-114x114.png">
10-
<link rel="apple-touch-icon" sizes="120x120" href="/dist/images/apple-touch-icon-120x120.png">
11-
<link rel="apple-touch-icon" sizes="144x144" href="/dist/images/apple-touch-icon-144x144.png">
12-
<link rel="apple-touch-icon" sizes="152x152" href="/dist/images/apple-touch-icon-152x152.png">
13-
<link rel="apple-touch-icon" sizes="180x180" href="/dist/images/apple-touch-icon-180x180.png">
14-
<link rel="icon" type="image/png" href="/dist/images/android-chrome-192x192.png" sizes="192x192">
5+
{% include favicon-links.html %}
156

16-
<!-- Default/light mode favicons -->
17-
<link rel="shortcut icon" type="image/x-icon" href="/dist/images/favicon.ico">
18-
<link rel="icon" type="image/png" href="/dist/images/favicon-32x32.png" sizes="32x32">
19-
<link rel="icon" type="image/png" href="/dist/images/favicon-96x96.png" sizes="96x96">
20-
<link rel="icon" type="image/png" href="/dist/images/favicon-16x16.png" sizes="16x16">
21-
22-
<!-- Dark mode favicon -->
23-
<link rel="shortcut icon" type="image/x-icon" href="/dist/images/favicon-dark-mode.ico" media="(prefers-color-scheme: dark)">
24-
<link rel="icon" href="/dist/images/favicon-dark-mode-16x16.png" type="image/x-icon" media="(prefers-color-scheme: dark)" sizes="16x16">
25-
<link rel="icon" href="/dist/images/favicon-dark-mode-32x32.png" type="image/x-icon" media="(prefers-color-scheme: dark)" sizes="32x32">
26-
<link rel="icon" href="/dist/images/favicon-dark-mode-96x96.png" type="image/x-icon" media="(prefers-color-scheme: dark)" sizes="96x96">
27-
28-
<meta name="msapplication-TileColor" content="#204f79">
29-
<meta name="msapplication-TileImage" content="/dist/images/mstile-144x144.png">
307
<meta name="theme-color" content="#204f79">
318

329
<title>

‎docs/_includes/header-wide.html‎

Lines changed: 1 addition & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -2,31 +2,8 @@
22
<meta http-equiv="X-UA-Compatible" content="IE=edge">
33
<meta name="viewport" content="width=device-width, initial-scale=1">
44

5-
<link rel="apple-touch-icon" sizes="57x57" href="/dist/images/apple-touch-icon-57x57.png">
6-
<link rel="apple-touch-icon" sizes="60x60" href="/dist/images/apple-touch-icon-60x60.png">
7-
<link rel="apple-touch-icon" sizes="72x72" href="/dist/images/apple-touch-icon-72x72.png">
8-
<link rel="apple-touch-icon" sizes="76x76" href="/dist/images/apple-touch-icon-76x76.png">
9-
<link rel="apple-touch-icon" sizes="114x114" href="/dist/images/apple-touch-icon-114x114.png">
10-
<link rel="apple-touch-icon" sizes="120x120" href="/dist/images/apple-touch-icon-120x120.png">
11-
<link rel="apple-touch-icon" sizes="144x144" href="/dist/images/apple-touch-icon-144x144.png">
12-
<link rel="apple-touch-icon" sizes="152x152" href="/dist/images/apple-touch-icon-152x152.png">
13-
<link rel="apple-touch-icon" sizes="180x180" href="/dist/images/apple-touch-icon-180x180.png">
14-
<link rel="icon" type="image/png" href="/dist/images/android-chrome-192x192.png" sizes="192x192">
5+
{% include favicon-links.html %}
156

16-
<!-- Default/light mode favicons -->
17-
<link rel="shortcut icon" type="image/x-icon" href="/dist/images/favicon.ico">
18-
<link rel="icon" type="image/png" href="/dist/images/favicon-32x32.png" sizes="32x32">
19-
<link rel="icon" type="image/png" href="/dist/images/favicon-96x96.png" sizes="96x96">
20-
<link rel="icon" type="image/png" href="/dist/images/favicon-16x16.png" sizes="16x16">
21-
22-
<!-- Dark mode favicon -->
23-
<link rel="shortcut icon" type="image/x-icon" href="/dist/images/favicon-dark-mode.ico" media="(prefers-color-scheme: dark)">
24-
<link rel="icon" href="/dist/images/favicon-dark-mode-16x16.png" type="image/x-icon" media="(prefers-color-scheme: dark)" sizes="16x16">
25-
<link rel="icon" href="/dist/images/favicon-dark-mode-32x32.png" type="image/x-icon" media="(prefers-color-scheme: dark)" sizes="32x32">
26-
<link rel="icon" href="/dist/images/favicon-dark-mode-96x96.png" type="image/x-icon" media="(prefers-color-scheme: dark)" sizes="96x96">
27-
28-
<meta name="msapplication-TileColor" content="#204f79">
29-
<meta name="msapplication-TileImage" content="/dist/images/mstile-144x144.png">
307
<meta name="theme-color" content="#204f79">
318

329
<title>

‎docs/_includes/header.html‎

Lines changed: 1 addition & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -2,31 +2,8 @@
22
<meta http-equiv="X-UA-Compatible" content="IE=edge">
33
<meta name="viewport" content="width=device-width, initial-scale=1">
44

5-
<link rel="apple-touch-icon" sizes="57x57" href="/dist/images/apple-touch-icon-57x57.png">
6-
<link rel="apple-touch-icon" sizes="60x60" href="/dist/images/apple-touch-icon-60x60.png">
7-
<link rel="apple-touch-icon" sizes="72x72" href="/dist/images/apple-touch-icon-72x72.png">
8-
<link rel="apple-touch-icon" sizes="76x76" href="/dist/images/apple-touch-icon-76x76.png">
9-
<link rel="apple-touch-icon" sizes="114x114" href="/dist/images/apple-touch-icon-114x114.png">
10-
<link rel="apple-touch-icon" sizes="120x120" href="/dist/images/apple-touch-icon-120x120.png">
11-
<link rel="apple-touch-icon" sizes="144x144" href="/dist/images/apple-touch-icon-144x144.png">
12-
<link rel="apple-touch-icon" sizes="152x152" href="/dist/images/apple-touch-icon-152x152.png">
13-
<link rel="apple-touch-icon" sizes="180x180" href="/dist/images/apple-touch-icon-180x180.png">
14-
<link rel="icon" type="image/png" href="/dist/images/android-chrome-192x192.png" sizes="192x192">
5+
{% include favicon-links.html %}
156

16-
<!-- Default/light mode favicons -->
17-
<link rel="shortcut icon" type="image/x-icon" href="/dist/images/favicon.ico">
18-
<link rel="icon" type="image/png" href="/dist/images/favicon-32x32.png" sizes="32x32">
19-
<link rel="icon" type="image/png" href="/dist/images/favicon-96x96.png" sizes="96x96">
20-
<link rel="icon" type="image/png" href="/dist/images/favicon-16x16.png" sizes="16x16">
21-
22-
<!-- Dark mode favicon -->
23-
<link rel="shortcut icon" type="image/x-icon" href="/dist/images/favicon-dark-mode.ico" media="(prefers-color-scheme: dark)">
24-
<link rel="icon" href="/dist/images/favicon-dark-mode-16x16.png" type="image/x-icon" media="(prefers-color-scheme: dark)" sizes="16x16">
25-
<link rel="icon" href="/dist/images/favicon-dark-mode-32x32.png" type="image/x-icon" media="(prefers-color-scheme: dark)" sizes="32x32">
26-
<link rel="icon" href="/dist/images/favicon-dark-mode-96x96.png" type="image/x-icon" media="(prefers-color-scheme: dark)" sizes="96x96">
27-
28-
<meta name="msapplication-TileColor" content="#204f79">
29-
<meta name="msapplication-TileImage" content="/dist/images/mstile-144x144.png">
307
<meta name="theme-color" content="#204f79">
318

329
<title>

‎docs/getting-started/index.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@
1212
{% include getting-started/template.html %}
1313
{% include getting-started/security-headers.html %}
1414
{% include getting-started/browser-and-device-support.html %}
15+
{% include getting-started/progressive-web-apps.html %}
1516
</section>
1617
<aside class="col-sm-3">
1718
<div class="id7-docs-sidebar" role="complementary">

‎generate-icons.js‎

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,8 @@ const SETTINGS = {
1515
darkColor: '#0c0c0c',
1616
androidChromeIconSizes: [36, 48, 72, 96, 144, 192],
1717
appleTouchIconSizes: [57, 60, 72, 76, 114, 120, 144, 152, 180],
18-
faviconSizes: [16, 32, 96],
18+
faviconSizes: [16, 32, 96, 192],
19+
pwaIconSizes: [72, 128, 144, 192, 512],
1920
}
2021

2122
const transparent = {r: 0, g: 0, b: 0, alpha: 0};
@@ -24,7 +25,7 @@ SETTINGS.androidChromeIconSizes.forEach(async (size) => {
2425
await generateIcon({
2526
size,
2627
padding: Math.floor(size / 20),
27-
inputFilename: SETTINGS.iconLightFilename,
28+
inputFilename: SETTINGS.iconDarkFilename,
2829
outputFilename: `android-chrome-${size}x${size}.png`,
2930
background: transparent,
3031
})
@@ -60,6 +61,16 @@ SETTINGS.faviconSizes.forEach(async (size) => {
6061
});
6162
});
6263

64+
SETTINGS.pwaIconSizes.forEach(async (size) => {
65+
await generateIcon({
66+
size,
67+
padding: Math.floor(size / 5.5), // 5.5 is a bit arbitrary, but works for the crest
68+
inputFilename: SETTINGS.iconDarkFilename,
69+
outputFilename: `pwa-icon-${size}x${size}.png`,
70+
background: {r: 164, g: 153, b: 244, alpha: 1},
71+
});
72+
});
73+
6374
const faviconBuffer = await pngToIco(SETTINGS.faviconSizes.map((size) => path.join(__dirname, SETTINGS.outputDirectory, `favicon-${size}x${size}.png`)));
6475
await fs.writeFile(path.join(__dirname, SETTINGS.outputDirectory, 'favicon.ico'), faviconBuffer);
6576

‎images/android-chrome-144x144.png‎

-167 Bytes
Loading

‎images/android-chrome-192x192.png‎

-139 Bytes
Loading

‎images/android-chrome-36x36.png‎

-24 Bytes
Loading

0 commit comments

Comments
 (0)