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

    3.0.0 • Public • Published

    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.

    Open Source Love npm version Dependency Status devDependency Status

    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.

    Install

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

    DownloadsWeekly Downloads

    6

    Version

    3.0.0

    License

    none

    Last publish

    Collaborators

    • sandfox