You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
feat(gatsby-plugin-manifest): add option to generate apple-touch-icons links (#7256)
Fixes#5887 /cc @seaneking @moonmeister
I'd like to have gatsby-plugin-manifest to generate apple-touch-icon meta tags (links) for me.
Would it be simple enough to generate tags under the same rules as for favicon (only when the icon is being generated by the plugin)?
This has been required to be a new major release, but is that v2 (still in beta) or v3?
The initial commit datakurre@4cf3ba4 should be the smallest possible change, but I'd probably like to move the code in a separate module where `withPrefix` is passed as a function argument and could be mocked in tests and make them simpler.
* [x] discussion
* [x] tests
* [x] docs update?
Copy file name to clipboardExpand all lines: packages/gatsby-plugin-manifest/README.md
+132-105
Original file line number
Diff line number
Diff line change
@@ -15,7 +15,7 @@ If you're using this plugin together with [`gatsby-plugin-offline`](https://www.
15
15
this plugin should be listed _before_ the offline plugin so that it can cache
16
16
the created manifest.webmanifest.
17
17
18
-
If you use the "automatic mode" (described below), this plugin will also add a favicon link to your html pages.
18
+
If you use the "automatic mode" or "hybrid mode" (described below), this plugin will also add a favicon link.
19
19
20
20
## Install
21
21
@@ -33,144 +33,171 @@ There are three modes in which icon generation can function: automatic, hybrid,
33
33
34
34
### Automatic mode
35
35
36
-
In the automatic mode, you are responsible for defining the entire web app manifest except for the icons portion. You only provide a high resolution source icon. The icons themselves and the needed config will be generated at build time. See the example below:
37
-
38
-
```javascript
39
-
// In your gatsby-config.js
40
-
plugins: [
41
-
{
42
-
resolve:`gatsby-plugin-manifest`,
43
-
options: {
44
-
name:`GatsbyJS`,
45
-
short_name:`GatsbyJS`,
46
-
start_url:`/`,
47
-
background_color:`#f7f0eb`,
48
-
theme_color:`#a2466c`,
49
-
display:`minimal-ui`,
50
-
icon:`src/images/icon.png`, // This path is relative to the root of the site.
36
+
In the automatic mode, you are responsible for defining the entire web app manifest except for the icons portion. You only provide a high resolution source icon. The icons themselves and the needed config will be generated at build time. See the example `gatsby-config.js` below:
37
+
38
+
```javascript:title=gatsby-config.js
39
+
module.exports= {
40
+
plugins: [
41
+
{
42
+
resolve:`gatsby-plugin-manifest`,
43
+
options: {
44
+
name:`GatsbyJS`,
45
+
short_name:`GatsbyJS`,
46
+
start_url:`/`,
47
+
background_color:`#f7f0eb`,
48
+
theme_color:`#a2466c`,
49
+
display:`minimal-ui`,
50
+
icon:`src/images/icon.png`, // This path is relative to the root of the site.
51
+
},
51
52
},
52
-
},
53
-
]
53
+
],
54
+
}
54
55
```
55
56
56
57
When in automatic mode the following json array is injected into the manifest configuration you provide and the icons are generated from it. The source icon you provide should be at least as big as the largest icon being generated.
57
58
58
-
```javascript
59
-
;[
59
+
```json
60
+
[
60
61
{
61
-
src:`icons/icon-48x48.png`,
62
-
sizes:`48x48`,
63
-
type:`image/png`,
62
+
"src": "icons/icon-48x48.png",
63
+
"sizes": "48x48",
64
+
"type": "image/png"
64
65
},
65
66
{
66
-
src:`icons/icon-72x72.png`,
67
-
sizes:`72x72`,
68
-
type:`image/png`,
67
+
"src": "icons/icon-72x72.png",
68
+
"sizes": "72x72",
69
+
"type": "image/png"
69
70
},
70
71
{
71
-
src:`icons/icon-96x96.png`,
72
-
sizes:`96x96`,
73
-
type:`image/png`,
72
+
"src": "icons/icon-96x96.png",
73
+
"sizes": "96x96",
74
+
"type": "image/png"
74
75
},
75
76
{
76
-
src:`icons/icon-144x144.png`,
77
-
sizes:`144x144`,
78
-
type:`image/png`,
77
+
"src": "icons/icon-144x144.png",
78
+
"sizes": "144x144",
79
+
"type": "image/png"
79
80
},
80
81
{
81
-
src:`icons/icon-192x192.png`,
82
-
sizes:`192x192`,
83
-
type:`image/png`,
82
+
"src": "icons/icon-192x192.png",
83
+
"sizes": "192x192",
84
+
"type": "image/png"
84
85
},
85
86
{
86
-
src:`icons/icon-256x256.png`,
87
-
sizes:`256x256`,
88
-
type:`image/png`,
87
+
"src": "icons/icon-256x256.png",
88
+
"sizes": "256x256",
89
+
"type": "image/png"
89
90
},
90
91
{
91
-
src:`icons/icon-384x384.png`,
92
-
sizes:`384x384`,
93
-
type:`image/png`,
92
+
"src": "icons/icon-384x384.png",
93
+
"sizes": "384x384",
94
+
"type": "image/png"
94
95
},
95
96
{
96
-
src:`icons/icon-512x512.png`,
97
-
sizes:`512x512`,
98
-
type:`image/png`,
99
-
},
97
+
"src": "icons/icon-512x512.png",
98
+
"sizes": "512x512",
99
+
"type": "image/png"
100
+
}
100
101
]
101
102
```
102
103
103
104
The automatic mode is the easiest option for most people.
104
105
105
106
### Hybrid mode
106
107
107
-
However, if you want to include more or fewer sizes, then the hybrid option is for you. Like automatic mode, you should include a high resolution icon to generate smaller icons from. But unlike automatic mode, you provide the `icons` array config and icons are generated based on the sizes defined in your config. Here's an example:
108
-
109
-
```javascript
110
-
// In your gatsby-config.js
111
-
plugins: [
112
-
{
113
-
resolve:`gatsby-plugin-manifest`,
114
-
options: {
115
-
name:`GatsbyJS`,
116
-
short_name:`GatsbyJS`,
117
-
start_url:`/`,
118
-
background_color:`#f7f0eb`,
119
-
theme_color:`#a2466c`,
120
-
display:`minimal-ui`,
121
-
icon:`src/images/icon.png`, // This path is relative to the root of the site.
122
-
icons: [
123
-
{
124
-
src:`/favicons/android-chrome-192x192.png`,
125
-
sizes:`192x192`,
126
-
type:`image/png`,
127
-
},
128
-
{
129
-
src:`/favicons/android-chrome-512x512.png`,
130
-
sizes:`512x512`,
131
-
type:`image/png`,
132
-
},
133
-
],
108
+
However, if you want to include more or fewer sizes, then the hybrid option is for you. Like automatic mode, you should include a high resolution icon to generate smaller icons from. But unlike automatic mode, you provide the `icons` array config and icons are generated based on the sizes defined in your config. Here's an example `gatsby-config.js`:
109
+
110
+
```javascript:title=gatsby-config.js
111
+
module.exports= {
112
+
plugins: [
113
+
{
114
+
resolve:`gatsby-plugin-manifest`,
115
+
options: {
116
+
name:`GatsbyJS`,
117
+
short_name:`GatsbyJS`,
118
+
start_url:`/`,
119
+
background_color:`#f7f0eb`,
120
+
theme_color:`#a2466c`,
121
+
display:`minimal-ui`,
122
+
icon:`src/images/icon.png`, // This path is relative to the root of the site.
123
+
icons: [
124
+
{
125
+
src:`/favicons/android-chrome-192x192.png`,
126
+
sizes:`192x192`,
127
+
type:`image/png`,
128
+
},
129
+
{
130
+
src:`/favicons/android-chrome-512x512.png`,
131
+
sizes:`512x512`,
132
+
type:`image/png`,
133
+
},
134
+
],
135
+
},
134
136
},
135
-
},
136
-
]
137
+
],
138
+
}
137
139
```
138
140
139
141
The hybrid option allows the most flexibility while still not requiring you to create most icons sizes manually.
140
142
141
143
### Manual mode
142
144
143
-
In the manual mode, you are responsible for defining the entire web app manifest and providing the defined icons in the static directory. Only icons you provide will be available. There is no automatic resizing done for you. See the example below:
145
+
In the manual mode, you are responsible for defining the entire web app manifest and providing the defined icons in the static directory. Only icons you provide will be available. There is no automatic resizing done for you. See the example `gatsby-config.js` below:
146
+
147
+
```javascript:title=gatsby-config.js
148
+
module.exports= {
149
+
plugins: [
150
+
{
151
+
resolve:`gatsby-plugin-manifest`,
152
+
options: {
153
+
name:`GatsbyJS`,
154
+
short_name:`GatsbyJS`,
155
+
start_url:`/`,
156
+
background_color:`#f7f0eb`,
157
+
theme_color:`#a2466c`,
158
+
display:`minimal-ui`,
159
+
icons: [
160
+
{
161
+
// Everything in /static will be copied to an equivalent
162
+
// directory in /public during development and build, so
163
+
// assuming your favicons are in /favicons,
164
+
// you can reference them here
165
+
src:`/favicons/android-chrome-192x192.png`,
166
+
sizes:`192x192`,
167
+
type:`image/png`,
168
+
},
169
+
{
170
+
src:`/favicons/android-chrome-512x512.png`,
171
+
sizes:`512x512`,
172
+
type:`image/png`,
173
+
},
174
+
],
175
+
},
176
+
},
177
+
],
178
+
}
179
+
```
144
180
145
-
```javascript
146
-
// In your gatsby-config.js
147
-
plugins: [
148
-
{
149
-
resolve:`gatsby-plugin-manifest`,
150
-
options: {
151
-
name:`GatsbyJS`,
152
-
short_name:`GatsbyJS`,
153
-
start_url:`/`,
154
-
background_color:`#f7f0eb`,
155
-
theme_color:`#a2466c`,
156
-
display:`minimal-ui`,
157
-
icons: [
158
-
{
159
-
// Everything in /static will be copied to an equivalent
160
-
// directory in /public during development and build, so
161
-
// assuming your favicons are in /favicons,
162
-
// you can reference them here
163
-
src:`/favicons/android-chrome-192x192.png`,
164
-
sizes:`192x192`,
165
-
type:`image/png`,
166
-
},
167
-
{
168
-
src:`/favicons/android-chrome-512x512.png`,
169
-
sizes:`512x512`,
170
-
type:`image/png`,
171
-
},
172
-
],
181
+
## Legacy `apple-touch-icon` links
182
+
183
+
iOS 11.3 added support for webmanifest spec, so this plugin doesn't add `apple-touch-icon` links to `<head>` by default. If you need or want to support older version of iOS you can set `legacy` option to `true` in plugin configuration:
184
+
185
+
```javascript:title=gatsby-config.js
186
+
module.exports= {
187
+
plugins: [
188
+
{
189
+
resolve:`gatsby-plugin-manifest`,
190
+
options: {
191
+
name:`GatsbyJS`,
192
+
short_name:`GatsbyJS`,
193
+
start_url:`/`,
194
+
background_color:`#f7f0eb`,
195
+
theme_color:`#a2466c`,
196
+
display:`minimal-ui`,
197
+
icon:`src/images/icon.png`, // This path is relative to the root of the site.
198
+
legacy:true, // this will add apple-touch-icon links to <head>
0 commit comments