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. RabbitMQ安装详解

    # RabbitMQ 消息中间件 一.安装:#安装epel源[EPEL (Extra Packages for Enterprise Linux,企业版Linux的额外软件包)rpm -Uvh htt ...

  2. Quartz入门例子简介 从入门到菜鸟(一)

    转: Quartz入门例子简介 从入门到菜鸟(一) 2016年11月19日 22:58:24 爱种鱼的猫 阅读数:4039   刚接触quartz这个词并不是在学习过程中...而是WOW里面的界面插件 ...

  3. Nginx一台机器上负载均衡多个Tomcat

    默认你的机器上安装了Java环境,解压了Tomcat,安装了Nginx.默认这几个tomcat都部署在一台机器上. 对于Tomcat需要改三个地方[你部署的所有tomcat这三个地方都不能一样,如果你 ...

  4. 第一次使用Android Studio时你应该知道的一切配置(一)

    ​[声明] 欢迎转载,但请保留文章原始出处→_→ 生命壹号:http://www.cnblogs.com/smyhvae/ 文章来源:http://www.cnblogs.com/smyhvae/p/ ...

  5. java连接数据库读取数据出现乱码

    因为这是通用编码,像中国通常使用的GBK.GB2312.Big5等只是针对中文而言,但是对其他文字就不适用了,为了使得这个问题的解决具有文字编码通用性,所以我这里设定了UTF8这个编码. 编码一致性涉 ...

  6. sklearn10-使用总结

    sklearn实战-乳腺癌细胞数据挖掘(博主亲自录制视频) https://study.163.com/course/introduction.htm?courseId=1005269003& ...

  7. python 代码模板

    命令[python3 -m pydoc -p 1234]   通过http://localhost:1234来访问查看文档 # -*- coding: utf-8 -*-""&qu ...

  8. indexOf与includes的比较

    indexOf和includes都代表检测数组或字符串中是否包含某一个元素 其中indexOf返回的是数值类型,而includes返回的是布尔类型 var ary = [,,]; console.lo ...

  9. JAVA 动态代理学习记录

    打算用JAVA实现一个简单的RPC框架,看完RPC参考代码之后,感觉RPC的实现主要用到了两个方面的JAVA知识:网络通信和动态代理.因此,先补补动态代理的知识.---多看看代码中写的注释 参考:Ja ...

  10. springboot(十二)：springboot单元测试、打包部署

    单元测试 1.在pom包中添加spring-boot-starter-test包引用 <dependency> <groupId>org.springframework.boo ...