@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:

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

License

This project is licensed under MIT.