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