docs(faq): added guidelines for generating a transparent favicon

Added guidelines for generating a transparent favicon

fix #70

README.md

@@ -1,11 +1,11 @@
-# pwa-asset-generator 
+# pwa-asset-generator
 [![npm](https://img.shields.io/npm/v/pwa-asset-generator?color=brightgreen)](https://www.npmjs.com/package/pwa-asset-generator) [![node](https://img.shields.io/node/v/pwa-asset-generator)](https://www.npmjs.com/package/pwa-asset-generator) [![Build Status](https://github.com/onderceylan/pwa-asset-generator/workflows/CI/badge.svg)](https://github.com/onderceylan/pwa-asset-generator/actions?workflow=CI) [![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/) [![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-brightgreen.svg)](https://github.com/semantic-release/semantic-release)
 
 > PWA asset generator based on Puppeteer. Automatically generates icons and splash screens guided by Web App Manifest specs and Apple Human Interface guidelines. Updates manifest.json and index.html files with the generated images.
 
 ![Usage demonstration](https://raw.githubusercontent.com/onderceylan/pwa-asset-generator/HEAD/static/demo.gif)
 
-## Motivation — [read full blog post here](https://itnext.io/pwa-splash-screen-and-icon-generator-a74ebb8a130)
+## Motivation — [read the full blog post here](https://itnext.io/pwa-splash-screen-and-icon-generator-a74ebb8a130)
 
 When you build a PWA with a goal of providing native-like experiences on multiple platforms and stores, you need to meet with the criteria of those platforms and stores with your PWA assets; icon sizes and splash screens. Such criteria are;
 
@@ -14,14 +14,14 @@ When you build a PWA with a goal of providing native-like experiences on multipl
 * As it's noted on Microsoft docs, your PWA has to meet specific image criteria declared on Web App Manifest in order to be automatically packaged for Microsoft Store - https://docs.microsoft.com/en-us/microsoft-edge/progressive-web-apps/get-started#web-app-manifest 🤔
 
 * Apple's iOS currently doesn't support Web App Manifest API specs. You need to introduce custom html tags to set icons and splash screens to your PWA 🤔
-    * You need to introduce a special html link tag with rel `apple-touch-icon` to provide icons for your PWA when it's added to home screen. Read more about it on [Apple's Icon Guidelines](https://developer.apple.com/design/human-interface-guidelines/ios/icons-and-images/app-icon/) and [Safari Web Content Guide](https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html). 
-    * You need to introduce a special html link tag with rel `apple-touch-startup-image` to provide splash screen for your PWA to display when it's opened and in the background. You need to create a splash screen image for every resolution on [Apple's Launch Screen Guidelines](https://developer.apple.com/design/human-interface-guidelines/ios/icons-and-images/launch-screen/#static-launch-screen-images-not-recommended) and html tag with media attr for each image like `<link rel="apple-touch-startup-image" href="temp/apple-splash-2048-2732.png" media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">`. Unfortunately, this requirement is not documented on [Safari Web Content Guide](https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html) sufficiently.
-    
+    * You need to introduce a special html link tag with rel `apple-touch-icon` to provide icons for your PWA when it's added to home screen. Read more about it on [Apple's Icon Guidelines](https://developer.apple.com/design/human-interface-guidelines/ios/icons-and-images/app-icon/) and [Safari Web Content Guide](https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html).
+    * You need to introduce a special html link tag with rel `apple-touch-startup-image` to provide a splash screen for your PWA to display when it's opened and in the background. You need to create a splash screen image for every resolution on [Apple's Launch Screen Guidelines](https://developer.apple.com/design/human-interface-guidelines/ios/icons-and-images/launch-screen/#static-launch-screen-images-not-recommended) and html tag with media attr for each image like `<link rel="apple-touch-startup-image" href="temp/apple-splash-2048-2732.png" media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">`. Unfortunately, this requirement is not documented on the [Safari Web Content Guide](https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html) sufficiently.
+
 Creating icon and splash screen images for all the platforms, maintaining sizes and quality for all and adding html tags for each image can be overwhelming. So, why not automate it? 💡
 
 ## Features
 
-PWA Asset Generator automates the image generation in a creative way. Having [Puppeteer](https://pptr.dev) in its core enables lots of possibilities. 
+PWA Asset Generator automates the image generation in a creative way. Having [Puppeteer](https://pptr.dev) at its core enables lots of possibilities.
 
 * Generates both icons and splash screens with optional `--icon-only` `--splash-only` `--landscape-only` and `--portrait-only` flags ✨
 
@@ -31,13 +31,13 @@ PWA Asset Generator automates the image generation in a creative way. Having [Pu
 
     * Supports offline mode and uses static spec data when things go wrong with scraping 📴
 
-* Uses Chrome browser as it’s a canvas of your fav image editor. It uses a shell HTML on the fly as an artboard and centers your logo before taking screenshots for each resolution via Puppeteer 🤖
+* Uses the Chrome browser as it’s a canvas of your fav image editor. It uses a shell HTML on the fly as an artboard and centers your logo before taking screenshots for each resolution via Puppeteer 🤖
 
 * You can provide your source in multiple formats; a local image file, a local HTML file, a remote image or HTML file 🙌
 
     * When it’s an image source, it is centered over the background option you provide 🌅
     * When it’s an HTML source, you can go as creative as you like; position your logo, use SVG filters, use variable fonts, use gradient backgrounds, use typography and etc. Your html file is rendered on Chrome before taking screenshots for each resolution 🎨
-    
+
 * It uses [puppeteer-core](https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#puppeteer-vs-puppeteer-core) instead of puppeteer and only installs Chromium if it doesn't exist on the system. Saves waste of ~110-150mb of disk space and many seconds from the world per each user 🌎⚡️
 
 * Supports dark mode splash screens on iOS! So, you can provide both light 🌕 and dark 🌚 splash screen images to differentiate your apps look & feel based on user preference 🌙
@@ -63,9 +63,9 @@ $ pwa-asset-generator --help
 
   Usage
     $ pwa-asset-generator [source] [output-folder]
-    
+
     The assets will be saved to the folder where the command is executed if no output-folder provided.
-    
+
   Options
     -b --background             Page background to use when image source is provided: css value  [default: transparent]
     -o --opaque                 Shows white as canvas background and generates images without transparency  [default: true]
@@ -84,7 +84,7 @@ $ pwa-asset-generator --help
     -d --dark-mode              Generate iOS splash screen meta with (prefers-color-scheme: dark) media attr  [default: false]
     -u --single-quotes          Generate HTML meta tags with single quotes  [default: false]
     -g --log                    Logs the steps of the library process  [default: true]
-    
+
   Examples
     $ pwa-asset-generator logo.html
     $ pwa-asset-generator logo.svg -i ./index.html -m ./manifest.json
@@ -148,12 +148,20 @@ The default value for the padding surrounding the image is 10%. But it's just a
 2. You can create your own html input file which uses css media queries and provides different padding options based on breakpoints: https://material.io/design/layout/responsive-layout-grid.html#breakpoints
 
 ### How can I generate a PNG image with transparency?
-Although default background color is **transparent**, there's another option that you need to use to generate transparent images: **opaque**.
+Although the default background color is **transparent**, there's another option that you need to use to generate transparent images: **opaque**.
 
 You need to run your CLI command with `--opaque false` option in order to get the transparency; `pwa-asset-generator logo.svg --opaque false`.
 
 This might be confusing for some but it's necessary to support the use of background values with alpha channels.
 
+### How can I generate a transparent favicon, and app icons with opaque background?
+Default behaviour of the library is to generate a favicon along with app icons. So, it's not possible to generate one without other.
+
+However, you can use this workaround to work with this edge case:
+
+* First, generate a favicon with `--opaque false --iconOnly --favicon` options.
+* Then, overwrite app icons with `--background "#FFF" --iconOnly` options.
+
 ## Troubleshooting
 
 ### "No usable sandbox!" error on Linux
@@ -164,5 +172,5 @@ When Chrome launcher is used with puppeteer-core, chrome-launcher sometime throw
 ```
 ERROR: The process with PID 12345 (child process of PID 1234) could not be terminated.
 Reason: There is no running instance of the task.
-``` 
+```
 This is a [known bug](https://github.com/GoogleChrome/chrome-launcher/issues/178) on chrome-launcher and for now you can just ignore it.