From 7033b446162697f490e76f6b4e1b2aa5aa341d9a Mon Sep 17 00:00:00 2001 From: Kimmo Puputti Date: Mon, 27 Nov 2017 15:57:19 +0200 Subject: [PATCH] Use realfavicongenerator.net as an icon baseline --- docs/README.md | 1 + docs/colors-and-icons.md | 62 ++++++++++ public/index.html | 21 ++-- public/static/apple-touch-icon-ipad-76x76.png | Bin 3234 -> 0 bytes .../static/apple-touch-icon-ipad-76x76@2x.png | Bin 11689 -> 0 bytes .../static/apple-touch-icon-iphone-60x60.png | Bin 2585 -> 0 bytes .../apple-touch-icon-iphone-60x60@2x.png | Bin 3326 -> 0 bytes .../apple-touch-icon-iphone-60x60@3x.png | Bin 8128 -> 0 bytes public/static/apple-touch-icon.png | Bin 2469 -> 0 bytes public/static/apple-touch-icon@2x.png | Bin 7402 -> 0 bytes public/static/favicon.ico | Bin 5430 -> 0 bytes .../static/icons/android-chrome-192x192.png | Bin 0 -> 7108 bytes .../static/icons/android-chrome-512x512.png | Bin 0 -> 22339 bytes public/static/icons/apple-touch-icon.png | Bin 0 -> 3621 bytes public/static/icons/browserconfig.xml | 9 ++ public/static/icons/favicon-16x16.png | Bin 0 -> 918 bytes public/static/icons/favicon-32x32.png | Bin 0 -> 1484 bytes public/static/icons/favicon.ico | Bin 0 -> 15086 bytes public/static/icons/mstile-150x150.png | Bin 0 -> 3520 bytes public/static/icons/safari-pinned-tab.svg | 116 ++++++++++++++++++ public/static/manifest.json | 22 ++-- public/static/webapp-icon-192x192.png | Bin 11405 -> 0 bytes 22 files changed, 213 insertions(+), 18 deletions(-) create mode 100644 docs/colors-and-icons.md delete mode 100755 public/static/apple-touch-icon-ipad-76x76.png delete mode 100644 public/static/apple-touch-icon-ipad-76x76@2x.png delete mode 100755 public/static/apple-touch-icon-iphone-60x60.png delete mode 100644 public/static/apple-touch-icon-iphone-60x60@2x.png delete mode 100644 public/static/apple-touch-icon-iphone-60x60@3x.png delete mode 100644 public/static/apple-touch-icon.png delete mode 100644 public/static/apple-touch-icon@2x.png delete mode 100644 public/static/favicon.ico create mode 100644 public/static/icons/android-chrome-192x192.png create mode 100644 public/static/icons/android-chrome-512x512.png create mode 100644 public/static/icons/apple-touch-icon.png create mode 100644 public/static/icons/browserconfig.xml create mode 100644 public/static/icons/favicon-16x16.png create mode 100644 public/static/icons/favicon-32x32.png create mode 100644 public/static/icons/favicon.ico create mode 100644 public/static/icons/mstile-150x150.png create mode 100644 public/static/icons/safari-pinned-tab.svg delete mode 100644 public/static/webapp-icon-192x192.png diff --git a/docs/README.md b/docs/README.md index 1e3b2f61..e782a256 100644 --- a/docs/README.md +++ b/docs/README.md @@ -17,3 +17,4 @@ Documentation for specific topics can be found in the following files: - [Analytics](analytics.md) - [Terms of Service and Privacy Policy](terms-of-service-and-privacy-policy.md) - [i18n](i18n.md) + - [Colors and icons](colors-and-icons.md) diff --git a/docs/colors-and-icons.md b/docs/colors-and-icons.md new file mode 100644 index 00000000..4dc9f9e6 --- /dev/null +++ b/docs/colors-and-icons.md @@ -0,0 +1,62 @@ +# Colors and icons + +One of the first customisations is to change the marketplace colors +and icons. + +# Colors + +To change the marketplace colors, open the +[src/marketplace.css](../src/marketplace.css) file and change the +color variables: + +```css +--marketplaceColor: #c0392b; +--marketplaceColorLight: #ff4c38; +--marketplaceColorDark: #8c291e; +``` + +# Icons + +The default icons are generated with +[RealFaviconGenerator](https://realfavicongenerator.net/). You can +upload your original icon to the tool, customise the colors and +themes, and download a generated set if icons and an HTML snippet to +point to those images. + +1. Open https://realfavicongenerator.net/ + +1. Upload your original icon image + +1. Configure platform specific icons + + **Note:** Remember to set the "Theme color" in the Android Chrome section + +1. Configure the paths to use `/static/icons/` as the root path of the icons + +1. Generate the icons + +1. Unzip the favicons.zip archive and replace the default icons and + files in [public/static/icons/](../public/static/icons/) with the + new icons + +1. Replace the default HTML snippet in + [public/index.html](../public/index.html) with the snippet from the + generator. + + **Note:** Remove the manifest link from the snippet as we have a + default manifest with extra data compared to the generated one. You + can edit the default file as you wish. + + **Example HTML snippet:** + + ```html + + + + + + + + + + ``` diff --git a/public/index.html b/public/index.html index a3bcc5f5..8dba04aa 100644 --- a/public/index.html +++ b/public/index.html @@ -9,16 +9,17 @@ - - - - - - - - - - + + + + + + + + + + +