Skip to content

feat: add apple platform for single apple-touch-icon #309

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
dmnsgn wants to merge 1 commit into
base: master
Choose a base branch
from
Open

feat: add apple platform for single apple-touch-icon #309

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
25 changes: 23 additions & 2 deletions readme.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ Please note: Favicons is tested on Node 10.13 and above.
```js
var favicons = require('favicons'),
source = 'test/logo.png', // Source image(s). `string`, `buffer` or array of `string`
configuration = {
configuration = {
path: "/", // Path for overriding default icons path. `string`
appName: null, // Your application's name. `string`
appShortName: null, // Your application's short_name. `string`. Optional. If not set, appName will be used
Expand Down Expand Up @@ -60,7 +60,8 @@ var favicons = require('favicons'),
// * overlayShadow - apply drop shadow after mask has been applied .`boolean`
//
android: true, // Create Android homescreen icon. `boolean` or `{ offset, background, mask, overlayGlow, overlayShadow }`
appleIcon: true, // Create Apple touch icons. `boolean` or `{ offset, background, mask, overlayGlow, overlayShadow }`
apple: false, // Create a single Apple touch icon (180x180). `boolean` or `{ offset, background, mask, overlayGlow, overlayShadow }`
appleIcon: true, // Create all Apple touch icons. `boolean` or `{ offset, background, mask, overlayGlow, overlayShadow }`
appleStartup: true, // Create Apple startup images. `boolean` or `{ offset, background, mask, overlayGlow, overlayShadow }`
coast: true, // Create Opera Coast icon. `boolean` or `{ offset, background, mask, overlayGlow, overlayShadow }`
favicons: true, // Create regular favicons. `boolean` or `{ offset, background, mask, overlayGlow, overlayShadow }`
Expand Down Expand Up @@ -131,6 +132,26 @@ For the full list of files, check `config/files.json`. For the full HTML code, c

Because pure Javascript modules aren't available at the moment. For example, the [El Capitan SVG favicon](https://github.com/haydenbleasel/favicons/issues/61) and the [Windows tile silhouette ability](https://github.com/haydenbleasel/favicons/issues/58) both require [SVG support](https://github.com/haydenbleasel/favicons/issues/53). If modules for these task begin to appear, please jump on the appropriate issue and we'll get on it ASAP.

> What is the difference between apple and appleIcon?

See webhint explanation on why a single 180x180 touch icon might be the best solution: [https://webhint.io/docs/user-guide/hints/hint-apple-touch-icons/](https://webhint.io/docs/user-guide/hints/hint-apple-touch-icons/):

Over time as Apple released different size displays for their devices, the requirements for the size of the touch icon have changed quite a bit \[...\]. Declaring one 180×180px PNG image, e.g.:

```html
<link rel="apple-touch-icon" href="apple-touch-icon.png">
```

in the <head> of the page is enough, and including all the different sizes is not recommended as:

- It will increase the size of the pages with very little to no real benefit (most users will probably not add the site to their home screens).

- Most sizes will probably never be used as iOS devices get upgraded quickly, so [most iOS users will be on the latest 2 versions of iOS]app store stats and using newer devices.

- The 180×180px image, if needed, [will be automatically downscaled by Safari, and the result of the scaling is generally ok][icon scaling].

The only downside to using one icon is that some users will load a larger image, while a much smaller file would have worked just as well. But the chance of that happening decreases with every day as users upgrade their devices and their iOS version.

## Thank you

- [@haydenbleasel](https://github.com/haydenbleasel) for this great project.
Expand Down
1 change: 1 addition & 0 deletions src/config/defaults.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@
"manifestRelativePaths": false,
"icons": {
"android": true,
"apple": false,
"appleIcon": true,
"appleStartup": true,
"coast": true,
Expand Down
6 changes: 6 additions & 0 deletions src/config/html.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,12 @@ module.exports = {
({ theme_color, background }) => `<meta name="theme-color" content="${theme_color || background}">`,
({ appName }) => appName ? `<meta name="application-name" content="${appName}">` : `<meta name="application-name">`
],
apple: [
Copy link
Member

@alexander-akait alexander-akait Jul 21, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What about do not add new options, and use existing appleIcon? For example:

  • appleIcon: true- generate all icons
  • appleIcon: [] - allow to specify sizes
  • appleIcon: 'minimum' generate only minimum required icons and tags

Copy link
Contributor Author

@dmnsgn dmnsgn Jul 22, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It looks like moving forward, what you have named minimum is actually be the norm and recommended on Apple platforms. So I'd actually go the other way around:

  • appleIcon: 'all' - generate all icons
  • appleIcon: [] - allow to specify sizes
  • appleIcon: true - generate only minimum required icons and tags

Copy link
Member

@alexander-akait alexander-akait Jul 22, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I am afraid changing logic for appleIcon: true is will be breaking change, we can do it in the next major release, not right now

Copy link
Contributor Author

@dmnsgn dmnsgn Jul 22, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actually, isn't this PR #312 solving the problem by allowing to pass appleIcon: ["apple-touch-icon.png"]? I don't think the generated html is updated though (eg. all sizes are still in html, just images are generated) as I don't see any filter here: https://github.com/itgalaxy/favicons/blob/master/src/config/html.js#L12

Copy link
Member

@alexander-akait alexander-akait Jul 22, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Feel free to send a fix for #312, appleIcon: true- generate all icons is not generate all icons, we can't change it by default

({ relative }) => `<link rel="apple-touch-icon" sizes="180x180" href="${relative("apple-touch-icon.png")}">`,
() => `<meta name="apple-mobile-web-app-capable" content="yes">`,
({ appleStatusBarStyle }) => `<meta name="apple-mobile-web-app-status-bar-style" content="${appleStatusBarStyle}">`,
({ appShortName, appName }) => (appShortName || appName) ? `<meta name="apple-mobile-web-app-title" content="${appShortName || appName}">` : `<meta name="apple-mobile-web-app-title">`
],
appleIcon: [
({ relative }) => `<link rel="apple-touch-icon" sizes="57x57" href="${relative("apple-touch-icon-57x57.png")}">`,
({ relative }) => `<link rel="apple-touch-icon" sizes="60x60" href="${relative("apple-touch-icon-60x60.png")}">`,
Expand Down
9 changes: 9 additions & 0 deletions src/config/icons.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,6 +64,15 @@
"mask": false
}
},
"apple": {
"apple-touch-icon.png": {
"width": 180,
"height": 180,
"transparent": false,
"rotate": false,
"mask": false
}
},
"appleIcon": {
"apple-touch-icon-57x57.png": {
"width": 57,
Expand Down
13 changes: 7 additions & 6 deletions src/config/platform-options.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,28 +1,29 @@
{
"offset": {
"platforms": ["android", "appleIcon", "appleStartup", "firefox", "coast", "windows", "yandex", "favicons"],
"platforms": ["android", "apple", "appleIcon", "appleStartup", "firefox", "coast", "windows", "yandex", "favicons"],
"defaultTo": 0
},
"background": {
"platforms": ["android", "appleIcon", "appleStartup", "firefox", "coast", "windows", "yandex", "favicons"],
"platforms": ["android", "apple", "appleIcon", "appleStartup", "firefox", "coast", "windows", "yandex", "favicons"],
"apple": true,
"appleIcon": true,
"appleStartup": true,
"firefox": true,
"coast": true,
"defaultTo": false
},
"mask": {
"platforms": ["android", "appleIcon", "appleStartup", "firefox", "coast", "windows", "yandex", "favicons"],
"platforms": ["android", "apple", "appleIcon", "appleStartup", "firefox", "coast", "windows", "yandex", "favicons"],
"firefox": true,
"defaultTo": false
},
"overlayGlow": {
"platforms": ["android", "appleIcon", "appleStartup", "firefox", "coast", "windows", "yandex", "favicons"],
"platforms": ["android", "apple", "appleIcon", "appleStartup", "firefox", "coast", "windows", "yandex", "favicons"],
"firefox": true,
"defaultTo": false
},
"overlayShadow": {
"platforms": ["android", "appleIcon", "appleStartup", "firefox", "coast", "windows", "yandex", "favicons"],
"platforms": ["android", "apple", "appleIcon", "appleStartup", "firefox", "coast", "windows", "yandex", "favicons"],
"defaultTo": false
}
}
}
3 changes: 2 additions & 1 deletion test/createExamples.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,8 @@ const favicons = require('../dist/index.js'),
loadManifestWithCredentials: false, // Browsers don't send cookies when fetching a manifest, enable this to fix that. `boolean`
icons: {
android: true, // Create Android homescreen icon. `boolean` or `{ offset, background, mask, overlayGlow, overlayShadow }`
appleIcon: true, // Create Apple touch icons. `boolean` or `{ offset, background, mask, overlayGlow, overlayShadow }`
apple: true, // Create a single Apple touch icon (180x180). `boolean` or `{ offset, background, mask, overlayGlow, overlayShadow }`
appleIcon: true, // Create all Apple touch icons. `boolean` or `{ offset, background, mask, overlayGlow, overlayShadow }`
appleStartup: true, // Create Apple startup images. `boolean` or `{ offset, background, mask, overlayGlow, overlayShadow }`
coast: true, // Create Opera Coast icon. `boolean` or `{ offset, background, mask, overlayGlow, overlayShadow }`
favicons: true, // Create regular favicons. `boolean` or `{ offset, background, mask, overlayGlow, overlayShadow }`
Expand Down
1 change: 1 addition & 0 deletions test/loadManifestWithCredentials.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ test("should add crossOrigin to manifest tag when loadManifestWithCredentials is
loadManifestWithCredentials: true,
icons: {
android: true,
apple: false,
appleIcon: false,
appleStartup: false,
coast: false,
Expand Down
1 change: 1 addition & 0 deletions test/manifestRelativePaths.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ test("should images without options.path to manifests when manifestRelativePaths
firefox: true,
windows: true,
yandex: true,
apple: false,
appleIcon: false,
appleStartup: false,
coast: false,
Expand Down
1 change: 1 addition & 0 deletions test/noassets.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ test("should allow disabling asset generation", async t => {
const { files, images, html } = await favicons(logo_png, {
icons: {
android: false,
apple: false,
appleIcon: false,
appleStartup: false,
coast: false,
Expand Down
1 change: 1 addition & 0 deletions test/overlayshadow.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ test("should allow configuring 'overlayShadow'", async t => {
mask: true,
overlayShadow: true
},
apple: false,
appleIcon: false,
appleStartup: false,
coast: false,
Expand Down
1 change: 1 addition & 0 deletions test/svgScaling.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ const { logo_small_svg } = require("./util");
// difference between the generated files.
const icons = {
android: false,
apple: false,
appleIcon: true,
appleStartup: false,
coast: false,
Expand Down