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

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:

• 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!
• 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'
          }
      }
    })
  ]
};

License

This project is licensed under MIT.