DOM动态添加HTML节点 appendChild、removeChild

pan_junbiao的博客

07-07

1万+

1、函数语法

createElement(name)：方法可创建元素节点，此方法可返回一个 Element 对象。

appendChild(node)：方法在指定元素节点的最后一个子节点之后添加节点，该方法返回新的子节点。

removeChild(node)：方法可从子节点列表中删除某个节点。

elementNode.childNodes：属性返回包含被选节点的子节点的 NodeList。...

为什么要请求favicon.ico文件

06-09

Favicon（即网站图标）是一个网站的标志性图标，通常出现在浏览器标签页和书签栏中。浏览器在加载网站时会默认请求网站上的favicon.ico文件，以便在浏览器标签页和书签栏中显示网站的图标。如果网站没有提供favicon.ico文件，浏览器会不断发送请求，直到超时，从而导致出现上述的错误。因此，为了优化用户体验和避免错误产生，网站应当提供自己的favicon.ico文件。

“相关推荐”对你有帮助么？

非常没帮助

没帮助

一般

有帮助

非常有帮助

提交

pan_junbiao

CSDN认证博客专家

CSDN认证企业博客

码龄14年

暂无认证

456

原创

3297

周排名

55万+

总排名

510万+

访问

等级

3万+

积分

4万+

粉丝

3089

获赞

484

评论

1万+

收藏

私信

关注

热门文章

MySQL字符串的拼接、截取、替换、查找位置

230566

NPOI使用手册

133312

MySQL中IF()、IFNULL()、NULLIF()、ISNULL()函数的使用

128766

JDBC数据库驱动的下载、安装与连接

111523

解决页面favicon.ico文件不存在提示404问题

108553

分类专栏

Spring Cloud

3篇

Elasticsearch

9篇

RabbitMQ

9篇

MyBatis

24篇

Redis

10篇

Shiro

4篇

Spring

18篇

Spring Boot

33篇

Spring MVC

23篇

Spring Data JPA

8篇

Java

67篇

Java Web

35篇

Java应用

14篇

MySQL

47篇

Oracle

26篇

SQL Server

16篇

HTML和CSS

22篇

HTML5和CSS3

JavaScript

24篇

JQuery

18篇

前端应用

5篇

编程应用

48篇

开发工具

17篇

C#/.NET编程

106篇

电脑の爱好者

10篇

Linux

1篇

我の应用

37篇

我の原创

456篇

最新评论

解决页面favicon.ico文件不存在提示404问题

三尺微命 一介书生:

很有帮助，十分感谢

Elasticsearch在Windows系统下的安装

小A敲代码:

可能被防火墙拦截了

SpringBoot使用DevTools实现热部署

xxxxxue:

新版的IDEA

compiler.automake.allow.when.app.running

跑到了 "设置 -> 高级设置`" 中,

高级设置中搜索搜索 allow

HTML中Table表格的使用与漂亮的表格模板

不被定义的~wolf:

你怕是对漂亮有啥误解吧

SpringMVC使用拦截器（Interceptor）实现用户登录校验

m0_64586797:

麻烦问一下那个登录拦截器里的preHandle方法是在请求处理前调用的，里面需要利用请求处理中才设置好的session值进行判断用户是否登录，可以在请求处理前还并没有进行处理，也就是还未设置session值，那它是如何访问成功的呀

您愿意向朋友推荐“博客详情页”吗？

强烈不推荐

不推荐

一般般

推荐

强烈推荐

提交

最新文章

IntelliJ IDEA好用的插件：笔记

JVM内存溢出和内存泄漏的区别

MySQL组合索引（多列索引）使用与优化

2022年9篇

2021年24篇

2020年107篇

2019年136篇

2018年74篇

2017年35篇

2016年21篇

2014年13篇

2013年46篇

2012年37篇

2011年23篇

2010年7篇

目录

目录

分类专栏

Spring Cloud

3篇

Elasticsearch

9篇

RabbitMQ

9篇

MyBatis

24篇

Redis

10篇

Shiro

4篇

Spring

18篇

Spring Boot

33篇

Spring MVC

23篇

Spring Data JPA

8篇

Java

67篇

Java Web

35篇

Java应用

14篇

MySQL

47篇

Oracle

26篇

SQL Server

16篇

HTML和CSS

22篇

HTML5和CSS3

JavaScript

24篇

JQuery

18篇

前端应用

5篇

编程应用

48篇

开发工具

17篇

C#/.NET编程

106篇

电脑の爱好者

10篇

Linux

1篇

我の应用

37篇

我の原创

456篇

目录

评论 5

被折叠的  条评论

为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

祝福语

请填写红包祝福语或标题

红包数量

个

红包个数最小为10个

红包总金额

元

红包金额最低5元

余额支付

当前余额3.43元

前往充值 >

需支付：10.00元

取消

确定

下一步

知道了

成就一亿技术人!

领取后你会自动成为博主和红包主的粉丝

规则

hope_wisdom 发出的红包

打赏作者

pan_junbiao

你的鼓励将是我创作的最大动力

¥1

¥2

¥4

¥6

¥10

¥20

扫码支付：¥1

获取中

扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额

0

抵扣说明：

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

余额充值

