[前端] 添加网站图标

我不是女神ヾ 2023-07-05 13:19 19阅读 0赞

**1.准备图标文件**

其实即使使用.png、.jpg之类的格式，在Chrome浏览器上也是能正常渲染出来的，只是在搜狗等浏览器上有些问题。

下面说明如何转换出.ico图标文件。

**方法一：（适合已经有了Photoshop 2018 cc等较新版本ps的用户）**

ps2018下载安装ico格式插件\_网络\_dsfho32的博客-CSDN博客 [https://blog.csdn.net/dsfho32/article/details/89457868][https_blog.csdn.net_dsfho32_article_details_89457868]

按照说明操作，其中Plug-ins文件夹下可能没有FIle Formats文件夹，自己新建一个就好了。同时，图像大小需要设置在256\*256以下。

**方法二：（适合只有Photoshop CS6等较老版本ps的用户）**

Photoshop制作保存ico格式图标，原来这么简单 - 记忆盒子 [http://www.webkaka.com/blog/archives/save-ico-in-photoshop.html][http_www.webkaka.com_blog_archives_save-ico-in-photoshop.html]

**方法三：（适合不想装软件，可以接受较慢网速的用户）**

制作ico图标 | 在线ico图标转换工具 方便制作favicon.ico - 比特虫 - Bitbug.net [http://www.bitbug.net/ ][http_www.bitbug.net]

速度比较慢。

**方法四：（适合不想装ps，可以接受装一款小软件来解决问题的用户）**

IconWorkShop（试用版）

**2.在html文档中添加图标文件路径**

在<head>标签内插入一行：

<link rel="shortcut icon" href="图标路径文件名">

例如这样：

<link rel="shortcut icon" href="img/myIcon.ico">

保存以后用Chrome浏览器就能看到效果了。

[https_blog.csdn.net_dsfho32_article_details_89457868]: https://blog.csdn.net/dsfho32/article/details/89457868
[http_www.webkaka.com_blog_archives_save-ico-in-photoshop.html]: http://www.webkaka.com/blog/archives/save-ico-in-photoshop.html
[http_www.bitbug.net]: http://www.bitbug.net/%C2%A0

发表评论取消回复

表情：

评论列表（有 0 条评论，19人围观）

还没有评论，来说两句吧...

相关阅读

相关 [前端] 添加网站图标

1.准备图标文件其实即使使用.png、.jpg之类的格式，在Chrome浏览器上也是能正常渲染出来的，只是在搜狗等浏览器上有些问题。下面说明如何转换出.ico图标文件。

我不是女神ヾ/ 2023年07月05日 13:19/ 0 赞/ 20 阅读

相关给网站文字添加图标-Font Awesome

Font Awesome图标库是很多站长都在使用的，使用起来也非常的简单有一些主题的目录啊导航等都没有图标，光秃秃的，我正在使用的大前端也是这样，给导航或分类添加一个图标会让网

怼烎@/ 2023年03月06日 08:08/ 0 赞/ 164 阅读

相关图标网站收集

[https://ant.design/components/icon-cn/][https_ant.design_components_icon-cn] 如果对你有帮

不念不忘少年蓝@/ 2022年11月29日 12:40/ 0 赞/ 267 阅读

相关图标素材网站

收集了一些国内外的优质素材网址，资源丰富，经常会用到，请惠存！ easyicon https://www.easyicon.net/ 免费矢量图标下载，格式包含：SV

女爷i/ 2022年11月07日 04:18/ 0 赞/ 219 阅读

相关如何添加网站favicon.ico图标

[http://www.bitbug.net/][http_www.bitbug.net] 这个网页可以哦！ [http://blog.igevin.info/a

淡淡的烟草味﹌/ 2022年09月30日 03:57/ 0 赞/ 492 阅读

相关网站图标制作

网站图标favicon制作介绍：favicon.ico一般作为缩略的网站标志，他显示于浏览器的地址栏，表示网站的Logo，如下图红圈所示： ![Center][] 下

本是古典何须时尚/ 2022年06月07日 06:47/ 0 赞/ 351 阅读

相关状态栏添加图标

关于在状态栏添加类似wifi,蓝牙那样图标,这种需求一般是通过广播来实现的,点击应用UI里的开关发送广播,这个广播由 \\android\\frameworks

小鱼儿/ 2022年06月02日 10:23/ 0 赞/ 283 阅读

相关前端项目添加自定义icon图标步骤

转载自：[https://blog.csdn.net/weixin\_36185028/article/details/53416185][https_blog.csdn.ne

秒速五厘米/ 2022年02月14日 03:39/ 0 赞/ 656 阅读

相关网站图标Icon添加方法

第一步，准备一个图标制作软件。首先您必须了解所谓的图标（Icon）是一种特殊的图形文件格式，它是以.ico 作为扩展名。普通的图像设计软件无法使用这种格式，所以您需要

叁歲伎倆/ 2022年01月09日 23:55/ 0 赞/ 416 阅读

相关前端网站如何做ico图标教程

我们可以自己做的图片，转换为 ico图标，以便放到我们站点里面。具体我们需要怎么做呢？总共我们分为3个步骤?： 1. 可以选用ps或者fw工具，对想要的图标进行切图，使用切

怼烎@/ 2021年12月04日 08:11/ 0 赞/ 604 阅读