iPhone/iPad网址添加到主屏幕并设置个性化图标

前言

前几天在知乎上看到一篇不错的文章，添加书签的时候不小心添加到了手机主屏幕，发现添加到主屏幕跟手机APP的图标一样，非常美观，然后开电脑看了一下网页代码，发现设置很简单，今天杨公子分享一下折腾经验，把个人导航添加到iPhone主屏幕并设置个性化图标。

准备工作

一张认为漂亮并准备做APP图标的图片，分别转存尺寸为152×152，120×120，76×76和60×60，对应的是各个客户端的尺寸。方便的话也可以做上ICO图标。

教程开始

1、先分析一下知乎实现的方法，打开网页检查，实现方式为如下图代码：直接COPY出来备用。

2、打开自己的导航页，在<heda>和</heda>之间输入刚才的代码，替换图标地址为自己的图标。如下图：

<link data-rh="true" rel="apple-touch-icon" href="https://dh.hiir.cn:1112/img/png/apple-touch-icon-152.81060cab.png">
<link data-rh="true" rel="apple-touch-icon" href="https://dh.hiir.cn:1112/img/png/apple-touch-icon-152.81060cab.png" sizes="152x152">
<link data-rh="true" rel="apple-touch-icon" href="https://dh.hiir.cn:1112/img/png/apple-touch-icon-120.d5793cac.png" sizes="120x120">
<link data-rh="true" rel="apple-touch-icon" href="https://dh.hiir.cn:1112/img/png/apple-touch-icon-76.7abf3393.png" sizes="76x76">
<link data-rh="true" rel="apple-touch-icon" href="https://dh.hiir.cn:1112/img/png/apple-touch-icon-60.362a8eac.png" sizes="60x60">
<link crossorigin="" rel="shortcut icon" type="image/x-icon" href="https://dh.hiir.cn:1112/img/png/favicon1.ico">

3、PC端测试网页正常，并且网址栏的ico图标也出来了。

4、下面开始手机端操作，iPhone打开网址，选择下面的箭头，添加到主屏幕，名称可以自行修改添加即可，然后屏幕就可以看到图标了。

如果要对别人的站改图标，就只能生成IPA文件安装，相对麻烦。大神勿喷。