favicon.ico学习（一）什么是 favicon.ico，为何我的浏览器会向其秘密发送请求？ - 坤嬷嬷 - 博客园

favicon.ico学习（一）什么是 favicon.ico，为何我的浏览器会向其秘密发送请求？ - 坤嬷嬷 - 博客园

会员

周边

新闻

博问

AI培训

云市场

所有博客

当前博客

我的博客

我的园子

账号设置

简洁模式 ...

退出登录

注册

登录

坤嬷嬷

你必须非常努力，才能看起来毫不费力

博客园

首页

新随笔

联系

订阅

管理

favicon.ico学习（一）什么是 favicon.ico，为何我的浏览器会向其秘密发送请求？

favicon.ico是什么？

所谓favicon，即Favorites Icon的缩写，是指显示在浏览器收藏夹、地址栏和标签标题前面的个性化图标。 以图标的方式区别不同的网站。

favicon.ico是一个网站必要的吗？

不是必要的，当您使用浏览器浏览不同站点时，浏览器将自动发送请求。 如果您的浏览器收到有效 favicon.ico 文件，将显示此图标。 如果未收到，则不会显示特殊图标，会报404错误，并且会记录到错误日志中，所以最好的设置。

favicon.ico怎么设置？

第一种方式：放在根目录

这种方法最简单，在服务器根目录下放一个 favicon.ico 的文件，浏览器发现后就会使用。（把做好的favicon.ico图标文件上传到网站根目录，并命名为xxx.icon就可以了； ）

注：这种方式，ico文件的名称一定要叫：favicon

第二种方法：link标签

在head里面加入代码：

或

或

注：这种方式，ico文件的名称就可任意命名了。

第一种方法设置的是全站的，第二种方法可以针对某个网页单独设置ico（但是该图标的路径一定要使用绝对路径）。

注意，我们直接使用rel="icon"就可以了，现在很多网站依然使用rel="shortcut icon"，这是一种过时的用法，可以被淘汰掉了。

可以直接使用：

favicon的格式一定是ico格式吗？

favicon的格式不一定是ico格式，它可以是png，jpg甚至是gif，不过ico格式是所有浏览器都支持的。

favicon.ico的尺寸有16×16、32×32、48×48，在添加到桌面、任务栏小尺寸的图标就不是很理想了，这就需要多种尺寸兼容各种设备和情况。

favicon.icon文件怎么制作？

简单的方式就是在线制作，推荐网址：ico图标在线制作： http://www.faviconico.org/

如何让网站不去请求favorites icon？ 

在做 H5 混合应用的时候，不希望产生 favicon.ico 的请求。可以在页面的 区域，加上如下代码实现屏蔽：

或者详细一点

补充

Favicon是favorites icon的缩写，亦被称为website icon（网页图标）、page icon（页面图标）或urlicon（URL图标）。Favicon是与某个网站或网页相关联的图标。网站设计者可以多种方式创建这种图标，而目前也有很多网页浏览器支持此功能。浏览器可以将favicon显示于浏览器的地址栏中，也可置于书签列表的网站名前，还可以放在标签式浏览界面中的页标题前。

最初，定义一个favicon的方法是将一个名为“favicon.ico”的文件置于Web服务器的根目录下，Internet Explorer的收藏夹（即书签）可以自动显示该文件。[1] 后来出现了一种更为灵活的方法，即使用HTML来为任何一个网页指示其图标所存储的位置。这种方法是通过在页面的部分添加两个link组件来实现的。这样，任何一个适当大小的（16×16像素或更大）的图像都可以用作favicon。尽管如此，多数情况下仍然使用ICO格式。其他网页浏览器现在也支持PNG（便携式网络图片）格式，和GIF（图形交换格式）动画图像格式。

市面上多数浏览器同时支持上述两种方法。正因此，网络服务器要接受很多对“favicon.ico”文件的请求，即使该文件根本不存在。网站管理员对此很不满，因为这样会增加大量的服务器日志项，并导致很多不必要的磁盘读取和CPU、网络资源的占用。另一个常见的问题是，当清除浏览器的缓存后，favicon可能会消失。

标准化

Favicon功能最早由微软创设，而微软公司的Internet Explorer网页浏览器会对每一个网站都请求favicon。微软支持的link标签不遵从World Wide Web Consortium（W3C，万维网联盟）的HTML建议[1]，因为：

rel属性必须包含一个用空格作分隔符的link类型的列表，所以一个包含两词的link类型不能被遵守标准的浏览器理解。

“.ico”文件类型（一种用于Microsoft Windows上图标的光栅格式）没有一个注册的MIME类型，而且似乎在当时也不能被多数浏览器理解。然而2003年，这一格式在IANA获得注册，其MIME类型是image/vnd.microsoft.icon，进而消除了此问题的第一部分。

Mozilla浏览器通过一种遵从Web标准的方法添加了对favicon的支持。它采用rel="icon"并允许网络设计人员添加任何支持的图像格式的favicon。例如。后来鉴于此功能将被用于所有新内容，多数浏览器都对此功能增加了支持。

根据《HTML 4.01 Specification W3C Recommendation 24 December 1999》，rel属性的取值仅有：

Alternate

Stylesheet

Start

Next

