@connected-home/hivehome-webapp-favicons-webpack-plugin
v3.0.0
Published
Favicon Generator for Hivehome Webapp
Downloads
12
Readme
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.