search

tj / frontend-boilerplate

webpack-react-redux-babel-autoprefixer-hmr-postcss-css-modules-rucksack-boilerplate (unmaintained, I don't use it anymore)
2.93k stars 268 forks source link

Insert favicon #36

Closed tikhonbelousko closed 8 years ago

tikhonbelousko commented 8 years ago

I can't figure out how to insert favicons into index.html. :confused:

PatrikLythell commented 8 years ago

http://www.winterdrache.de/freeware/png2ico/favicon.html

tikhonbelousko commented 8 years ago

@PatrikLythell thanks cap! The idea is that I want to put favicon inside client folder, then require it in index.html. The last thing I came up with is to put the following loader for html: 

{
    test: /\.html$/,
    loader: ExtractTextPlugin.extract('html?attrs=link:href')
},

The problem with this option is that every <link href=""> trying to require module.It's ok for <link rel="icon" type="image/png" href="./assets/favicon.png"/>, but breaks when I try to use it with styles <link href='./styles.css' rel='stylesheet'/>.

aziz commented 8 years ago

I'm doing this using the html-webpack-plugin I've got something like this in my webpack config file: 

  plugins: [
    ...
    new HtmlWebpackPlugin({
      inject: true,
      favicon: 'src/assets/favicon.ico',
      template: 'src/index.html',
    }),
tikhonbelousko commented 8 years ago

@aziz the problem with html-webpack-plugin is that as far as I know it's not possible to put 2 favicons. I need to put there 16x16 and 32x32 for retina monitors.

aziz commented 8 years ago

@DaZzz I use a favicon.ico that has embedded 16x16, 32x32 and 64x64 sized images inside.

tikhonbelousko commented 8 years ago

@aziz :+1: I'll try it out. Do you have any suggestions where I can generate multi-size favicon?

aziz commented 8 years ago

I recommend http://www.xiconeditor.com