如何给你的网站加上favicon.ico图标

最新推荐文章于 2021-06-04 00:51:22 发布
最新推荐文章于 2021-06-04 00:51:22 发布
阅读量243 收藏
点赞数
文章标签： python
原文链接：https://my.oschina.net/wzwahl36/blog/194542
版权

2019独角兽企业重金招聘Python工程师标准>>> hot3.png

favicon.ico图标是网站的缩略标志，可以显示在浏览器标签、地址栏左边和收藏夹，是展示网站个性的缩略logo标志，也可以说是网站头像，如果要让网站看起来更专业、更美、更有个性，favicon.ico是必不可少的，所以你在本站使用ICO图标转换工具就可以轻松达到你的要求。

如何给你的网站加上favicon.ico图标：[1]
如何给你的网站加上favicon.ico图标：[1]

工具/原料

  • 一张你喜欢的logo方形图片

  • 一个在线制作工具aTool

方法/步骤

  1. 1

    准备一张长宽一样的图片，jpg，png，bmp均可，如果尺寸不一样大，可以采用windows系统自带的绘图工具剪裁即可。编辑之后保存为jpg，png，bmp格式的其中一个。

    如何给你的网站加上favicon.ico图标：[1]
  2. 2

    打开在线工具aTool（http://www.atool.org/ico.php）生成ico图标

    如何给你的网站加上favicon.ico图标：[1]
  3. 3

    点击选择文件，可以浏览你刚刚生成的宽高相同的图片。

    如何给你的网站加上favicon.ico图标：[1]
    如何给你的网站加上favicon.ico图标：[1]
  4. 4

    选择生成的图片尺寸大小，建议采用32*32的大小。点击“生成favicon.ico图标”按钮，即可生成。

    如何给你的网站加上favicon.ico图标：[1]
  5. 5

    点击“保存”链接即可将图片另存到本地磁盘。然后将文件重命名为favicon.ico。放到网站的根目录，强烈建议放在根目录。

  6. 6

    然后在网站的每一个页面的head标签内加入两行代码。

    <head>

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

    <link rel="bookmark" href="/favicon.ico"/>

    </head>

    如何给你的网站加上favicon.ico图标：[1]
  7. 7

    清空浏览器缓存，刷新网页网址即可看到网站的图标。

    END

注意事项

  • 在线转换之前一定要转换成长宽相等的图片，不然转换成ico之后，图片会被拉伸或者压缩。

  • 在网站的每一个页面的head标签内记得加入两行引用ico的代码

转载于:https://my.oschina.net/wzwahl36/blog/194542

