jantimon / favicons-webpack-plugin Goto Github PK
View Code? Open in Web Editor NEWLet webpack generate all your favicons and icons for you
License: MIT License
Let webpack generate all your favicons and icons for you
License: MIT License
<link rel="manifest" href="/path/to/manifest.json">
in html output.<link rel="yandex-tableau-widget" href="/path/to/yandex-browser-manifest.json">
in html output.msapplication-TileImage
, msapplication-config
, twitter:image
, og:image
wrong path.My config:
new FaviconsWebpackPlugin({
logo: path.join(__dirname, 'app/assets/images/favicon.png'),
//prefix: 'favicons/',
persistentCache: true,
inject: true,
icons: {
android: true,
appleIcon: true,
appleStartup: true,
coast: true,
favicons: true,
firefox: true,
opengraph: true,
twitter: true,
yandex: true,
windows: true
}
})
``
A manifest.json file is created, but it doesn't seem to be injected into the html file. Is their an option Im currently missing?
In readme you did mention that this plugin can work with html-webpack-plugin to inject all generated icons, unfortunately I can't make it work and can't find any example of how html-webpack-plugin configuration should look to work together.
Can you provide an example of minimal webpack.config.js?
Hi all,
Does favicons-webpack-plugin work with webpack 2.0?
If not, can I know what's the plan for updating it? Currently it still goes with webpack 1.3.0.
Hi there,
I just saw some of my generated icons files are flipped but also has a line on the left side. My source file is a square image.
See example images :
Do you also encounter this bug ?
favicons 4.8.3
node v6.2.1
Thanks for helping
My config:
new FaviconsWebpackPlugin({
logo: './path/to/logo.png',
prefix: "path/to/output/dir/",
emitStats: true,
statsFilename: 'iconstats-[hash].json',
persistentCache: true,
background: '#fff',
title: 'My Title'
})
In path/to/output/dir
, I see a .cache
file, and it contains hash
and outputHash
, suggesting that persistentCache: true
is functioning correctly. However, the output files are always regenerated on every webpack build, even when my logo file doesn't change. The hash
and outputHash
values don't appear to change between builds.
Seems there is a unnecessary tag includet - there is no file behind, not created. All other favicons work well.
Configuration:
icons: {
android: false,
appleIcon: false,
appleStartup: false,
coast: false,
favicons: true,
firefox: false,
opengraph: false,
twitter: false,
yandex: false,
windows: false
},
Wrong output?
<link rel="icon" type="image/png" sizes="192x192" href="img/icons-7d5aff4/android-chrome-192x192.png">
We should also copy favicon.ico directly into the output directory, so browsers that auto-request favicon.ico (e.g. for images) will get a real favicon back!
When there is something wrong with config or icon build stops silently. Might need to show some error message for feedback
My config:
new FaviconsWebpackPlugin({
logo: './logo.png',
inject: true,
emitStats: false,
persistentCache: false,
prefix: '[sha512:hash:base64:7]/',
icons: {
favicons: true,
android: false,
appleIcon: false,
appleStartup: false,
coast: false,
firefox: false,
opengraph: false,
twitter: false,
yandex: false,
windows: false
}
})
Results:
Asset Size Chunks Chunk Names
22tAIdo/favicon-16x16.png 443 bytes [emitted]
22tAIdo/favicon-32x32.png 894 bytes [emitted]
22tAIdo/favicon-96x96.png 2.65 kB [emitted]
22tAIdo/favicon-230x230.png 7.24 kB [emitted]
22tAIdo/favicon.ico 33.3 kB [emitted]
Html produced:
<link href="/22tAIdo/favicon-32x32.png" rel="icon" sizes="32x32" type="image/png">
<link href="/22tAIdo/android-chrome-192x192.png" rel="icon" sizes="192x192" type="image/png">
<link href="/22tAIdo/favicon-16x16.png" rel="icon" sizes="16x16" type="image/png">
<link href="/22tAIdo/favicon.ico" rel="shortcut icon">
Bug:
android-chrome-192x192
should not be there
favicon-230x230
and favicon-96x96
are missing
Currently, it seems the links are prepended inside the tag. This is forcing my down, causing "the character encoding declaration of the HTML document was not found when prescanning the first 1024 bytes of the file" error in Firefox. Could the plugin please append after existing tags instead?
Sorry if I'm being dense, but I don't see how this is actually useful if you don't use the html-webpack-plugin?
Yes, it bounces 32 different icons to a directory called icons-[hash], but how do we then use these favicons? I'm rendering out my page via React server-side, and I can't really connect the dots. A full example would be helpful. Cheers.
If favicons supports it, why not support it here? ( It's handy to me since I'm converting my original svg source to png. )
When i access path http://localhost:3000/favicons/apple-touch-icon-57x57.png
it response Cannot GET /favicons/apple-touch-icon-57x57.png
.
manifest is generated (but the truth is - most of parameters are not applicable) but not included into header also browserconfig.xml is generated and included into html but has wrong path
(for cache bursting I generate icons into folder name like 'icons-[hash:5]' every icon is linked to that directory but browserconfig.xml - is not)
How can I diagnose this? The CPU just sits and spins after the 'content is served from (path)' message.
My code:
const FaviconsWebpackPlugin = require('favicons-webpack-plugin');
and in the plugins
array:
new FaviconsWebpackPlugin('favicon.png'),
If I remove the plugin, things work just fine.
I am using HtmlWebpackPlugin
and some others (extract text for css, commons chunk, define).
Hi there,
I'm trying to generate the favicons without injecting them via the HMTL plugin.
I was using the following code in my dev config:
new faviconPlugin({ logo: path.resolve(__dirname, '..', 'app', 'client', 'favicon.png'), prefix: path.resolve(__dirname, '..', 'build', 'client') + '/', inject: false })
Although the paths are correct and my terminal says they're generated the icons do not show up. See this image example from the terminal:
https://s17.postimg.org/nuwg7ytsv/example.png
Anyone knows what can be the issue?
I got an error while running webpack. The cause of error seems to be JSON.parse(childCompilation.assets[outputName].source())
in the compiler.js.
webpack.config.js:
var FaviconsWebpackPlugin = require('favicons-webpack-plugin');
...
plugins: [
...
new FaviconsWebpackPlugin('./client/assets/favicon.png')
]
Log:
/Users/lvarayut/Documents/Web development/Projects/relay-fullstack/node_modules/webpack-core/lib/NormalModuleMixin.js:151
throw e;
^
SyntaxError: Unexpected token \
at Object.parse (native)
at /Users/lvarayut/Documents/Web development/Projects/relay-fullstack/node_modules/favicons-webpack-plugin/lib/compiler.js:83:23
at Compiler.<anonymous> (/Users/lvarayut/Documents/Web development/Projects/relay-fullstack/node_modules/webpack/lib/Compiler.js:214:10)
at /Users/lvarayut/Documents/Web development/Projects/relay-fullstack/node_modules/webpack/lib/Compiler.js:403:12
at Compiler.next (/Users/lvarayut/Documents/Web development/Projects/relay-fullstack/node_modules/tapable/lib/Tapable.js:67:11)
at Compiler.<anonymous> (/Users/lvarayut/Documents/Web development/Projects/relay-fullstack/node_modules/webpack/lib/CachePlugin.js:40:4)
at Compiler.applyPluginsAsync (/Users/lvarayut/Documents/Web development/Projects/relay-fullstack/node_modules/tapable/lib/Tapable.js:71:13)
at Compiler.<anonymous> (/Users/lvarayut/Documents/Web development/Projects/relay-fullstack/node_modules/webpack/lib/Compiler.js:400:9)
at Compilation.<anonymous> (/Users/lvarayut/Documents/Web development/Projects/relay-fullstack/node_modules/webpack/lib/Compilation.js:577:13)
at Compilation.applyPluginsAsync (/Users/lvarayut/Documents/Web development/Projects/relay-fullstack/node_modules/tapable/lib/Tapable.js:60:69)
at Compilation.<anonymous> (/Users/lvarayut/Documents/Web development/Projects/relay-fullstack/node_modules/webpack/lib/Compilation.js:572:10)
at Compilation.next (/Users/lvarayut/Documents/Web development/Projects/relay-fullstack/node_modules/tapable/lib/Tapable.js:67:11)
at Compilation.<anonymous> (/Users/lvarayut/Documents/Web development/Projects/relay-fullstack/node_modules/favicons-webpack-plugin/lib/compiler.js:57:7)
at Compilation.applyPluginsAsync (/Users/lvarayut/Documents/Web development/Projects/relay-fullstack/node_modules/tapable/lib/Tapable.js:71:13)
at Compilation.<anonymous> (/Users/lvarayut/Documents/Web development/Projects/relay-fullstack/node_modules/webpack/lib/Compilation.js:567:9)
at Compilation.applyPluginsAsync (/Users/lvarayut/Documents/Web development/Projects/relay-fullstack/node_modules/tapable/lib/Tapable.js:60:69)
Icon generation fails silently when the background is set to #03a9f4
(material design light blue 500)
Slight modifications make it work, but the exact above color code causes icon generation to fail. (Tested using webpack dev server).
No errors or warnings are logged whatsoever. Making a GET request to the icons causes a 404.
The reason i ask is because , when i launch my app from homescreen the appbar text is white and my app background is also white. so the only thing visible is the battery icon. Additionally, if apple-mobile-web-app-capable value can be changed as well?
I just want to insert existing favicon.ico file to index.html with hash (favicon?hash=asdasdadasd)
But seems like this plugin want some other file format to generate favicon.ico files by itself.
Is it possible to look into adding the mask-icon for Safari, or is it out of scope?
<link rel='mask-icon' href='my-icon.svg' color='white'>
It is currently not possible to have an exclamation mark in the title.
I didn't spend much time trying to figure out why, but I assume it is because of this.
My application is named "osu!stats" so not being able to use an exclamation mark is kind of a big problem for me.
I'm getting this error trying to build with webpack. It seems to be happening sometime shortly after favicons-webpack-plugin/lib/loader.js:96 -> generateIcons()
but I'm having trouble tracking it down.
Error: w and h must be numbers
at Jimp.throwError (/Users/[user]/[project]/node_modules/jimp/index.js:82:43)
at Jimp.contain (/Users/[user]/[project]/node_modules/jimp/index.js:1751:27)
at Object.resize (/Users/[user]/[project]/node_modules/favicons/helpers-es5.js:221:27)
at /Users/[user]/[project]/node_modules/favicons/es5.js:60:41
at fn (/Users/[user]/[project]/node_modules/async/lib/async.js:746:34)
at /Users/[user]/[project]/node_modules/async/lib/async.js:1213:16
at /Users/[user]/[project]/node_modules/async/lib/async.js:166:37
at /Users/[user]/[project]/node_modules/async/lib/async.js:706:43
at /Users/[user]/[project]/node_modules/async/lib/async.js:167:37
at Jimp.<anonymous> (/Users/[user]/[project]/node_modules/async/lib/async.js:1209:30)
at /Users/[user]/[project]/node_modules/jimp/index.js:289:27
at .<anonymous> (/Users/[user]/[project]/node_modules/pngjs/lib/png.js:74:7)
at g (events.js:286:16)
at emitOne (events.js:96:13)
at emit (events.js:188:7)
at .<anonymous> (/Users/[user]/[project]/node_modules/pngjs/lib/png.js:36:10)
Tried with nodejs 6.2 & 6.4.
My webpack config isn't doing anything crazy -
{
...
plugins: [
new FaviconsWebpackPlugin(PATHS.favicon),
new HtmlWebpackPlugin({
title: "Project A"
}),
]
...
}
Funny thing is I wrote this project on another machine (also a Macbook running same dev environment) and only having this problem when I tried building on my other Macbook. I can't identify any differences between the two that might be causing something like this to happen. I'm obviously missing something.
Any insight into what might be causing this? Thanks.
Building fails with error:
Module build failed: TypeError: Buffer.alloc is not a function
Webpack config:
plugins: [
new FaviconsWebpackPlugin({
logo: './src/img/favicon.png',
background: '#917ccd',
emitStats: true,
title: 'Alchademy',
}),
]
Output:
<link rel="apple-touch-icon" sizes="57x57" href="/icons-0d96ba485ed162aee98c522b488cb9b6/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/icons-0d96ba485ed162aee98c522b488cb9b6/apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/icons-0d96ba485ed162aee98c522b488cb9b6/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/icons-0d96ba485ed162aee98c522b488cb9b6/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/icons-0d96ba485ed162aee98c522b488cb9b6/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/icons-0d96ba485ed162aee98c522b488cb9b6/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/icons-0d96ba485ed162aee98c522b488cb9b6/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/icons-0d96ba485ed162aee98c522b488cb9b6/apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/icons-0d96ba485ed162aee98c522b488cb9b6/apple-touch-icon-180x180.png">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="apple-mobile-web-app-title" content="Alchademy">
<meta name="mobile-web-app-capable" content="yes">
<meta name="theme-color" content="#917ccd">
<meta name="application-name" content="Alchademy">
<link rel="icon" type="image/png" sizes="32x32" href="/icons-0d96ba485ed162aee98c522b488cb9b6/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="192x192" href="/icons-0d96ba485ed162aee98c522b488cb9b6/android-chrome-192x192.png">
<link rel="icon" type="image/png" sizes="16x16" href="/icons-0d96ba485ed162aee98c522b488cb9b6/favicon-16x16.png">
<link rel="shortcut icon" href="/icons-0d96ba485ed162aee98c522b488cb9b6/favicon.ico">
<link rel="apple-touch-startup-image" media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 1)" href="/icons-0d96ba485ed162aee98c522b488cb9b6/apple-touch-startup-image-320x460.png">
<link rel="apple-touch-startup-image" media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 2)" href="/icons-0d96ba485ed162aee98c522b488cb9b6/apple-touch-startup-image-640x920.png">
<link rel="apple-touch-startup-image" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)" href="/icons-0d96ba485ed162aee98c522b488cb9b6/apple-touch-startup-image-640x1096.png">
<link rel="apple-touch-startup-image" media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2)" href="/icons-0d96ba485ed162aee98c522b488cb9b6/apple-touch-startup-image-750x1294.png">
<link rel="apple-touch-startup-image" media="(device-width: 414px) and (device-height: 736px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 3)" href="/icons-0d96ba485ed162aee98c522b488cb9b6/apple-touch-startup-image-1182x2208.png">
<link rel="apple-touch-startup-image" media="(device-width: 414px) and (device-height: 736px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 3)" href="/icons-0d96ba485ed162aee98c522b488cb9b6/apple-touch-startup-image-1242x2148.png">
<link rel="apple-touch-startup-image" media="(device-width: 768px) and (device-height: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 1)" href="/icons-0d96ba485ed162aee98c522b488cb9b6/apple-touch-startup-image-748x1024.png">
<link rel="apple-touch-startup-image" media="(device-width: 768px) and (device-height: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 1)" href="/icons-0d96ba485ed162aee98c522b488cb9b6/apple-touch-startup-image-768x1004.png">
<link rel="apple-touch-startup-image" media="(device-width: 768px) and (device-height: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)" href="/icons-0d96ba485ed162aee98c522b488cb9b6/apple-touch-startup-image-1496x2048.png">
<link rel="apple-touch-startup-image" media="(device-width: 768px) and (device-height: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)" href="/icons-0d96ba485ed162aee98c522b488cb9b6/apple-touch-startup-image-1536x2008.png">
<link href="/main-f71c74124957b0df3e4e.min.css?f71c74124957b0df3e4e" rel="stylesheet">
Can I stop this plugin from outputting a long list of generated files to my console?
at Jimp.throwError (/srv/filestore/service/ccloud_front/20160821154947/node_modules/jimp/index.js:82:43)
at Jimp.contain (/srv/filestore/service/ccloud_front/20160821154947/node_modules/jimp/index.js:1751:27)
at Object.resize (/srv/filestore/service/ccloud_front/20160821154947/node_modules/favicons/helpers-es5.js:221:27)
at /srv/filestore/service/ccloud_front/20160821154947/node_modules/favicons/es5.js:60:41
at fn (/srv/filestore/service/ccloud_front/20160821154947/node_modules/async/lib/async.js:746:34)
at /srv/filestore/service/ccloud_front/20160821154947/node_modules/async/lib/async.js:1213:16
at /srv/filestore/service/ccloud_front/20160821154947/node_modules/async/lib/async.js:166:37
at /srv/filestore/service/ccloud_front/20160821154947/node_modules/async/lib/async.js:706:43
at /srv/filestore/service/ccloud_front/20160821154947/node_modules/async/lib/async.js:167:37
at Jimp. (/srv/filestore/service/ccloud_front/20160821154947/node_modules/async/lib/async.js:1209:30)
at /srv/filestore/service/ccloud_front/20160821154947/node_modules/jimp/index.js:289:27
at null. (/srv/filestore/service/ccloud_front/20160821154947/node_modules/pngjs/lib/png.js:74:7)
at g (events.js:273:16)
at emitOne (events.js:90:13)
at emit (events.js:182:7)
at null. (/srv/filestore/service/ccloud_front/20160821154947/node_modules/pngjs/lib/png.js:36:10)
at emitOne (events.js:90:13)
at emit (events.js:182:7)
at ParserAsync._complete (/srv/filestore/service/ccloud_front/20160821154947/node_modules/pngjs/lib/parser-async.js:109:8)
at emitOne (events.js:90:13)
at emit (events.js:182:7)
at _filter.Filter.complete (/srv/filestore/service/ccloud_front/20160821154947/node_modules/pngjs/lib/filter-parse-async.js:19:12)
at Filter._reverseFilterLine (/srv/filestore/service/ccloud_front/20160821154947/node_modules/pngjs/lib/filter-parse.js:169:10)
at ChunkStream._processRead (/srv/filestore/service/ccloud_front/20160821154947/node_modules/pngjs/lib/chunkstream.js:174:13)
at ChunkStream._process (/srv/filestore/service/ccloud_front/20160821154947/node_modules/pngjs/lib/chunkstream.js:193:14)
at ChunkStream.write (/srv/filestore/service/ccloud_front/20160821154947/node_modules/pngjs/lib/chunkstream.js:61:8)
at Inflate.ondata (_stream_readable.js:536:20)
at emitOne (events.js:90:13)
at Inflate.emit (events.js:182:7)
at readableAddChunk (_stream_readable.js:153:18)
npm ERR! Linux 3.13.0-24-generic
npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "run" "build"
npm ERR! node v5.10.1
npm ERR! npm v3.8.3
npm ERR! code ELIFECYCLE
npm ERR! [email protected] build: webpack --config webpack.config.js
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] build script 'webpack --config webpack.config.js'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the ccloud package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! webpack --config webpack.config.js
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs ccloud
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls ccloud
npm ERR! There is likely additional logging output above.
npm ERR! Please include the following file with any support request:
npm ERR! /srv/filestore/service/ccloud_front/20160821154947/npm-debug.log
and i edit the file node_modules/favicons-webpack-plugin/lib/loader.js
var favicons = require('favicons/es5'); to var favicons = require('favicons');
this error is gone!
I use react router, and if my visit my route it tries to access the favicons below route:
/myroute/mysubroute/file.png
.
But if course the files are in the root...the webpack entries file correctly obeys publicPath
option, prefixing all paths with publicPath.
Rigth now the injected code is minified in a single line, for humans is dificult to read and understand, also are missing tags for manifest.json
and manifest.webapp
<link rel="icon" type="image/png" sizes="192x192" href="/calculator/icons-a97ba43996dcf645b0fde503f0b9d094/android-chrome-192x192.png"><meta name="mobile-web-app-capable" content="yes"><meta name="theme-color" content="#fff"><meta name="application-name" content="Calculator App"><link rel="apple-touch-icon" sizes="57x57" href="/calculator/icons-a97ba43996dcf645b0fde503f0b9d094/apple-touch-icon-57x57.png"><link rel="apple-touch-icon" sizes="60x60" href="/calculator/icons-a97ba43996dcf645b0fde503f0b9d094/apple-touch-icon-60x60.png"><link rel="apple-touch-icon" sizes="72x72" href="/calculator/icons-a97ba43996dcf645b0fde503f0b9d094/apple-touch-icon-72x72.png"><link rel="apple-touch-icon" sizes="76x76" href="/calculator/icons-a97ba43996dcf645b0fde503f0b9d094/apple-touch-icon-76x76.png"><link rel="apple-touch-icon" sizes="114x114" href="/calculator/icons-a97ba43996dcf645b0fde503f0b9d094/apple-touch-icon-114x114.png"><link rel="apple-touch-icon" sizes="120x120" href="/calculator/icons-a97ba43996dcf645b0fde503f0b9d094/apple-touch-icon-120x120.png"><link rel="apple-touch-icon" sizes="144x144" href="/calculator/icons-a97ba43996dcf645b0fde503f0b9d094/apple-touch-icon-144x144.png"><link rel="apple-touch-icon" sizes="152x152" href="/calculator/icons-a97ba43996dcf645b0fde503f0b9d094/apple-touch-icon-152x152.png"><link rel="apple-touch-icon" sizes="180x180" href="/calculator/icons-a97ba43996dcf645b0fde503f0b9d094/apple-touch-icon-180x180.png"><meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"><meta name="apple-mobile-web-app-title" content="Calculator App"><link rel="icon" type="image/png" sizes="16x16" href="/calculator/icons-a97ba43996dcf645b0fde503f0b9d094/favicon-16x16.png"><link rel="icon" type="image/png" sizes="32x32" href="/calculator/icons-a97ba43996dcf645b0fde503f0b9d094/favicon-32x32.png"><link rel="icon" type="image/png" sizes="96x96" href="/calculator/icons-a97ba43996dcf645b0fde503f0b9d094/favicon-96x96.png"><link rel="icon" type="image/png" sizes="230x230" href="/calculator/icons-a97ba43996dcf645b0fde503f0b9d094/favicon-230x230.png"><link rel="shortcut icon" href="/calculator/icons-a97ba43996dcf645b0fde503f0b9d094/favicon.ico"><link rel="apple-touch-startup-image" media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 1)" href="/calculator/icons-a97ba43996dcf645b0fde503f0b9d094/apple-touch-startup-image-320x460.png"><link rel="apple-touch-startup-image" media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 2)" href="/calculator/icons-a97ba43996dcf645b0fde503f0b9d094/apple-touch-startup-image-640x920.png"><link rel="apple-touch-startup-image" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)" href="/calculator/icons-a97ba43996dcf645b0fde503f0b9d094/apple-touch-startup-image-640x1096.png"><link rel="apple-touch-startup-image" media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2)" href="/calculator/icons-a97ba43996dcf645b0fde503f0b9d094/apple-touch-startup-image-750x1294.png"><link rel="apple-touch-startup-image" media="(device-width: 414px) and (device-height: 736px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 3)" href="/calculator/icons-a97ba43996dcf645b0fde503f0b9d094/apple-touch-startup-image-1182x2208.png"><link rel="apple-touch-startup-image" media="(device-width: 414px) and (device-height: 736px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 3)" href="/calculator/icons-a97ba43996dcf645b0fde503f0b9d094/apple-touch-startup-image-1242x2148.png"><link rel="apple-touch-startup-image" media="(device-width: 768px) and (device-height: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 1)" href="/calculator/icons-a97ba43996dcf645b0fde503f0b9d094/apple-touch-startup-image-748x1024.png"><link rel="apple-touch-startup-image" media="(device-width: 768px) and (device-height: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 1)" href="/calculator/icons-a97ba43996dcf645b0fde503f0b9d094/apple-touch-startup-image-768x1004.png"><link rel="apple-touch-startup-image" media="(device-width: 768px) and (device-height: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)" href="/calculator/icons-a97ba43996dcf645b0fde503f0b9d094/apple-touch-startup-image-1496x2048.png"><link rel="apple-touch-startup-image" media="(device-width: 768px) and (device-height: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)" href="/calculator/icons-a97ba43996dcf645b0fde503f0b9d094/apple-touch-startup-image-1536x2008.png">
At the moment, when the option inject: true
is selected, all html is injected onto the same line. However, it might be helpful if each line were written with a trailing \n
. Something like ...
/(<\/head>)/i, compilationResult.stats.html.join('\n') + '$&');
Hey,
Currently having an issue with favicons-webpack-plugin
via the favicons
package.
Here's my error;
SyntaxError: Unexpected token =
at exports.runInThisContext (vm.js:53:16)
at Module._compile (module.js:373:25)
at Object.Module._extensions..js (module.js:416:10)
at Module.load (module.js:343:32)
at Function.Module._load (module.js:300:12)
at Module.require (module.js:353:17)
at require (internal/module.js:12:17)
at Object.<anonymous> (C:\...\node_modules\favicons-webpack-plugin\node_modules\favicons\helpers-es5.js:18:15)
at Module._compile (module.js:409:26)
at Object.Module._extensions..js (module.js:416:10)
at Module.load (module.js:343:32)
at Function.Module._load (module.js:300:12)
at Module.require (module.js:353:17)
at require (internal/module.js:12:17)
at Object.<anonymous> (C:\...\node_modules\favicons-webpack-plugin\node_modules\favicons\es5.js:11:15)
at Module._compile (module.js:409:26)
at Object.Module._extensions..js (module.js:416:10)
at Module.load (module.js:343:32)
at Function.Module._load (module.js:300:12)
at Module.require (module.js:353:17)
at require (internal/module.js:12:17)
at Object.<anonymous> (C:\...\node_modules\favicons-webpack-plugin\lib\favicons.js:3:16)
at Module._compile (module.js:409:26)
at Object.Module._extensions..js (module.js:416:10)
at Module.load (module.js:343:32)
at Function.Module._load (module.js:300:12)
at Module.require (module.js:353:17)
at require (internal/module.js:12:17)
at DependenciesBlock.loadPitch (...\node_modules\webpack\node_modules\webpack-core\lib\NormalModuleMixin.js:193:17)
at DependenciesBlock.doBuild (...\node_modules\webpack\node_modules\webpack-core\lib\NormalModuleMixin.js:241:4)
However, I can't see why it's happening, as helpers-es5.js:18
is this line
var path = require('path'),
fs = require('fs'),
_ = require('underscore'),
color = require('tinycolor2'),
cheerio = require('cheerio'),
colors = require('colors'),
jsonxml = require('jsontoxml'),
sizeOf = require('image-size'),
async = require('async'),
mkdirp = require('mkdirp'),
Jimp = require('jimp'),
svg2png = require('svg2png'),
File = require('vinyl'),
Reflect = require('harmony-reflect'),
NRC = require('node-rest-client').Client,
PLATFORM_OPTIONS = require('./config/platform-options.json');
I can't build on Windows, or Heroku, but OS X seems to build fine.
I just installed from npm and got v0.0.6, however it doesn't include #13 which fixes the icon placement, so they are all still at the top of the head instead of the bottom. Please update, thanks.
I wanted to direct all the output files into a directory named favicons
but couldn't find the config option to do that. Have I missed something?
Edit: I missed that the prefix config would allow for a path to be defined. Maybe a separate output config option might be a nice addition.
I notted that adding new FaviconsWebpackPlugin(PATHS.statics + '\\ashojash.png')
to plugins,
besides adding fav icons, adds theme-color
meta attribute to generated html-webpack-plugin file with the default value of #fff
.
Is this a desired outcome? And How can I change that?
webpack 2.2.0
favicons-webpack-plugin 0.0.7
Similar to this issue here, I'm unable to use a data URI for a favicon image. The error below is what is given when trying to do so.
EntryModuleNotFoundError: Entry module not found: Error: Can't resolve 'data:image/x-icon;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQEAYAAABPYyMiAAAABmJLR0T///////8JWPfcAAAACXBIWXMAAABIAAAASABGyWs+AAAAF0lEQVRIx2NgGAWjYBSMglEwCkbBSAcACBAAAeaR9cIAAAAASUVORK5CYII=' in '/fake/project/path'
When using this plugin with webpack2 it stops the build from completing and it just ends up hanging indefinitely. Removing this plugin solves this problem
Here's a sample
<meta name="msapplication-TileImage" content="assets/logo-144x144.png" />
<meta name="msapplication-TileColor" content="#216978" />
I have the following web pack config, since I am deploying to a CDN I want each new build to go in a new directory named with the build hash. when I create a new build I end up with the following path for the icons
...
output = {
publicPath: '[hash]/', // Set the public path to the current build hash
path: 'public/' + ENV + '/[hash]/',
filename: '[name].js',
chunkFilename: '[id].js'
} // full file attached
...
`
` // the childCompilation hash gets applied correctly, but the **main hash does not**I used to have the same problem with the html webpack plugin, I tried to apply the same solution that fixed it for the html webpack plugin jantimon/html-webpack-plugin@41a255a but I could not get it to work, I always got stuck with this error Path variable [hash] not implemented in this context: [hash]/ , doing some console log revealed that the compilation object does not have a hash at the point where the favicon plugin does something with the public path, Line 11 in compiler.js & Line 40 in favicon.js. Any suggestions on how to fix this?
Hi and thanks for this plugin!
I'd like to change the path of cache directory (other than output path) but I did not see how to do this with settings. Is there another way ?
I noticed that image-webpack-loader doesn't touch the files this plugin produces, is there any way to optimize them to compress them a bit?
Icon mstile-144x144.png is generated under the icon-[hash] directory, however the meta tag inserted in html reads:
<meta name="msapplication-TileImage" content="mstile-144x144.png">
shouldn't the value of content attribute be 'icon-[hash]/mstile-144x144.png'
This is case with browserconfig.xml file as well
I get the following error when I attempt to include a favicon. Any help or guidance as to what I am doing wrong would be much appreciated. Thanks, Adam Kriger
This is my webpack.config.js file
const path = require('path');
const merge = require('webpack-merge');
const webpack = require('webpack');
const NpmInstallPlugin = require('npm-install-webpack-plugin');
const TARGET = process.env.npm_lifecycle_event;
const FaviconsWebpackPlugin = require('favicons-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanPlugin = require('clean-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
var favicons = require('favicons'),
source = 'my-logo.png', // Source image(s). `string`, `buffer` or array of `{ size: filepath }`
configuration = {
appName: null, // Your application's name. `string`
appDescription: null, // Your application's description. `string`
developerName: null, // Your (or your developer's) name. `string`
developerURL: null, // Your (or your developer's) URL. `string`
background: "#fff", // Background colour for flattened icons. `string`
path: "/", // Path for overriding default icons path. `string`
url: "/", // Absolute URL for OpenGraph image. `string`
display: "standalone", // Android display: "browser" or "standalone". `string`
orientation: "portrait", // Android orientation: "portrait" or "landscape". `string`
version: "1.0", // Your application's version number. `number`
logging: false, // Print logs to console? `boolean`
online: false, // Use RealFaviconGenerator to create favicons? `boolean`
icons: {
android: true, // Create Android homescreen icon. `boolean`
appleIcon: true, // Create Apple touch icons. `boolean`
appleStartup: true, // Create Apple startup images. `boolean`
coast: true, // Create Opera Coast icon. `boolean`
favicons: true, // Create regular favicons. `boolean`
firefox: true, // Create Firefox OS icons. `boolean`
opengraph: true, // Create Facebook OpenGraph image. `boolean`
twitter: true, // Create Twitter Summary Card image. `boolean`
windows: true, // Create Windows 8 tile icons. `boolean`
yandex: true // Create Yandex browser icon. `boolean`
}
},
callback = function (error, response) {
if (error) {
console.log(error.status); // HTTP error code (e.g. `200`) or `null`
console.log(error.name); // Error name e.g. "API Error"
console.log(error.message); // Error description e.g. "An unknown error has occurred"
}
console.log(response.images); // Array of { name: string, contents: <buffer> }
console.log(response.files); // Array of { name: string, contents: <string> }
console.log(response.html); // Array of strings (html elements)
};
favicons(source, configuration, callback);
const pkg = require('./package.json');
const PATHS = {
app: path.join(__dirname, 'app'),
build: path.join(__dirname, 'build')
};
process.env.BABEL_ENV = TARGET;
const common = {
entry: {
app: PATHS.app
},
// Add resolve.extensions
// '' is needed to allow imports without an extension
// note the .'s before the extension as it will fail to load without them
resolve: {
extensions: ['', '.js', '.jsx', '.json']
},
output: {
path: PATHS.build,
filename: 'bundle.js'
},
module: {
loaders: [
{
// Test expects a RegExp! Notethe slashes!
test: /\.css$/,
loaders: ['style', 'css'],
//Include accepts either a path or an array of paths
include: PATHS.app
},
//set up JSX. This accepts js too thanks to RegExp
{
test: /\.(js|jsx)$/,
//enable caching for improved performance during development
//It uses default OS directory by default. If you need something more custom,
//pass a path to it. ie: babel?cacheDirectory=<path>
loaders: [
'babel?cacheDirectory,presets[]=es2015'
],
//parse only app files Without this it will go thru the entire project.
//beside being slow this will likely result in an error
include: PATHS.app
}
]
}
};
// Default configuration. We will return this if
// Webpack is called outside of npm.
if(TARGET === 'start' || !TARGET){
module.exports = merge(common, {
devtool: 'eval-source-map',
devServer: {
contentBase: PATHS.build,
//enable history API fallback so HTML5 HISTORY API based
// routing works. This is a good default that will come in handy in more
// complicated setups.
historyApiFallback: true,
hot: true,
inline: true,
progress: true,
//display only errors to reduce output amount
stats: 'errors only',
//Parse host and port from env so this is easy to customize
host: process.env.HOST,
port: process.env.PORT
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new NpmInstallPlugin({
save: true //--save
}),
new FaviconsWebpackPlugin('my-logo.png')
]
});
}
if(TARGET === 'build' || TARGET === 'stats') {
module.exports = merge(common, {
entry: {
vendor: Object.keys(pkg.dependencies).filter(function(v) {
return v !== 'alt-utils';
}),
style: PATHS.style
},
output: {
path: PATHS.build,
// Output using entry name
filename: '[name].[chunkhash].js',
chunkFilename: '[chunkhash].js'
},
module: {
loaders: [
// Extract CSS during build
{
test: /\.css$/,
loader: ExtractTextPlugin.extract('style', 'css'),
include: PATHS.app
}
]
},
plugins: [
// Output extracted CSS to a file
new ExtractTextPlugin('[name].[chunkhash].css'),
// Extract vendor and manifest files
new webpack.optimize.CommonsChunkPlugin({
names: ['vendor', 'manifest']
}),
// Setting DefinePlugin affects React library size!
new webpack.DefinePlugin({
'process.env.NODE_ENV': '"production"'
}),
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
}
})
]
});
}
This is my server.js file:
/* Global Requires */
const express = require('express');
const logger = require('morgan');
const bodyParser = require('body-parser');
const path = require('path');
const app = express();
const ReactDOM = require('react-dom')
var favicon = require('serve-favicon');
if(process.env.NODE_ENV === 'development') {
console.log('in development.');
require('dotenv').config();
} else {
console.log('in production.');
}
/* App Config */
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());
app.use(express.static(path.join(__dirname, 'build')));
app.use(favicon(__dirname + '/public/favicon.ico'));
app.use(logger('dev'));
/* Server Initialization */
app.get('/', (req, res) => res.sendFile('index.html'));
var port = process.env.PORT || 3000;
app.listen(port, () => console.log(`Server initialized on // ${new Date()}`));
//new configs//
This is my directory structure:
This is my npm-debug.log
0 info it worked if it ends with ok
1 verbose cli [ '/usr/local/Cellar/node/6.0.0/bin/node',
1 verbose cli '/usr/local/bin/npm',
1 verbose cli 'install',
1 verbose cli 'my-logo.png',
1 verbose cli '--save' ]
2 info using [email protected]
3 info using [email protected]
4 silly loadCurrentTree Starting
5 silly install loadCurrentTree
6 silly install readLocalPackageData
7 silly fetchPackageMetaData my-logo.png
8 silly fetchOtherPackageData my-logo.png
9 silly cache add args [ 'my-logo.png', null ]
10 verbose cache add spec my-logo.png
11 silly cache add parsed spec Result {
11 silly cache add raw: 'my-logo.png',
11 silly cache add scope: null,
11 silly cache add name: null,
11 silly cache add rawSpec: 'my-logo.png',
11 silly cache add spec: '/Users/Adam1/react_apps/personal_site/personal_site/my-logo.png',
11 silly cache add type: 'local' }
12 silly addLocalTarball shasum (computed) 21d582715b3370828356e6c6f6d482b0d1cc340e
13 verbose addTmpTarball /Users/Adam1/react_apps/personal_site/personal_site/my-logo.png not in flight; adding
14 verbose correctMkdir /Users/Adam1/.npm correctMkdir not in flight; initializing
15 verbose addTmpTarball validating metadata from /Users/Adam1/react_apps/personal_site/personal_site/my-logo.png
16 verbose tar unpack /Users/Adam1/react_apps/personal_site/personal_site/my-logo.png
17 verbose tar unpacking to /var/folders/k8/k2_hk13j7v7f_9zl_myvs10h0000gp/T/npm-72014-fa7e1251/unpack-f399a6b0
18 silly gentlyRm /var/folders/k8/k2_hk13j7v7f_9zl_myvs10h0000gp/T/npm-72014-fa7e1251/unpack-f399a6b0 is being purged
19 verbose gentlyRm don't care about contents; nuking /var/folders/k8/k2_hk13j7v7f_9zl_myvs10h0000gp/T/npm-72014-fa7e1251/unpack-f399a6b0
20 silly gunzTarPerm modes [ '755', '644' ]
21 error not a package /Users/Adam1/react_apps/personal_site/personal_site/my-logo.png
22 error addLocal Could not install /Users/Adam1/react_apps/personal_site/personal_site/my-logo.png
23 silly fetchPackageMetaData Error: ENOENT: no such file or directory, open '/var/folders/k8/k2_hk13j7v7f_9zl_myvs10h0000gp/T/npm-72014-fa7e1251/unpack-f399a6b0/package.json'
23 silly fetchPackageMetaData at Error (native)
23 silly fetchPackageMetaData error for my-logo.png { Error: ENOENT: no such file or directory, open '/var/folders/k8/k2_hk13j7v7f_9zl_myvs10h0000gp/T/npm-72014-fa7e1251/unpack-f399a6b0/package.json'
23 silly fetchPackageMetaData at Error (native)
23 silly fetchPackageMetaData errno: -2,
23 silly fetchPackageMetaData code: 'ENOENT',
23 silly fetchPackageMetaData syscall: 'open',
23 silly fetchPackageMetaData path: '/var/folders/k8/k2_hk13j7v7f_9zl_myvs10h0000gp/T/npm-72014-fa7e1251/unpack-f399a6b0/package.json' }
24 silly rollbackFailedOptional Starting
25 silly rollbackFailedOptional Finishing
26 silly runTopLevelLifecycles Starting
27 silly runTopLevelLifecycles Finishing
28 silly install printInstalled
29 verbose stack Error: ENOENT: no such file or directory, open '/var/folders/k8/k2_hk13j7v7f_9zl_myvs10h0000gp/T/npm-72014-fa7e1251/unpack-f399a6b0/package.json'
29 verbose stack at Error (native)
30 verbose cwd /Users/Adam1/react_apps/personal_site/personal_site
31 error Darwin 15.4.0
32 error argv "/usr/local/Cellar/node/6.0.0/bin/node" "/usr/local/bin/npm" "install" "my-logo.png" "--save"
33 error node v6.0.0
34 error npm v3.8.6
35 error path /var/folders/k8/k2_hk13j7v7f_9zl_myvs10h0000gp/T/npm-72014-fa7e1251/unpack-f399a6b0/package.json
36 error code ENOENT
37 error errno -2
38 error syscall open
39 error enoent ENOENT: no such file or directory, open '/var/folders/k8/k2_hk13j7v7f_9zl_myvs10h0000gp/T/npm-72014-fa7e1251/unpack-f399a6b0/package.json'
40 error enoent ENOENT: no such file or directory, open '/var/folders/k8/k2_hk13j7v7f_9zl_myvs10h0000gp/T/npm-72014-fa7e1251/unpack-f399a6b0/package.json'
40 error enoent This is most likely not a problem with npm itself
40 error enoent and is related to npm not being able to find a file.
41 verbose exit [ -2, true ]
Hi.
My config:
new FaviconsWebpackPlugin({ logo: './static/favicon.png', prefix: 'icons-[hash]/', emitStats: false, statsFilename: 'iconstats-[hash].json', persistentCache: true, title: 'Domik', inject: false, icons: { android: true, appleIcon: true, appleStartup: true, coast: false, favicons: true, firefox: true, opengraph: false, twitter: false, yandex: false, windows: false } }),
And option "statsFilename" don`t generate any file.
Option "emitStats" down work and all stats is emitted.
Is there any way to use this plugin to generate multiple favicons? In our case, a different favicon for each entry point is the example usecase (using webpack to generate bundles for a multi-tenant webapp).
A potential API could be something like this:
plugins: [
new FaviconsWebpackPlugin({
logo: '[name].png',
prefix: '[name]/icons',
...
]
Is there any way to do this currently / is the additional functionality a possibility?
Since this commit webpack/webpack@2596b32 webpack uses different footer for generated files. It causes size mismatch in the comparator const compareOptions = {compareSize: true};
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.