Prev

Contents

Index

Glossary

Copyright

Chapter

Section

Subsection

Appendix

Help

Bookmark

如果要采用其他值，应当在head标签中的profile属性中进行自定义。

指导

过去，为保证favicon出现，网站设计者和开发者采用了多种方法。很难明确地保证favicon可以在所有电脑上显示，即使是用同一版本的一种浏览器。

下列代码另一个局限就是它把favicon关联到了某个特定的HTML或XHTML文档上。为避免这一点，favicon.ico文件应置于根目录下。多数浏览器将自动检测并使用它。

建议包含以下两行HTML代码：

然而，只有第一行是必须的，因为“shortcut icon”字符串将被多数遵守标准的浏览器识别为列出可能的关键词（“shortcut”将被忽略，而仅使用“icon”）；而Internet Explorer将会把它作为一个单独的名称（“shortcut icon”）。这样做的结果是所有浏览器都可以理解此代码。只有当希望为新浏览器提供另一种备用图像（例如动画GIF）时，才有必要添加第二行。

在HTML中，link组件必须在head组件里（在和之间）。

对于XHTML，link必须使用“ />”结束（或“>”），而不可以使用“>”结束。

href可以，但不必指向/favicon.ico的位置。它可以指向任何URL。

图像通常可以使用任何被浏览器支持的图像格式。

.ico文件格式通常可以被所有可以显示favicon的浏览器读取。

设置服务器，以发送正确的MIME标识：

ICO 文件 image/vnd.microsoft.icon（或者亦可出于兼容性原因使用image/x-icon。然而最好使用IANA注册的MIME类型，因为多数主流浏览器现在支持它）

GIF 文件 image/gif

PNG 文件 image/png

使用适当的分辨率和色深。

ICO：包括多种分辨率（最常使用的是16×16和32×32，Mac OS X有时使用64×64和128×128）以及位深（比特每像素）（多数使用4、8、24 bpp，即16、256和1600万色）。

GIF：使用16×16，256色。

PNG：使用16×16，256色或24位。

注意：当favicon.ico被置于文档根目录时，将会被一些不处理link组件的浏览器找到，即使没有您的站点上没有指向它的链接。

参考

https://zh.wikipedia.org/wiki/Favicon

https://www.zhangxinxu.com/wordpress/2019/06/html-favicon-size-ico-generator/

posted @

2020-07-29 18:31 

坤嬷嬷 

阅读(23660) 

评论(1) 

编辑 

收藏 

举报

会员力量，点亮园子希望

刷新页面返回顶部

公告

Copyright © 2024 坤嬷嬷

Powered by .NET 8.0 on Kubernetes

favicon.ico Generator

favicon.ico Generator

Create New FaviconImport ImageLatest FaviconsTop Rated FaviconsLoginRegister

Search

Frame 1 of 1   

0.05 secs

0.1 secs

0.2 secs

0.3 secs

0.4 secs

0.5 secs

0.6 secs

0.7 secs

0.8 secs

0.9 secs

1 sec

1.5 secs

2 secs3 secs4 secs5 secs6 secs7 secs8 secs9 secs10 secs11 secs12 secs13 secs14 secs15 secs16 secs17 secs18 secs19 secs20 secs

Previous

Next  

Clear Frame

Append New Frame

Copy Previous Frame

Delete Frame

animate preview

loop forever

stop at last frame

2 iterations3 iterations4 iterations5 iterations6 iterations7 iterations8 iterations9 iterations10 iterations11 iterations12 iterations13 iterations14 iterations15 iterations16 iterations17 iterations18 iterations19 iterations20 iterations

Don't Use Animation

Use Animation

Color Picker

0084FF

Transparency

Last Used Colors

transparent pick existing color moveHow does it work ?Choose a color

Click on the squares and paint your logo

Download when you are finished

Put the favicon.ico file into your webserver directory

Optionally publish it under the CC (Creative Commons) licensePreviewFavicon in original size:

⇓ Download Favicon ⇓Publish under an open license

Tag CloudFavicon Flower Letter Logo Love Star White animated animation arrow art black blog blue brown cat color com cool cross cute design face favicon flag free fun funny game games green heart icon letter logo love money music online orange pink purple radio rainbow red smile tree web white yellow

© 2024 Xoron GmbH

- Home

- About us

- Privacy

- Terms and Conditions

- Contact

Favicon生成 - 在线工具

Favicon 是怎么设置的？ - 知乎

Favicon 是怎么设置的？ - 知乎首页知乎知学堂发现等你来答​切换模式登录/注册网页设计HTMLFaviconFavicon 是怎么设置的？知名网站都有各自的logo，在打开网页标签页上也有相应的小图标。其中我已知的设置方法是下面这个： (1)网站根目录下的 favicon.ico 文件；…显示全部 ​关注者27被浏览63,635关注问题​写回答​邀请回答​好问题​1 条评论​分享​7 个回答默认排序CSS魔法​ 关注维基百科说得很详细了。http://zh.wikipedia.org/wiki/Favicon发布于 2012-06-15 09:49​赞同 1​​添加评论​分享​收藏​喜欢收起​南极WEB、APP 服务端工程师， 喜户外运动和摄影。倾向于简洁回答问题。​ 关注直接在根目录下放置 favicon.ico 文件，浏览器即可自行发现并使用，其他位置需要 。所以这段代码不是必须的。发布于 2012-06-14 11:07​赞同 4​​2 条评论​分享​收藏​喜欢

