在iphone手机上，网站可以添加到主屏幕，默认情况下，一个网站被添加到主屏幕时，默认显示的是网站截图，如何才能显示成我们自己想要设置的图标呢？我在实际工作中遇到了这个需求，将实现步骤总结如下：
1.制作4中不同尺寸的图片:
<!--适用于 Retina 屏的 iPad-->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="./static/apple-touch-icon-precomposed-144x144.png">
<!--适用于 Retina 屏的 iPhone-->
<link rel="apple-touch-icon-precomposed" sizes="120x120" href="./static/apple-touch-icon-precomposed-120x120.png">
<!--适用于非 Retina 屏的 iPad-->
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="./static/apple-touch-icon-precomposed-72x72.png">
<!--适用于非 Retina 屏的 iPhone-->
<link rel="apple-touch-icon-precomposed" href="./static/apple-touch-icon-precomposed-57x57.png">
2.vue项目中，需将4张图片放到static文件中
3.在index.html的<head></head>之间添加以上代码
4.部署上线
5.完成上述步骤后，在safari中打开网址
你的桌面上就会出现一个类似app的图标了，大功告成了，是不是很简单呢。
4455
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
