title: How to generate and serve favicons with Webpack?
body: <p>So I have a universal React project set up, and need to serve favicons in an Html.js component which is rendered server-side. </p>
  
  <p>I'm interested in using <a href="https://github.com/jantimon/favicons-webpack-plugin" rel="nofollow">this package</a>, as it seems to automatically bounce 30+ different sizes of favicons automatically.</p>
  
  <p>Here's what I've done so far:</p>
  
  <p><strong>Html.js</strong>:</p>
  
  <pre><code>...
  import faviconUrl from 'universal/images/favicon.png'
  
  &lt;html&gt;
    &lt;head&gt;
      &lt;link rel='icon' href={faviconUrl} /&gt;
    &lt;/head&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>webpack.config.js</strong>:</p>
  
  <pre><code>...
  plugins: [
    new FaviconsWebpackPlugin({logo:'universal/images/favicon.png', inject: true})
  ]
  </code></pre>
  
  <p>However, when I build and do <code>npm start</code>, I get this error:</p>
  
  <pre><code>[Error] SyntaxError: /universal/images/favicon.png: Unexpected character '�' (1:0) &gt; 1 | �PNG
  </code></pre>
  
  <p>Obviously, webpack is not expecting that import to be a binary file, but why? Any advice or recommendations on easy ways to get favicons going would be appreciated.</p>