免费Favicon图标生成工具：选择图标或使用自己的图片

免费Favicon图标生成工具：选择图标或使用自己的图片

我们基于严格的测试和研究对服务提供商进行排名，同时也会考虑用户反馈以及我们与提供商之间签订的商业协议。本页面包含联盟链接。广告披露

CNY

评论

按类别选择

网站建设平台

网站托管

项目管理软件

标志设计服务

自由职业网站

邮件营销服务

着陆页创建器

表单构建器

社交媒体工具

网站建设平台

网站托管

项目管理软件

标志设计服务

自由职业网站

邮件营销服务

着陆页创建器

表单构建器

社交媒体工具

按顶级提供商选择

网站建设平台

Wix

SITE123

SquareSpace

Webador

1&1IONOS 的建站工具

查看最佳服务

网站托管

Hostinger

1&1 IONOS

InterServer

Nexcess

Kinsta

查看最佳服务

项目管理软件

monday.com

ClickUp

Smartsheet

Jira

Teamwork

查看最佳服务

标志设计服务

Fiverr Logo Design

Wix Logo Maker

Looka

DesignCrowd

99designs

查看最佳服务

自由职业网站

Fiverr

UpWork

Toptal

GrowTal

DesignCrowd

查看最佳服务

邮件营销服务

Brevo（此前为 Sendinblue）

GetResponse

Constant Contact

Active Campaign

MailChimp

查看最佳服务

优惠券99+

网站建设平台

Wix (4)

SITE123 (4)

SquareSpace (4)

Webador (4)

1&1IONOS 的建站工具 (4)

查看最佳服务

网站托管

Hostinger (4)

1&1 IONOS (2)

InterServer (4)

Nexcess (4)

Kinsta (1)

查看最佳服务

标志设计服务

Fiverr Logo Design (3)

Wix Logo Maker (2)

Looka (3)

DesignCrowd (3)

99designs (1)

查看最佳服务

邮件营销服务

Brevo（此前为 Sendinblue） (3)

GetResponse (5)

Constant Contact (2)

MailChimp (1)

Benchmark (2)

查看最佳服务

工具

热门工具

压缩PNG / JPG

二维码生成器

分享链接生成器

域到期日检查器

网站停止营运与否

网址批量打开工具

查看所有工具

网站管理员工具

Robots.txt检查器

XML站点地图验证器

网页图标生成器

响应检查器

SSL检查器

域到期日检查器

性能工具

Gzip压缩

重定向检查器

压缩PNG / JPG

网站停止营运与否

虚拟图像生成器

A/B 测试计算器

二维码生成器

操作工具

我的屏幕分辨率

网址批量打开工具

分享链接生成器

JS＆CSS缩小机

乱数假文产生器

AMP验证器

博客

CNY

热门币种

€ 欧元US$ 美元£ 英镑AU$ 澳元

所有币种

AR$ 阿根廷比索AU$ 澳元R$ 巴西雷阿尔BGN 保加利亚新列弗CA$ 加元CL$ 智利比索CNY 人民币COL$ 哥伦比亚比索Kč 捷克克朗DKK 丹麦克朗E£ 埃及镑€ 欧元HK$ 港币HRK 克罗地亚库纳HUF 匈牙利福林Rs. 印度卢比Rp 印尼卢比₪ 以色列新谢克尔¥ 日元JOD 约旦第纳尔KRW 韩元Mex$ 墨西哥比索NT$ 智利比索NZ$ 新西兰元NOK 挪威克朗zł 波兰兹罗提£ 英镑lei 罗马尼亚新列伊RUB 俄罗斯卢布SAR 沙特阿拉伯里亚尔ZAR 南非兰特S$ 新元SEK 瑞典克朗CHF 瑞士法郎THB 泰铢TL 新土耳其里拉AED 阿联酋迪拉姆US$ 美元UAH 乌克兰赫夫米VND 越南盾

选择您的语言

简体中文

English

Dansk

Deutsch

Español

Français

Indonesia

Italiano

Magyar

Nederlands

Norsk bokmål

Polski

Português

Română

Suomi

Svenska

Tiếng Việt

Türkçe

Česky

Ελληνικα

Русский

Українська

Български

ไทย

日本語

한국어

עברית

العربية

Hrvatski

我们基于严格的测试和研究对服务提供商进行排名，同时也会考虑用户反馈以及我们与提供商之间签订的商业协议。本页面包含联盟链接。广告披露

网页图标生成器

将图像放在这里

jpg / png / gif

最大尺寸5 MB

请上传一份文件

文件类型不支持

此栏位必填

文件超过5MB

或

从我们的免费图库中选择一个图标

彩色图标

黑白图标

颜色

经典图标 16x16

各种尺码！ IOS、Android等

设置

生成！

服务器错误！请稍后再试

captcha错误。请再试一次

我们基于严格的测试和研究对服务提供商进行排名，同时也会考虑用户反馈以及我们与提供商之间签订的商业协议。本页面包含联盟链接。广告披露

