方法一:比较麻烦,修改脚手架达到效果
效果图:
项目是基于vue2.0的。
打开npm官网 https://www.npmjs.com
搜索favicons-webpack-plugin
插件下载包
npm install --save-dev favicons-webpack-plugin
- 在webpack.dev.conf.js中添加
const FaviconsWebpackPlugin = require('favicons-webpack-plugin');
- plugins 数组中添加
plugins: [
new FaviconsWebpackPlugin({
// Your source logo
logo: './logo.png',
// The prefix for all image files (might be a folder or a name)
prefix: 'icons-[hash]/',
// Emit all stats of the generated icons
emitStats: false,
// The name of the json containing all favicon information
statsFilename: 'iconstats-[hash].json',
// Generate a cache file with control hashes and
// don't rebuild the favicons until those hashes change
persistentCache: true,
// Inject the html into the html-webpack-plugin
inject: true,
// favicon background color (see https://github.com/haydenbleasel/favicons#usage)
background: '#fff',
// favicon app title (see https://github.com/haydenbleasel/favicons#usage)
title: 'Webpack App',
// which icons should be generated (see https://github.com/haydenbleasel/favicons#usage)
icons: {
android: true,
appleIcon: true,
appleStartup: true,
coast: false,
favicons: true,
firefox: true,
opengraph: false,
twitter: false,
yandex: false,
windows: false
}
})
]
index.html 和 logo.png的位置
- 方法二:( 建议使用 .ico的后缀名 )
//index.html
<link rel="icon" sizes="48x48" href="/favicon.png">
这个方法就是这么简单的~~~~