如何制作网站的favicon

Favicon（Favorites Icon的缩写），中文叫网页图标，一般为各网站的LOGO（如下图），从视觉上起到宣传、醒目、易于区分的效果。没有设置favicon的网站，浏览器会赋予默认的图标（比如Chrome的灰色地球），这样的体验不是很好，那如何制作呢？ favicon示例 详细步骤：1、准备一张尺寸不小于260 * 260的正方形图片（.png/.jpg、透明/不透明都可以）2、进入Favicon Generator网站，点击按钮“Select your Favicon image” 导入图片 3、选择步骤1准备的图片（我准备了一个魔法棒的图片），上传成功后点击对话框右下角的按钮“Continue with this picture” 确认导入 4、然后翻到网页最底部，点击按钮“Generate your Favicons and HTML code”，接下来耐心等待十几秒，直到出现按钮“Favicon package”，点击它，下载压缩包 生成图标和代码 下载图标 5、压缩包解压后，得到如下文件： 图标文件内容 6、将里面的文件放进你网站项目的favicon（新建一个）文件夹里，复制该网页提供的代码（如下），粘贴到项目首页的标签内，注意所有的引用路径："./favicon/xxx.ico"。至此，普通网页（非单页面应用）制作Favicon就已经结束了注意：经实验，在Vue.js项目中（以上方法无效），仅需引入favicon.ico一个文件即可。将favicon.ico复制到Vue.js项目的src/static文件夹中，index.html页面标签内引入：build/webpack.dev.conf.js找到如下所示的代码块，添加一行代码：new HtmlWebpackPlugin({  filename: 'index.html',  template: 'index.html',  inject: true,  favicon: './static/favicon.ico' // 添加这行！}),执行npm run dev重启项目，刷新页面，完成！ 成功展示favicon

本文章由javascript技术分享原创和收集