Skip to content
Automatically generate favicon's and app icon's using RealFaviconGenerator
Branch: master
Clone or download
Latest commit 8ef44e1 Mar 21, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
lib fix(tests): use Function instead of eval so jest is happy Jan 17, 2019
test
.babelrc chore: update deps Mar 21, 2019
.editorconfig feat: add tests Sep 28, 2018
.eslintrc
.gitignore chore: fix tests Jan 8, 2019
.nycrc chore: fix tests Jan 8, 2019
.travis.yml chore: add travis ci Jan 8, 2019
CHANGELOG.md chore(release): 0.6.3 Mar 21, 2019
LICENSE
README.md chore: add travis ci Jan 8, 2019
jest.config.js chore: update deps Mar 21, 2019
package.json chore(release): 0.6.3 Mar 21, 2019
yarn.lock chore: update deps Mar 21, 2019

README.md

RealFaviconGenerator Favicon's for NUXT

Build Status npm npm (scoped with tag)

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

Setup

nuxt-rfg-icon will by default not run in dev mode, set NODE_ENV=production to override

  • 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
  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: <faviconDescription.json from realfavicongenerator.net>
   }
  ]
  • Create static/icon.png. Recommended to be square png and >= 512x512px

Options

masterPicture

  • Default: [srcDir]/static/icon.png

static

  • Default: true

If 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

staticPath

  • Default: icons

The static path where the favicons will be saved if static is enabled`

force

  • Default: false

If true and static files is enabled, force to retrieve new favicons from the RealFaviconGenerator api even when headers.json and manifest.json exist

rfg

The faviconDescription configuration from realfavicongenerator.net. Upload your image on the website and choose your settings. Next click on Generate favicons, click on the tab Node CLI and copy the contents of the faviconDescription.json file to your nuxt.config.js

  • Default
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
  }
}
You can’t perform that action at this time.