Nuxt.js module for creating favicons with RealFaviconGenerator api
npm install nuxt-rfg-icon> Automatically generates favicons and app icons with different sizes using rfg-api.
- This module adds link and meta tags for the appropiate favicon's to head
- The generated manifest.json is added to @nuxtjs/manifest, so should not overwrite existing properties
- Install from npm npm install --save nuxt-rfg-icon or use yarn
- Add nuxt-rfg-icon to modules section of nuxt.config.js before the line @nuxtjs/manifest
``js
modules: [
// Simple usage
'nuxt-rfg-icon',
'@nuxtjs/manifest',
// With options
['nuxt-rfg-icon', { masterPicture: '' }],
// or use global options
'rfg-icon': {
static: true,
staticPath: '/_favicons/',
masterPicture: 'static/icon.png',
rfg:
}
]
``static/icon.png
- Create . Recommended to be square png and >= 512x512px
$3
- Default: trueIf false, icon files will be added as webpack assets during each build. There is no intermediate saving. If true, the headers to be added are saved as
headers.json. If headers.json and manifest.json exists while building, the existing files are used and not retrieved from the RealFaviconGenerator api unless force is ticked$3
- Default: iconsThe static path where the favicons will be saved if
static is enabledfalseIf true and static files is enabled, force to retrieve new favicons from the RealFaviconGenerator api even when headers.json and manifest.json exist
Generate favicons, click on the tab Node CLI and copy the contents of the faviconDescription.json file to your nuxt.config.js- Default
``js``
rfg: {
design: {
ios: {
pictureAspect: 'backgroundAndMargin',
backgroundColor: '#ffffff',
margin: '14%',
assets: {
ios6AndPriorIcons: false,
ios7AndLaterIcons: false,
precomposedIcons: false,
declareOnlyDefaultIcon: true
}
},
desktopBrowser: {},
windows: {
pictureAspect: 'whiteSilhouette',
backgroundColor: '#ffffff',
onConflict: 'override',
assets: {
windows80Ie10Tile: false,
windows10Ie11EdgeTiles: {
small: false,
medium: true,
big: false,
rectangle: false
}
}
},
androidChrome: {
pictureAspect: 'noChange',
themeColor: '#ffffff',
manifest: {
display: 'standalone',
orientation: 'notSet',
onConflict: 'override',
declared: true
},
assets: {
legacyIcon: false,
lowResolutionIcons: false
}
},
safariPinnedTab: {
pictureAspect: 'silhouette',
themeColor: '#5bbad5'
}
},
settings: {
scalingAlgorithm: 'Mitchell',
errorOnImageTooSmall: false
}
}