【前端小技能】一个项目中，不同页面使用不同的favicon.ico

项目开发中，遇到一个需求：在同一个项目中，不同的页面需要在标题中展示不同的favicon.ico，做下记录：

以vue2为例：

首先在我们的public文件夹中添加我们在其他页面需要使用的ico文件，例如：

然后在我们要修改ico的页面中修改，代码如下：

mounted() {
 this.updateIcon()
},
methonds: {
	updateIcon() {
	  let link = './favicon.ico'
	  let $favicon = document.querySelector('link[rel="icon"]')
	  if ($favicon !== null) {
	    $favicon.href = link
	  } else {
	    $favicon = document.createElement('link')
	    $favicon.rel = 'icon'
	    $favicon.href = link
	    document.head.appendChild($favicon)
	  }
	}
}

运行即可看到我们想要的效果，注意： 如果只有一个页面需要修改为单独的ico文件，记得在文件销毁的时候将ico文件改为项目通用的ico文件