设置项目的favicon图标

本是古典何须时尚 2022-05-23 06:09 460阅读 0赞

看着别人的网站用的都是自己制作的高大上的favicon图标，我就算不搞那么高大上的图标，也不想用服务器自带的图标。

所以决定给自己的网站换个像点样子的图标，但是技术有限，还得先要取取经才能办成这件事。

不枉我花费了大量的时间，总算是知道了几种针对不同工具修改favicon图标的方法，经过尝试之后，确认了其中几种可行的方法，在这里综合整理一下。

▍注意事项

这里有个大前提一定要注意，你用做网站图标的图片文件必须是ico类型，文件名最好统一命名favicon.ico！！！不要自定义自定义！

如果你没有ico格式文件的话，在这个网站（Favicon在线制作：http://www.faviconico.org/）里可以将其他类型文件转换为ico文件。

▍Tomcat设置favicon图标

对发布在该服务器上的所有项目生效，文件名必须是favicon.ico！！！

进入tomcat服务器\\webapps\\ROOT，然后用自己项目的favicon.ico替换tomcat自带的facicon.ico图片。

效果图参考下面↓↓↓

▍在单个页面中设置favicon图标

仅对当前页面生效：

将自己项目需要的favicon.ico图片作为一个图片添加到项目中（存放在项目的根目录下或者跟其他图片资源放在一起都可以），然后在页面中的<head>标签中添加<link>标签引入该图片。

或者

将href的属性值改为你存放favicon.ico的位置。完成之后图标就设置成功了。

![70][]

▍IntelliJ IDEA设置favicon图标

在使用IntelliJ IDEA时，想要设置favicon.ico（文件名必须是favicon.ico！！！）就很简单了，只需要将favicon.ico文件放置在类路径根目录、类路径META-INF/resources/下、类路径resources/下，类路径static/下或者类路径public/下都可以实现替换效果。

IntelliJ IDEA会自动扫描到这个文件，然后完成图标的替换。因为在IntelliJ IDEA中，每次只能打开一个项目，所以加入这个图标后，只会改变这一个项目的图标，对其他项目没有影响。

这里以放置在类路径static/下：

![70 1][]

这样在访问的时候，图标就替换成功了哦！

![70 2][]

▍我是尾巴

针对不同的工具方法会实现不同的效果，但是设置方法肯定不止上面讲到的三种，以后应该能接触到一些新的东西。

不过现在也不那么着急全部弄会，跟着时间的脚步走吧，有需要的时候或者什么时候有兴趣了，就去额外扩展学习一下。

![关注公众号：爱唱歌的蜗牛先生][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lfZG9udF9rbm93X2E_size_16_color_FFFFFF_t_70]

[70]: /images/20220523/a7d6eea9f9d8451290d1c411ad81fb74.png
[70 1]: /images/20220523/e2768787509341a6a2478dcdb815df66.png
[70 2]: /images/20220523/60540fa5bb644f39b19c0421d46faa5b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lfZG9udF9rbm93X2E_size_16_color_FFFFFF_t_70]: /images/20220523/6252bdce9df94ec7a0efc7208f3d34f3.png