weixin_33778778
关注
给网站设置图标favicon.ico
Selience的博客
12-06 562
场景：网站做好后，放在测试服务器，控制台报错，但页面正常显示 favicon.ico是什么？ 所谓favicon，即Favorites Icon的缩写，顾名思义，便是其可以让浏览器的收藏夹中除显示相应的标题外，还以图标的方式区别不同的网站。 favicon.ico是一个网站必要的吗？ 不是必要的，但是web服务器在网站加载时都会请求favicon.ico这个文件，如果不存在就会报404错误...
如何设计简单的网站Favicon图标？ICO图标制作
xiaobaitongxueya的博客
03-24 1570
Favicon图标一般是指在浏览器中跟随网站URL的图形，今天和大家分享关于favicon图标相关知识以及如何轻松快速在线生成ico格式图标。在这篇文章中，你会了解到什么是favicon图标、为什么要创建favicon图标以及创建favicon图标的工具和一些技巧，一篇指南帮你搞定favicon图标设计。 什么是favicon图标？ Favicon也称为URL图标或网站图标。这些图标非常小（通常为16×16或32×32），并会显示在浏览器窗口和书签中网站网址的旁边，让访问用户可以轻松在其打开的窗口中识别你
怎么给网站添加ICO图标
weixin_33881041的博客
10-18 210
怎么给网站添加ICO图标 现在的网站大多数会在自己的网页上添加属于自己的小logo，进而增加网页的版权性，所以，网站的ico图标的添加也显得尤为重要了 方法如下： 1、将ico文件放在网站根目录 2、在网站页面中head标签内添加 <link rel="shortcut icon" href...
网站添加favicon.ico图标
小白的专栏
08-10 815
在一个公用的头部模板页面中加入以下代码即可   "收藏夹"图标有着它特有的规格：图标的大小为16*16，32*32，48*48三种格式（以像素为单位）， 在收藏夹里出现的是16*16。 favicon.ico文件生成还是有些难度的：它不是标准的位图文件，需要用专门的
添加favicon.ico 的方法
u010225542的专栏
01-08 4293
在网站根目录下放favicon.ico 图标，浏览器会自动去加载。 在页面添加 &lt;head&gt; &lt;link rel="shortcut icon" href="https://xxxx.xx/favicon.ico" type="image/x-icon"&gt; &lt;/head&gt;   ...
26 字母 ICO 图标
03-21
26个字母的ICO图标，是我自己制作的，放到这给大家共享，如果你想把快捷方式设置的醒目些，可以把图标换成这些个，都是红色的
ICO图标 好看的ICO图标文件
06-20
挑选几个ICO图标 好看的ICO图标文件
关于Vue项目中favicon.ico的应用配置&取消favicon.ico请求
daisymao0205的博客
12-15 6066
首先，一般把favicon.ico（固定命名）放在static里，如下图： 在开发环境中，配置webpack.dev.conf.js里的plugins newHtmlWebpackPlugin里加上 favicon:'./static/favicon.ico',相对路径 项目打包部署，便配置webpack.prod.conf.js里的plugins newHtmlWebpackPlugin里加上 favicon:'./static/favicon.ico',相对路径 ...
怎么在html文档标题前加上图标,如何给网页标题栏上添加图标(favicon.ico)
weixin_32440261的博客
06-04 2389
favicon.ico详解：favicon是Favorites Icon的缩写，favicon.ico是指显示在浏览器收藏夹、地址栏和标签标题前面的个性化图标。设置步骤：1. 把做好的favicon.ico图标文件上传到网站根目录，并命名为xxx.icon就可以了；2. 把以下代码放到网页Html代码中的部分：Index说明：1.Icon图标可以直接放到自己的网站根目录，也可以是放在你存放图片的...
如何 更换vue的图标_vue中更换.ico图标报错路径找不到图片
weixin_39856269的博客
12-19 1517
问题描述：vue项目中，想要更换.ico图片，更换完成后刷新页面报错，找不到路径。解决：更换完图片，重新启动下vue项目(npm run dev)就可以啦~ 哈哈哈补充知识：网页title旁边的小图片设置，图片要求格式必须是.ico，附加ico图片转换地址：http://www.bitbug.net在html文件中的标签中加上：在vue项目中，favicon图标是在webpack.dev.conf...
ico图标生成工具
12-19
ico图标生成工具操作简单可以随意提取ICO图标
网页收藏夹显示ICO图标（代码少）
09-03
网页收藏夹中显示的ICO图标是网站的一种标识，它能够为用户在众多的书签中快速识别出特定的网站。这种功能的实现并不复杂，主要依赖于HTML代码中的`<link>`标签。当用户将网页添加到收藏夹时，浏览器会自动获取这个...
对favicon进行base64 编码？
weixin_34387468的博客
12-28 1544
2019独角兽企业重金招聘Python工程师标准>>> ...
设置网站ico图标的两种方法
chenglinquan的博客
09-05 888
方法一：     直接在站点根目录下放入名为：favicon.ico 的图标文件（必须要为 ICO 文件，BMP 及其他格式的图片文件不行）。还有将 favicon.ico 中的 favicon 命名为你网站域名的名称也可以，例如：你网站的域名为：xll.com，你可以将该 ICO 文件命名为：xll.ico 。其IE地址栏图标绝对地址就可以为：http://www.timeshi.com/
springboot 的启动图案配置 和 favicon.ico 小图标和yml 文件使用
xiao/du的博客
11-03 9608
springboot的启动图案为： 更改springboot的启动图案： 在resources下创建banner.txt 默认是这个文件 制作网站  http://patorjk.com/software/taag/#p=display&amp;f=Graffiti&amp;t=Type%20Something%20 把图案复制到banner.txt中  AnsiColorBL...
网页的favicon.ico
weixin_41224687的博客
07-20 1071
打开一个网页，显示在浏览器地址栏左侧的图标，这个就是favicon.ico 1、如何获取？ 以百度为例，打开百度，只需在后面加上/favicon.ico，如图，就能得到百度的图标了。 csdn一样的。，在后面加上/favicon.ico，，就可以拿到csdn的图标。 2、如何使用？ &lt;link rel="icon" type="image/x-icon" href="favic...
用link标签实现 shortcut icon（给网页标题前添加一个小图标favicon.ico）
guxuehua的博客
09-19 3万+
用link标签实现 shortcut icon
网站图标favicon.ico
caoning315629的博客
07-10 3791
一、图标介绍favicon.ico 一般用于作为缩略的网站标志，它显示在浏览器的地址栏、浏览器标签上或者在收藏夹上，是展示网站个性的缩略 logo 标志，也可以说是网站头像,目前主要的浏览器都支持 favicon.ico 图标，如果要让网站看起来更专业、更美、更有个性，favicon.ico 是必不可少的。除此之外，标签式浏览器甚至还有不少扩展的功能，如 FireFox 甚至支持动画格式的 fav...
如何给网站设置favicon.ico图标
热门推荐
赵天铭的博客
06-28 5万+
favicon.ico是什么？ 所谓favicon，即Favorites Icon的缩写，顾名思义，便是其可以让浏览器的收藏夹中除显示相应的标题外，还以图标的方式区别不同的网站。 favicon.ico是一个网站必要的吗？ 不是必要的，但是web服务器在网站加载时都会请求favicon.ico这个文件，如果不存在就会报404错误，并且会记录到错误日志中，所以最好的设置。 favicon.ico怎么...
i标签展示 favicon.ico 图标
最新发布
06-08
通常情况下，我们使用 link 标签来引入网站的 favicon.ico 图标，而不是使用 i 标签。以下是一个引入 favicon.ico 图标的示例代码： ``` <link rel="shortcut icon" href="favicon.ico"> ``` 这段代码将在浏览器的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值