diff --git a/docs/content/80.pwa.md b/docs/content/80.pwa.md index 6d3338ef..d4bc04a3 100644 --- a/docs/content/80.pwa.md +++ b/docs/content/80.pwa.md @@ -109,7 +109,7 @@ You can check web manifest generation on [modules/pwa/i18n.ts](https://github.co **WIP:** We are working to generate PWA icons using a Node script. :: -Elk icons have been generated using [PWA Builder Image Generator](https://www.pwabuilder.com/imageGenerator), we generate the icons twice per environment: transparent and maskable icons. +Elk icons have been generated using [PWA Builder Image Generator](https://www.pwabuilder.com/imageGenerator), we generate the icons 3 times per environment: transparent, apple touch and maskable icons. To generate transparent icons: - upload `logo.svg` from `public` folders: `public`, ` public-dev` and `public-staging` @@ -123,6 +123,16 @@ Once generated, we use the following icons: - `android/android-launchericon-192x192.png` for `pwa-192x192.png` - `android/android-launchericon-512x512.png` for `pwa-512x512.png` +To generate apple touch icons: +- upload `logo.svg` from `public` folders: `public`, ` public-dev` and `public-staging` +- configure `0,45` as padding +- check `Custom` in background color and set `#ffffff` as color +- check only `iOS` in platforms +- click on `Generate` button + +Once generated, we use the following icons: +- `ios/180.png` for `apple-touch-icon.png` + To generate maskable icons: - upload `logo.svg` from `public` folders: `public`, ` public-dev` and `public-staging` - configure `0,6` as padding @@ -134,11 +144,7 @@ Once generated, we use the following icons: - `android/android-launchericon-512x512.png` for `maskable-icon.png` ::alert{type="info"} -**Note 1:** `apple-touch-icon` icons have been generated with external tools. -:: - -::alert{type="info"} -**Note 2:** to generate `favicon.ico` icons, we use [RealFaviconGenerator](https://realfavicongenerator.net/) providing `logo.svg` from `public` folders: `public`, ` public-dev` and `public-staging`. +**Note:** to generate `favicon.ico` icons, we use [RealFaviconGenerator](https://realfavicongenerator.net/) providing `logo.svg` from `public` folders: `public`, ` public-dev` and `public-staging` (transparent 64x64 32 bit). :: ### PWA UI Components diff --git a/public-dev/apple-touch-icon.png b/public-dev/apple-touch-icon.png index b50a23a8..a2c79f2c 100644 Binary files a/public-dev/apple-touch-icon.png and b/public-dev/apple-touch-icon.png differ diff --git a/public-staging/apple-touch-icon.png b/public-staging/apple-touch-icon.png index a601873f..770d7560 100644 Binary files a/public-staging/apple-touch-icon.png and b/public-staging/apple-touch-icon.png differ