教你如何修改手机图标

首先弄一个图片,用工具转成ico格式的图标,放到根目录下,起名字叫favicon.ico就可以了,但是发现好像不能保存到桌面上,做成64X64就应该可以了。

教你如何修改手机图标_第1张图片
参考图


教你如何修改手机图标_第2张图片
教案3

参考资料:https://wklchris.github.io/Advanced-blog-skills.html#带-jekyll-语法的-html-代码

作成64x64的应该就可以了

http://www.bitbug.net


制作图标工具

用这个工具导

最大可以生成128x128的

教程1:

https://zhangge.net/4344.html

https://tool.lu/favicon/

弄一个图片,用工具转成ico格式的图标,放到根目录下,起名字叫favicon.ico就可以了

作成64x64的应该就可以了

http://www.bitbug.net

用这个工具导


教程1:

手机浏览器添加到主屏幕(桌面)的图标设置以及WebApp模式

作者:unclealan • 2017年05月12日

在手机浏览器上打开某个网站的时候,菜单中有这么一个选项"添加到主屏幕",当然不同的手机改菜单选项的名字有所不同基本上叫"添加到桌面"、"添加到桌面导航" 之类的, 请自行理解其中意思。


教你如何修改手机图标_第3张图片
教你如何修改手机图标_第4张图片

这样,主屏幕(桌面)上就会有一个该网站的快捷键图标, 点击该图标,就会直接打开网站,类似于APP。

添加到主屏幕的默认图标会根据你的网站自动生成,因而不同平台下(iOS、Android、WindowsMobile)会有所不同,我们能否统一设置主屏幕图标呢? 答案是肯定的。

图标的格式建议选择png

设置主屏幕图标

在中添加如下代码 改代码,在ios和安卓下都可以支持该设置。 测试时,ios平台下使用的是Safar浏览器, Android下使用的是Chrome浏览器。

设置WebApp模式

从主屏图标进入网站会隐藏地址栏和状态栏, 全屏(content="yes")

WindowsMobile中的设置

windows手机中也有类似于添加到主屏幕的功能,称之为“磁贴”

IOS中相关设置

以上两项可以设置app的名字和顶栏的颜色 有黑色、白色、半透明黑色,经测试只有ios下支持。

总结

综上所述,考虑到兼容性,我们可以这么来写

手机浏览器添加到主屏幕(桌面)的图标设置以及WebApp模式

参考资料“http://www.unclealan.cn/index.php/front/73.html

但是最后需要在_includes/head.html里面添加内容

教你如何修改手机图标_第5张图片

你可能感兴趣的:(教你如何修改手机图标)