在iphone手机上，网站可以添加到主屏幕。 默认情况下，一个网站被添加到主屏幕时，默认显示的是网站截图，如何才能显示成我们自己想要设置的图标Logo和隐藏底部栏，让这个桌面网站看起来像个app呢？我在实际工作中遇到了这个需求，将实现步骤总结如下：

其实Apple通过在网页的head部分添加link标记，在Safari浏览器中我们可以轻易地将网站添加到iPhone的主屏幕，使它看起来就像一个普通的app一样。

那么，我们如何修改这个生成的Logo呢? 还有如何隐藏打开的这个App底部（也可以说是safari的底部）栏呢？

在对应的网页的.html文件下，一般是命名为index.html文件下修改。

注意：apple-touch-icon和 apple-touch-icon-precomposed都可以，区别: 这里有apple-touch-icon属性的明显比使用apple-touch-icon-precomposed图标多出一个高光，因为在ios系统中对icon有一套规范，就是在ios设备的图标统一为“四边圆角”、“高光处理”，至于“图标阴影”，是ios设备中统一为所有桌面元素增加的，所以不作为图标单独处理的样式，由于在视觉上统一最重要的是形状的统一，所以“圆角”是必须的，但是对于“高光”苹果没有做出特别的强调，所以苹果设置当中把“高光”作为可选项，就产生了apple-touch-icon和 apple-touch-icon-precomposed属性。

一：添加的图片Logo位置

二：在对应的index.html目录下添加代码

上面的代码需要注意： 1，href 路径不要错 2， 这几句，要加上 3， 如果如上操作修改后没效果，除了检查代码正确外，还需要部署这些前端代码的人，重新部署下就行了。