最新的使用者评论

什么是网站图标（Favicon）？

Favicon也称为URL图标或网站图标。这些图标非常小（通常为16×16或32×32），并会显示在浏览器标签和书签中网站网址的旁边，让访问者可以轻松在其打开的标签中识别您的网站。

为什么我要使用网站图标生成器？

我们的网站图标生成器可以立即为您提供PNG格式且尺寸合宜的网站图标，因此您无需手动调整网站徽标的大小即可使用。网站图标对于品牌塑造来说确实非常重要。而借助我们的网站图标生成器，您保证可以获得一个经过完美缩放的图标，并让您的网站易于访问者识别。完全没有隐藏费用！

我如何为我的网站添加网站图标？

如何将网站图标添加到您的网站取决于您使用的平台。例如，如果您使用WordPress，则可以在主题自定义程序中（通常在“网站标识”部分中）上传网站图标。其他网站生成器也具有简单的网站图标上传功能。

如果您要手动为网站图标插入代码，则需要将创建的图标上传到您的网站。接下来，请在浏览器中输入http://websitename.com/favicon.png，以检查是否上传成功。

然后，您需要在页面的HEAD部分和网站的主索引页面中为网站图标添加以下HTML代码：

如果您使用网站缓存，则需要先清除缓存，网站图标才会显示。

我的网站图标适用于所有浏览器吗？

这个问题简单的答案是：对。较早期的浏览器（例如Internet Explorer）需要使用ICO文件格式，但是现在所有的浏览器（包括Firefox、Chrome和Safari）都支持PNG文件。

立即使用免费的网页图标生成器

我们基于严格的测试和研究对服务提供商进行排名，同时也会考虑用户反馈以及我们与提供商之间签订的商业协议。本页面包含联盟链接。广告披露

163625

163625

喜欢这个工具？给个好评！

4.7

(由1356 用户投票)

您已投票！撤销

请使用后再评分哦

此栏位必填

Maximal length of comment is equal 80000 chars

评论最短10字

电子邮件必填

电子邮件不正确

提交

很高兴你喜欢！

与你的朋友分享！

或在此撰写评论

评论

网站建设平台

网站托管

标志设计服务

邮件营销服务

自由职业网站

着陆页创建器

表单构建器

社交媒体工具

项目管理软件

工具

压缩PNG / JPG

二维码生成器

分享链接生成器

域到期日检查器

网站停止营运与否

网址批量打开工具

信息

关于

博客

新闻

联络我们

常见问题

公开声明

网站地图

测试方法

隐私政策

使用条款

DMCA 政策

追踪我们

© 2024 WebsitePlanet.com. 版权所有。

此页面尚未翻译完成 . 如果你想自愿帮忙翻译内容，请通过联系我们页面与我们联系

让我来帮忙

真是可惜

The best Favicon Generator (completely free) - favicon.io

The best Favicon Generator (completely free) - favicon.io

ConverterGeneratorEmojisTutorialsLogosTweetBuy me a coffee

Favicon Generator

The only favicon generator you need for your next project. Quickly generate your favicon from text, image, or choose from hundreds of emojis.

Favicon GeneratorsImage

If you already have an image or logo that you want to use for your

favicon then use this tool to convert your image to the proper

favicon format.

Text

If you don't have a logo or image for your website and want to

generate a favicon from scratch then use this tool to generate

your favicon.

Emoji

Want to use an emoji for your favicon? Choose from a list of

hundreds of emojis to generate a favicon for your website.

ResourcesWhat is a favicon?

What is a favicon, why do I need one, and how can I generate

one?

Install: favicon.ico

How to install your favicon.ico file on your website.

Install: favicon.png

How to install your favicon.png file on your website.

Squarespace Favicon

How do I add a custom favicon to my Squarespace website?

Logo Generator

Generate a logo by configuring the settings below. Download

your logo in a variety of layouts and formats.

Created by:

John SorrentinoCopyright 2023About

I built Favicon.io because creating a favicon should be a simple

process. No other favicon generator or favicon creator can make a

well designed favicon from text. If you like favicon.io or have a

suggestion feel free to

say hello. Feedback is much appreciated!

Built WithBulmaHuebeeTwemojiCenter.jsFavicon.jsResourcesFavicon ConverterFavicon GeneratorEmoji FaviconsLogo GeneratorContactContact UsTwitterPrivacy PolicyTerms of Use

Favicon & App Icon Generator

Favicon & App Icon Generator

Toggle navigation

Favicon.ico & App Icon Generator

From Dan's Tools

Web Dev

HTML/JS/CSS PlaygroundHTML Color CodesCSS FontsOnline Diff Tool.htaccess GeneratorRegEx TestingRGB & HEX Color ExplorerRGB to HEX Color ConverterTimeStamp ConverterWebsite Speed TestFavicon.ico & App Icon GeneratorOnline Image EditorCSS Sprite GeneratorKeyword Tool

Conversion

Data

CSV To HTML ConverterCSV To JSON ConverterCSV To TSV ConverterCSV To XML ConverterJSON To CSV ConverterJSON To HTML ConverterJSON To TSV ConverterJSON To XML ConverterXML To CSV ConverterXML To HTML ConverterXML To JSON ConverterXML To TSV ConverterConvert Files

