Favicons can be difficult. They come in several different formats, no page seems to have them all, and it is hard to know which one to use when you want the best. fetch-favicon takes the complexity out by finding them all and choosing the best for you.

Installation

npm install @meltwater/fetch-favicon --save

Using fetch-favicon

getFavicon(url, [size])

// using an ES6 transpiler, like babel
import fetchFavicon from '@meltwater/fetch-favicon'

// not using an ES6 transpiler
var fetchFavicon = require('@meltwater/fetch-favicon').fetchFavicon

fetchFavicon('https://www.github.com')

/*
'https://github.com/apple-touch-icon.png'
*/

Arguments

• url: the address of the web page to be searched for favicons

• size: (optional) an integer that represents a prefered minimum width/height of the favicon. If none of the retrieved favicons meet this constraint or the size information is not available, fetch-favicon will still return a favicon.

• returns: the address of a favicons. If no favicons are found it will return the address of the favicon.ico off of the root (i.e. https://www.github.com/favicon.ico)

getFavicons(url, [size])

// using an ES6 transpiler, like babel
import { fetchFavicons } from '@meltwater/fetch-favicon'

// not using an ES6 transpiler
var fetchFavicons = require('@meltwater/fetch-favicon').fetchFavicons

fetchFavicons('https://www.github.com')

/*
[
  {"href":"http://github.com/apple-touch-icon.png","name":"apple-touch-icon"},
  {"href":"http://github.com/apple-touch-icon-57x57.png","name":"apple-touch-icon","size":57,"active":true},
  {"href":"http://github.com/apple-touch-icon-60x60.png","name":"apple-touch-icon","size":60},
  {"href":"http://github.com/apple-touch-icon-72x72.png","name":"apple-touch-icon","size":72},
  {"href":"http://github.com/apple-touch-icon-76x76.png","name":"apple-touch-icon","size":76},
  {"href":"http://github.com/apple-touch-icon-114x114.png","name":"apple-touch-icon","size":114},
  {"href":"http://github.com/apple-touch-icon-120x120.png","name":"apple-touch-icon","size":120},
  {"href":"http://github.com/apple-touch-icon-144x144.png","name":"apple-touch-icon","size":144},
  {"href":"http://github.com/apple-touch-icon-152x152.png","name":"apple-touch-icon","size":152},
  {"href":"http://github.com/apple-touch-icon-180x180.png","name":"apple-touch-icon","size":180},
  {"href":"https://assets-cdn.github.com/images/modules/open_graph/github-logo.png","name":"og:image"},
  {"href":"https://assets-cdn.github.com/images/modules/open_graph/github-mark.png","name":"og:image"},
  {"href":"https://assets-cdn.github.com/images/modules/open_graph/github-octocat.png","name":"og:image"},
  {"href":"/windows-tile.png","name":"msapplication-TileImage"},
  {"href":"https://assets-cdn.github.com/favicon.ico","name":"icon"},
  {"href":"http://github.com/favicon.ico","name":"favicon.ico"}
]
*/

Arguments

• url: the address of the web page to be searched for favicons

• size: (optional) an integer that represents a prefered minimum width/height of the favicon.

• returns: an array of all the favicons found on the web page.

  • href: (string) location of the favicon image
  • name: (string) type of favicon
  • size: (int) size of favicon (if available)
  • active: (bool) true for the favicon returned by getFavicon. undefined for all others.

Contributing

Code Conventions

Use standard. CI won't pass without it.

Tests

Add tests where appropriate. See the test readme for some suggestions.

Semantic Versioning

Format commit messages to conform to conventional-changelog. This drives the semantic versioning of the module.

Additional Information

• favicon-cheat-sheet is a great resource for understanding all the idiosyncrasies of favicons.

License

MIT