@connected-home/hivehome-webapp-favicons-webpack-p

hivehome-webapp-favicons-webpack-plugin

Connect Home Favicon Generator Plugin for Webpack Generates favicons, app-touch icons and descriptor/manifest files for IOS, Android, Windows and Generic favicons.

Configuration options

title - The app name (will appear in browserconfig.xml and manifest.json files)

prefix - A filename prefix to append to all output filenames. Note the string [hash] in the prefix will be replaced by a sha256 hash of the source file.

platforms - A map of configurations, supports: generic, ios, android and windows. Each must contain at least a reference to a source file, but there are other platform-specific options too. See the example below.

Supported Platforms:

Generic

Standard format favicons

favicon.ico (16x16, 24x24, 32x32, 48x48& 64x64)
favicon-16x16.png
favicon-24x24.png
favicon-32x32.png
favicon-48x48.png
favicon-64x64.png

iOS

IOS Format app-touch-icons

apple-touch-icon-57x57.png
apple-touch-icon-60x60.png
apple-touch-icon-72x72.png
apple-touch-icon-76x76.png
apple-touch-icon-114x114.png
apple-touch-icon-120x120.png
apple-touch-icon-144x144.png
apple-touch-icon-152x152.png
apple-touch-icon-180x180.png

Android

Android format manifest.json and icons

manifest.json
android-chrome-36x36.png
android-chrome-46x46.png
android-chrome-72x72.png
android-chrome-96x96.png
android-chrome-144x144.png
android-chrome-192x192.png
android-chrome-256x256.png
android-chrome-384x384.png
android-chrome-512x512.png

Windows

Windows format browserconfig.xml and icons

mstile-128x128.png (70x70)
mstile-144x144.png
mstile-270x270.png (150x150)
mstile-558x270.png (310x150)
mstile-558x558.png (310x310)

Notes: 1. For each ms-tile-... file - the actual file size does not reflect the 'size' it is supposed to represent (except for the 144x144 which just is what it is)... cause... Microsoft! 2. Because the widescreen format tile (mstile-558x270.png) it is at odds with the proportions of a square source image. In this case the conversion will 'letterbox' the image using either a transparent background or if supplied using the tileColor config option as the background color.

Prefix

If you specify a filename prefix in the

Usage

const HivehomeWebappFaviconsWebpackPlugin = require('@connected-home/hivehome-webapp-favicons-webpack-plugin');

const config = {
  /* ...webpack config here... */
  plugins: [
    new HivehomeWebappFaviconsWebpackPlugin({
      title: 'Hive Home',
      prefix: 'assets/[hash]-',
      platforms: {
          generic: {
              source: path.join(__dirname, '../lib/assets/icons', 'favicon.png')
          },
          ios: {
              source: path.join(__dirname, '../lib/assets/icons', 'app-icon.png'),
              statusBar: 'black-translucent'
          },
          android: {
              source: path.join(__dirname, '../lib/assets/icons', 'app-icon.png'),
              themeColor: '#ec6e05',
              backgroundColor: '#ffffff'
          },
          windows: {
              source: path.join(__dirname, '../lib/assets/icons', 'app-icon.png'),
              tileColor: '#ec6e05'
          }
      }
    })
  ]
};