Numbers

Binary ConverterBinary To Decimal ConverterBinary To Hex ConverterBinary To Octal ConverterUnit ConverterDecimal To Binary ConverterDecimal To Hex ConverterDecimal To Octal ConverterHex To Binary ConverterHex To Decimal ConverterHex To Octal ConverterData Size ConverterOctal To Binary ConverterOctal To Decimal ConverterOctal To Hex Converter

Strings

Binary To String ConverterHex To String ConverterHTML Entities EscapeHTML Entities UnescapeString To Binary ConverterString To Hex ConverterStrip and Remove HTML TagsStrip and Remove XML TagsWord CounterXML Entities EscapeXML Entities Unescape

Encode/Decoders

Base64 DecodeBase64 EncodeMD5 Hash GeneratorSHA-1 Hash GeneratorSHA-256 Hash GeneratorSHA-512 Hash GeneratorURL Encode/Decode

Formatters

CSS FormatterGO FormatterHTML Beautifier & FormatterJavascript FormatterJavascript ObfuscateJSON Formatter & BeautifierJSON EditorJSON ValidatorPerl FormatterPHP FormatterPython FormatterRuby FormatterSQL FormatterXML Formatter & BeautifierCSS MinifyJavascript MinifyJSON Minify

Internet

Email ValidatorIs It Up Or DownDefault Router SettingsUser ManualsWhat is my IP

JoinLogin

Favicon & App Icon Generator

Generate your favicon.ico

favicon.ico Editor

What are Favicons?

Upload an image (PNG to ICO, JPG to ICO, GIF to ICO) and convert it to a Windows favicon (.ico) and App Icons. Learn more about favicons.

Image:

Generate icons for Web, Android, Microsoft, and iOS (iPhone and iPad) Apps

Generate only 16x16 favicon.ico

