网页如何在苹果设备上显示icon图标



我们知道网页有icon图标,例如本站的微信截图_20170903170456.pngLJr思考者日记网-束洋洋个人博客

但是到了苹果手机上,我们想收藏本站,左上角的icon图标就没有了,变成了灰色背景,网站标题第一个文字的一个默认图标,怎么才能显示网页的icon呢?LJr思考者日记网-束洋洋个人博客

搜寻了下苹果开发者中心发现:LJr思考者日记网-束洋洋个人博客

您可能希望用户能够将您的Web应用程序或网页链接添加到主屏幕。这些由图标表示的链接称为Web剪辑。按照这些简单的步骤指定一个图标来表示您在iOS上的Web应用程序或网页。LJr思考者日记网-束洋洋个人博客

  • 要指定整个网站(网站上的每一页)的图标,请将PNG格式的图标文件放在根文件夹中,名为 apple-touch-icon.png
  • 要指定单个网页的图标或将网站图标替换为网页特定图标,请将链接元素添加到网页,如:
<link rel ="apple-touch-icon" href ="/custom_icon.png">

在上面的例子中,替换custom_icon.png为你的图标文件名。LJr思考者日记网-束洋洋个人博客

要为不同的设备分辨率指定多个图标,例如,支持iPhone和iPad设备,请sizes按如下方式为每个链接元素添加一个属性:LJr思考者日记网-束洋洋个人博客

<link rel ="apple-touch-icon" href ="touch-icon-iphone.png">
<link rel ="apple-touch-icon" sizes ="152x152"href ="touch-icon-ipad.png">
<link rel ="apple-touch-icon" sizes ="180x180"href ="touch-icon-iphone-retina.png">
<link rel ="apple-touch-icon" sizes ="167x167"href ="touch-icon-ipad-retina.png">

使用最适合设备尺寸的图标。LJr思考者日记网-束洋洋个人博客

如果没有符合设备推荐尺寸的图标,则使用大于推荐尺寸的最小图标。如果没有超过推荐尺寸的图标,则使用最大的图标。LJr思考者日记网-束洋洋个人博客

如果没有使用链接元素指定图标,则会使用apple-touch-icon...前缀搜索网站根目录。例如,如果设备的适当图标大小为58 x 58,系统将按以下顺序搜索文件名:LJr思考者日记网-束洋洋个人博客

  • 苹果触摸图标80x80.png
  • 苹果触摸的icon.png

注意:iOS 7上的Safari不会对图标添加效果。较旧版本的Safari将不会添加使用-precomposed.png后缀命名的图标文件的效果。LJr思考者日记网-束洋洋个人博客

苹果的icon是png格式的图片,这里大家把上面的路径换成自己的网站png图标路径即可。LJr思考者日记网-束洋洋个人博客

更多设置请访问苹果开发者中心LJr思考者日记网-束洋洋个人博客

最终效果:LJr思考者日记网-束洋洋个人博客

微信图片_20170903165010.pngLJr思考者日记网-束洋洋个人博客

苹果浏览器标签效果LJr思考者日记网-束洋洋个人博客

 LJr思考者日记网-束洋洋个人博客

05.jpgLJr思考者日记网-束洋洋个人博客

网页添加到主屏幕效果LJr思考者日记网-束洋洋个人博客

最后不要忘了收藏本站试试效果LJr思考者日记网-束洋洋个人博客

 

(转载本站文章请注明作者和出处 思考者日记网|束洋洋个人博客 ,请勿用于任何商业用途)

『访问 思考者日记网404页面 寻找遗失儿童』

告知
  •     本站90%以上文章均属原创,部分转载已加上原作者出处。 如需转载本站文章请您务必保留本站出处!
  •     打广告评论者请自重,请为广大网友提供一个健康干净的网络空间。
  • 感谢主机屋提供网站空间;
  • 感谢万网阿里云提供域名解析;
  • 感谢EmpireCMS提供CMS系统;
  • 感谢bootstrap展示本站前端页面;
  • 感谢Glyphicons Halflings提供字体;
  • 感谢大家一直以来对本站的喜爱,感谢大家!
近期文章 建议与反馈