iPhone 收藏网址[添加到书签] 和 [添加到主屏幕] 显示自定义图标,而不是网页截图：

<!-- Safari浏览器[添加到书签] -->

<link rel="shortcut icon" href="static/my/img/favicon.ico">

<!-- Safari浏览器[添加到主屏幕] -->

<link rel="apple-touch-icon" href="static/my/img/favicon.ico"/>

https://www.zhihu.com/question/19572446

在网站根目录放一张命名为 apple-touch-icon.png 的 57 × 57 像素图片即可达到基本目的。

如果需要更精确的控制：

1. 在网站 head 部分添加以下语句，其中 href 属性值是图片的路径。

<link rel="apple-touch-icon" href="/custom_icon.png"/>

2. 为满足不同分辨率设备的显示效果，可以添加三个不同分辨率的图片：57 × 57 像素用于前三代 iPhone 和 iPod touch ，72 × 72 像素用于 iPad ，114 × 114 像素用于采用 Retina display 的 iPhone 4 和 iPod touch 等后续产品。通过 sizes 属性控制：

<link rel="apple-touch-icon" href="touch-icon-iphone.png" />
<link rel="apple-touch-icon" sizes="72x72" href="touch-icon-ipad.png" />
<link rel="apple-touch-icon" sizes="114x114" href="touch-icon-iphone4.png" />

3. 还可以把 rel 属性修改为“apple-touch-icon-precomposed”来避免 iOS 向你的图标添加高光效果。

iPhone 收藏网址[添加到书签] 和 [添加到主屏幕] 显示自定义图标,而不是网页截图的更多相关文章

  1. IOS 通过界面图标启动Web应用 + 全屏应用 + 添加到主屏幕

    请注意!!!使用了[全屏模式之后].页面的顶部会空出一大块.而且这并不属于margin,padding,或者定位.就是单纯的空出来非常难调试.其实坑就是这里 在 iPhone「添加到主屏幕」时显示自定 ...

  2. 将网站添加到iPhone的主屏幕上

    我之前有篇文章介绍过如何将网站固定到Windows的开始菜单,并可以自定义图标.颜色以及Windows推送通知,其实Apple也有类似的功能,通过在网页的head部分添加link标记,在Safari浏 ...

  3. iOS中为网站添加图标到主屏幕以及增加启动画面

    虽然没有能力开发Native App,但还是可以利用iOS中Safari浏览器的特性小小的折腾一下,做一个伪Web App满足下小小的虚荣心的. 既然是在iOS中的Safari折腾的,那么代码中利用到 ...

  4. 关于在Safari浏览器中将网页添加到主屏幕的相关设置（自定义图标，启动动画，自定义名称）

    在ios中我们可以使用Safari浏览自带的将网页添加到主屏幕上,让我们的web页面看起来像native那样 第一步: 第二步: 第三步: 到这里还没结束:我们还要进行相关设置才能使我们的应用更像原生 ...

  5. 添加web引用和添加服务引用有什么区别？

    添加web引用和添加服务引用有什么区别,Add Service References 和 Add Web References 有啥区别?参考 http://social.microsoft.com/ ...

  6. 添加服务引用和添加Web引用对比

    原文:添加服务引用和添加Web引用对比 在WindowsForm程序中添加服务引用和Web引用对比 为了验证书上有关Visual Studio 2010添加服务引用和Web引用的区别,进行实验. 一. ...

  7. Dynamics CRM2013 1：N关系 sub-grid中的“添加现有项”和“添加新建项”功能详解

    CRM2013中sub-grid的样式和2011中有了较大的变化,2013和2011界面对比如下 在2011的时候按钮是在ribbon区,1:N的父子关系实体直接点击添加新纪录就可以,但2013就不行 ...

  8. loadrunner 添加集合点和添加压力机

    loadrunner 添加集合点和添加压力机 一.添加集合点: 1.在脚本中右键insert--rendezvous (集合点一定要添加在事务的外面,否则影响事务准确性) 2.创建controller ...

  9. jQuery对象合并、jQuery添加静态方法、jQuery添加DOM实例方法

    实例效果: 代码演示: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:/ ...

随机推荐

  1. java匹配竖线的错误警示

    String s1 = "|"; // 输出 | System.out.println(s1); String s2 = s1.replaceAll("|",& ...

  2. Android学习系列(17)--App列表之圆角ListView(续)

    http://www.cnblogs.com/qianxudetianxia/archive/2011/09/19/2068760.html   本来这篇文章想并到上篇Android学习系列(16)- ...

  3. java -server 和 -client 的不同，及 java -server 时抛错原因

    在dos窗口运行:java -server Error: missing `server' JVM at `C:\Program Files\Java\jre7\bin\server\jvm.dll' ...

  4. react性能检测与优化

    网页运行最重要的是速度快嘛,那我们怎么知道网页运行的时候,哪些部分快哪些部分慢呢? 我们可以安装react性能检测工具进行检测,通过安装 然后修改app/index.jsx文件 ,在要检测的组件运行之 ...

  5. javascript面向对象精要第二章函数整理精要

  6. vuejs怎么在服务器部署？（知乎）

    作者:知乎用户链接:https://www.zhihu.com/question/46630687/answer/157166318来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请 ...

  7. php in_array 的一个坑

    in_array('', [0]); // true 因为 php 里面 '' == 0 的结果是 true,这种情况即使 in_array 第三个参数传了 true,还是不能达到想要的效果,只能特殊 ...

  8. context configure and clock schedule

    每个窗口都有自己的context,这里演示怎么配置context以及如何实现定时器...... #-*- coding:gbk -*- import pyglet platform=pyglet.wi ...

  9. eclipse中编辑properties文件无法看到中文

    如果在eclipse中编辑properties文件无法看到中文则参考“Eclipse开发环境配置-indigo.docx”添加propedit插件.

  10. 数据正规化 (data normalization) 的原理及实现 (Python sklearn)

    原理 数据正规化(data normalization)是将数据的每个样本(向量)变换为单位范数的向量,各样本之间是相互独立的．其实际上,是对向量中的每个分量值除以正规化因子．常用的正规化因子有 L1 ...