chore: dev and staging apple touch icons 0.45 padding

This commit is contained in:
userquin 2023-05-27 19:13:39 +02:00
parent c411850750
commit 47a14fa0bb
3 changed files with 12 additions and 6 deletions

View file

@ -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. **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: To generate transparent icons:
- upload `logo.svg` from `public` folders: `public`, ` public-dev` and `public-staging` - 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-192x192.png` for `pwa-192x192.png`
- `android/android-launchericon-512x512.png` for `pwa-512x512.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: To generate maskable icons:
- upload `logo.svg` from `public` folders: `public`, ` public-dev` and `public-staging` - upload `logo.svg` from `public` folders: `public`, ` public-dev` and `public-staging`
- configure `0,6` as padding - 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` - `android/android-launchericon-512x512.png` for `maskable-icon.png`
::alert{type="info"} ::alert{type="info"}
**Note 1:** `apple-touch-icon` icons have been generated with external tools. **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).
::
::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`.
:: ::
### PWA UI Components ### PWA UI Components

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2 KiB

After

Width:  |  Height:  |  Size: 2.3 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.3 KiB

After

Width:  |  Height:  |  Size: 2.2 KiB