Web网页、安卓、ios、平板等的网站图标制作Favicon.ico

本文介绍如何制作准确的制作网站的图标、软件的图标等。

演示:

1,电脑浏览器的网站图标

-查看

Web网页、安卓、ios、平板等的网站图标制作Favicon.ico

2,手机浏览器的网站图标

Web网页、安卓、ios、平板等的网站图标制作Favicon.ico

3,ios的软件图标

Web网页、安卓、ios、平板等的网站图标制作Favicon.ico

4,安卓的软件图标

Web网页、安卓、ios、平板等的网站图标制作Favicon.ico

5,mac的safari图标

Web网页、安卓、ios、平板等的网站图标制作Favicon.ico

实现方法:

1,工具:

Favicon Generatorhttps://realfavicongenerator.net/

Web网页、安卓、ios、平板等的网站图标制作Favicon.ico

2,访问链接:

点击select your Favicon image,选择logo 点击打开。

Web网页、安卓、ios、平板等的网站图标制作Favicon.ico

3,进度条跑完之后会出现下面页面,可以调整相关的属性,一般可以不调。

Web网页、安卓、ios、平板等的网站图标制作Favicon.ico

4,滚动到底部

Web网页、安卓、ios、平板等的网站图标制作Favicon.ico

制作图标的选项,可以根据自己的需求去选择,分别对应着 路径、版本/刷新、压缩、压缩算法、软件名称、附加文件

5,这里选择了一个软件名称:

My简历 点击生成

Web网页、安卓、ios、平板等的网站图标制作Favicon.ico

6,生成结束

Web网页、安卓、ios、平板等的网站图标制作Favicon.ico

方式有很多种,这里主要以html5演示

这里提示了一共需要四步完成:1下载生成好的包,2放在网站的对应位置,3将代码复制到网站的html的head部分,4网站部署后可以测试一下

7,下载解压后

Web网页、安卓、ios、平板等的网站图标制作Favicon.ico

将这些文件放在网站的index.html的同级目录下 即可。然后将网站部署就可以了 (目录的位置:在第五部的时候可以通过路径选项改变)

二、测试网站的favicon

1,入口

在首页的

Web网页、安卓、ios、平板等的网站图标制作Favicon.ico

Web网页、安卓、ios、平板等的网站图标制作Favicon.ico

两个地方都可以

2,输入网站:

Web网页、安卓、ios、平板等的网站图标制作Favicon.icoWeb网页、安卓、ios、平板等的网站图标制作Favicon.ico

在测试一个csdn博客的:

Web网页、安卓、ios、平板等的网站图标制作Favicon.ico

Web网页、安卓、ios、平板等的网站图标制作Favicon.ico

看到csdn的那么多红的

再测一下GitHub的吧:

Web网页、安卓、ios、平板等的网站图标制作Favicon.ico

Web网页、安卓、ios、平板等的网站图标制作Favicon.ico

gitHub的好很多了

 

微信小程序【My简历】有需要的可以了解一下:张三的简历

Web网页、安卓、ios、平板等的网站图标制作Favicon.ico