Maintain Image Dimensions (don't resize to be square)

Include your favicon.ico in the public gallery.

Browse the Icon Gallery

Keyword:

Letters: A B C D E F G H I J K L M N O P Q R S T U V W X Y Z 1 2 3 4 5 6 7 8 9 ! # $ & Colors:

What are Favicons?

Favicons are small 16x16 icon files that are displayed next to the URL of your site in a browser's address bar. Additionally they're often displayed next to the name of your site in a user's list of open tabs and bookmark listings making it easier for the user to quickly identify amongst other sites.

What are App Icons?

App Icons are the images you press on your smartphone to launch an application. As newer phones are released with higher resolution screens, higher resolution app icons are needed. Developers still want to maintain support for the older phones with lower resoltion so when you create an app icon you need to create several size variations of the same image. This is true for all smartphones like the iPhone and Android, and even tablets like iPad.

What does this tool do?

Although many modern web browsers support favicons saved as GIFs, PNGs or other popular file formats all versions of Internet Explorer still require favicons to be saved as ICO files (a Microsoft icon format). This tool provides an easy way to convert any GIF, PNG or JPEG to ICO which is supported by all modern web browsers. It also enables you to create favicons from scratch via a handy online editor. Additionally the editor lets you manually tweak generated favicons to ensure the best possible result.

Using a favicon

After generating a favicon with this tool download and save to the root directory of your site. Then include the following code in the head of your HTML document.

Related Tools: Online Image Editor HTML Color Codes CSS Fonts

Follow @danstools00

© 2014-2019 Dan's Tools | About | Privacy | Tesla Referral Code

×Close

Login

If you don't already have an account, Register Now

Close

×Close

Join

Join to access discussion forums and premium features of the site.

Close

×Close

Please Share!

Thank you for using my tool. If you could share this tool with your friends, that would be a huge help:

Tweet

Or follow us to learn about our latest tools:

Follow @danstools00

Close

Favicon ICO图标制作和下载 - 15款最好的免费在线Favicon.ico制作转换工具 - Web360.org

Favicon ICO图标制作和下载 - 15款最好的免费在线Favicon.ico制作转换工具 - Web360.org

跳至内容

主菜单

网站制作教程菜单切换

如何建立网站

如何建立博客

如何建立网上商城

如何注册域名

网站上线检查清单

建站工具菜单切换

WordPress主机

WordPress主题

WordPress插件

自助建站系统

邮件营销软件

Logo制作工具

Favicon制作工具

服务

常见问题菜单切换

全球有多少个网站

如何选择域名

网站制作费用

网站维护费用

联系我们

最佳Favicon ICO图标制作工具

15款最好的免费在线Favicon.ico制作转换工具

Zac

Web360编辑

上次更新时间：2021年3月26日

网站是你的品牌策略的最终执行者，对于将访问者转化为客户起着至关重要的角色，所以任何小细节都不应忽略。这包括了网站的图标，免费的网站图标制作工具可以帮助你制作这些精美图标。网站图标（也称为Favicon）是出现在浏览器窗口选项卡中网站标题旁边的小图像图标。你也可以使用它作为桌面应用程序图标，所以需要至少几个不同大小的图标ICO类型文件。通常，你也可以将一个PNG文件设置为图标。网站图标是必不可少的，因为用户总是不断地在多个网站的标签中搜索信息。图标帮助用户更快地识别内容和品牌，以获得更吸引人的用户体验。下面介绍15款免费的在线图标制作工具，以及更多关于如何创建和安装网站图标的细节。让我们开始吧。图标ICO文件的最佳实践想要创建favicon图标时，第一步是了解更多关于它们的需求和最佳实践的信息。“favicon”这个词是“favorite icon”的缩写，这些图标就像今天一样，显示在浏览器顶部的是一个网站标题。但是，它们最初是在用户将网站添加到“收藏夹”时显示的。现代浏览器将此文件夹称为书签。图标图标必须具有一定规格的大小。否则，浏览器和其他设备将不会使用它们。需要的最小尺寸是：浏览器为16×16像素桌面任务栏为32×32像素桌面应用图标图标的96×96像素适用于iOS和Android设备的180×180像素请记住，你可以在16×16像素和32×32像素之间进行选择。如果你不太担心品牌，选择其中一个图像大小应该足够了。有关详细信息，请查看Favicon备忘单。制作一个Favicon图标时，最好遵循以下的最佳实践：它们应该简单且不要过分美化，以便在小尺寸的情况下也很容易看到。从配色方案中选择一种或两种颜色。最多不超过三种颜色。图标应该是8位或24位的颜色。图标的设计不应该包含太多的线条或字母。虽然可以设置为透明的背景，但需要注意的是苹果设备不允许这样做。Favicon图标应与你现有的品牌和Logo保持一致性。15款最佳免费图标制作工具如果你想创建自己的图标，或者只想上传图像并将其调整为合适的大小并转换为ICO图像文件，可以使用以下几款免费的图标制作工具。没有特别的顺序，因为它们都是不错的选择，你只需要动动鼠标便可以创建一个favicon图标。使用这些在线工具制作图标后，就可以免费下载和使用了。1. Favicon.io

使用这款免费的图标制作工具，你可以用文字、图像或表情符号创建图标。使用基于文字的选项，可以选择背景颜色和不同的形状，多种字体和颜色以及不同的大小。 Favicon.io可以使用800多种Google字体。或者，通过上传文件，设置调整适当的大小，生成网站图标。也可以从选项列表中下载表情符号图标。生成的网站图标适用于所有浏览器和多个平台。2. Favicon-Generator.org

这款免费的网站图标制作工具，可以选择上传图像文件，并在浏览器的标准大小16×16 px或适合Android、Microsoft和iOS的大小之间进行选择。你可以保留当前图像尺寸，而不必将其调整为正方形。注意：保持此选项为选中状态，未选中状态可能会使网站图标的变形。所以，最好确保图像非常接近正方形。3. Real Favicon Generator

这款免费的图标制作工具是为数不多的包含浏览器模拟预览功能的图标制作工具之一，可以看到图标调整大小和转换后的实际样子。还可以获得所有浏览器、平台和大多数技术指标的参数。但是，这款图标制作工具只有转换为Favicon图标这一个选项。4. Favicon.cc

使用此款免费的图标制作工具，可以上传图像制作图标，也可以通过用鼠标绘制图形来创建自己的图标。可以通过颜色选择器设置想要使用的颜色，以及设置图标的透明度。还有一个选项可以制作带有动画效果的Favicon图标。此外，还可以设置动画循环播放，编辑和删除帧等设置。该图标工具还具有预览模式，制作就绪后就可以看到其实际外观。5. FaviconGenerator.com

这是一款简单的免费图标制作工具，可以上传图片，然后选择你想要的大小。这是一个非常基本的功能，当你想快速创建一个图标而不需要繁琐的设置和操作时，这是一个不错的选择。这款工具还可以制作适用于Apple touch设备的retina favicon。这确实需要一些复杂的工作，但是所有操作步骤均在其网页上进行了详细说明。6.Favicomatic

Favic-o-Matic可以生成ICO和PNG（也就是透明的）图标。你可以使用此款免费的图标制作工具上传图像，然后选择是下载16×16像素和32×32像素的ICO文件，还是选择包含与所有设备兼容的不同大小的ICO文件。此外，还有一些高级设置，比如可以编辑背景色和一些高级兼容性选项。7. Ionos Favicon Generator

Ionos Favicon Generator可以让你用鼠标绘制一个Favicon图标，使用缩写、或上传图像来制作Favicon图标。可以制作出一个可以在所有浏览器和设备上显示的图标。它还有预览功能，可以在其中快速查看图标的外观。8. Website Planet Favicon Generator

这款免费的图标制作工具提供了上传图片的选项（JPG、PNG或GIF），或者从一个免费的预制的图标库中选择。需要注意的是，如果你想为自己的企业创建图标图标，可能想要创建一个与你的logo类似的图标。这样做可以提供更有一致性的品牌外观，更容易记住。因此，选择预先制作的图像可能不是一个很好的选择，因为其他网站可以使用和你完全相同的图像。9. RedKetchup Favicon Generator

对于此款工具，可以选择上传图片或使用文字创建图片。如果使用文字创建图标，需要进行很多设置，包括更改字体、字体大小、背景颜色、文本颜色，并且可以调整比例，可以在正方形和圆形之间切换边框。因此，可以缩放边框以使圆角具有不同的弧度。此外，还有用于跨设备兼容性的更多选项。10. Genfavicon

这款免费的图标制作工具功能独特，当你上传图片时，可以选择裁剪使其成为一个图标。还有一个预览窗口，可以看到新图标在用户的浏览器中的显示情况。你可以选择的尺寸大小：16×16、32×32、48×48、64×64和128×128像素。11. FavIcon.pro

这款免费的网站图制作工具是另一个快速选项。上载图像制作图标时，可以选择要使用的图像尺寸：16×16、32×32、48×48、64×64和128×128像素。FavIcon允许将JPG、GIF、PNG转换为ICO类型文件，你可以使用它来转换应用程序图标、桌面图标和FavIcon到你的网站。12. Faviconr

Faviconr是另一款操作简单快捷的免费favicon制作工具。上传一个JPG、PNG或GIF文件，并选择是否想要透明的背景（如果源文件也是透明PNG或GIF文件，则只能创建透明图标）。单击按钮，保存文件，这样就完成了。13. ICOConvert

这款免费的网站图标制作工具非常特别，上传要用于制作网站图标的图像后，你可以对其进行裁剪和不同样式设置。一些选项可以将边框设置为不同的形状，包括正方形、心形、偏心正方形、圆形、倾斜的心形或正方形，以及选择白色边框的选项。你还可以选择将图标下载为ICO或PNG文件，并具有多种尺寸选择，包括16×16、24×24、32×32、48×48、64×64、96×96、128×128、192×192和256×256像素。莫还可以选择为Windows 7、8，Vista和XP计算机创建图标。这款免费的网站图标制作工具还包括用于压缩和将文件从PNG转换为SVG的功能选项。14. Wizlogo Favicon Generator

Wizlogo是免费网站图标制作工具的另一个简单快速的选项。你需要做的就是选择要上传的图像，然后选择32×32 ICO文件或网站、iOS、Windows和Android的图标。这样就完成了。Wizlogo也可以用作免费Logo制作工具。15. FavICO

FavICO是免费网站图标制作工具的最后一个选项。上传你要用来制作图标的图像。然后，在16×16或32×32像素大小之间选择，然后按create。就是这样完成了。如何安装网站图标使用任何一款免费的图标制作工具制作图标后，就可以开始进行安装，让图标显示在网站上。对于非WordPress网站，首先，将Favicon图标上传到服务器的根目录。然后，从index.html文件的标记开始，使用下面的W3C官方代码：...

type="image/png"

href="https://example.com/myicon.png">

...

修改“https://example.com/myicon.png”为你的实际Favicon图标链接。同时，修改“image/png”为你实际使用的图像文件的类型。以下是在创建Favicon图标时兼容的图像类型，用来替换“ image / png”：PNG图片文件– image / pngGIF图像文件– image / gifICO图像文件– image / x-iconSVG图像文件– image / svg + xml不要忘记保存文件。通常，上面列出的免费网站图标制作工具还会生成所需的代码，这些代码与所选择的设置有关，例如动画效果或兼容性。在WordPress中自动安装Favicon图标对于WordPress网站，制作Favicon图标可以不使用上面列出的免费图标工具。你可以使用任何宽度至少为512像素的图片。要自动安装它，需要登录到WordPress网站，然后在管理控制台中访问外观>自定义。加载自定义程序后，单击左侧菜单中的“站点标识-Site Identity”。然后，在站点图标下，单击“选择图像”。

在弹出窗口中，单击“上传文件”选项卡，然后单击“选择文件”。从本地计算机中选择所需的图像。单击选择，然后裁剪图像（如果需要），然后单击裁剪图像。或者，可以按原样保留图像，然后单击“跳过裁剪”。然后，通过单击自定义程序中的“发布”按钮来保存更改。手动安装WordPress站点的图标要手动安装WordPress的ICO文件的网站图标，请先将网站图标上传到你网站的根目录以及当前主题的根目录。确保文件名为“ favicon.ico”，否则将不会显示Favicon图标。但是某些版本较旧的浏览器可能不会加载网站图标，你需要采取其他方法。通过SFTP或主机提供商的控制面板找到header.php文件。将其打开，然后搜索与以下示例相似的代码行：然后，将其替换为下面的代码，或者添加以下代码：保存文件即可完成操作。总结像favicon这样的小图标看起来微不足道，但它有助于品牌知名度和用户体验。这些免费的图标制作工具可以创建属于你自己的Favicon图标并添加到网站上。我们还有什么遗漏的吗？请在下方留言评论。

相关内容：

最佳VPS主机测评

网页设计软件

最佳电子邮件营销服务

15款最佳免费图标制作工具

WordPress网站必备的12款插件

最佳WordPress虚拟主机

最佳自助建站系统

15款最好的免费Logo在线制作工具

文章导航

← 前一篇文章后一篇文章 →

发表评论 取消回复您的电子邮箱地址不会被公开。 必填项已用*标注在此输入...名字*

电子邮箱*

网站

在此浏览器中保存我的显示名称、邮箱地址和网站地址，以便下次评论时使用。

Δ

Copyright © 2024|Web360.org 维度(株)旗下网站

网站地图

关于我们

专栏