给网站添加保存到移动设备主屏的 icon

icon

字数统计: 278阅读时长: 2 min

 2017/03/15   Share

By adding an iOS icon, anyone who decides to save your webpage to the home screen of their iPhone, iPad, or Android will see a nice app-like icon rather than an image of your page.

Here is a table of the current iOS icon sizes from Apple:

iPhone 6/7, iPhone SE	iPad / iPad Mini	iPad Pro	iPhone 6/7 Plus
120×120	152×152	167×167	180×180

For Android icons you’ll want to follow these specifications:

Android Regula	Android Hi-Res
1128×128	192×192

<link href="http://www.yoursite.com/apple-touch-icon.png" rel="apple-touch-icon" />
<link href="http://www.yoursite.com/apple-touch-icon-152x152.png" rel="apple-touch-icon" sizes="152x152" />
<link href="http://www.yoursite.com/apple-touch-icon-167x167.png" rel="apple-touch-icon" sizes="167x167" />
<link href="http://www.yoursite.com/apple-touch-icon-180x180.png" rel="apple-touch-icon" sizes="180x180" />
<link href="http://www.yoursite.com/icon-hires.png" rel="icon" sizes="192x192" />
<link href="http://www.yoursite.com/icon-normal.png" rel="icon" sizes="128x128" />

Make the first apple one the 120 x 120.

If you don’t want to create all these images, you should at least create the larger resolution ones. That way they’ll look good on the hi-res devices.

Reference:

How to Add Icons to iPhone, iPad & Android to Your Website

原文作者：Yifans_Z

原文链接：https://zyf.im/2017/03/15/add-website-icons-to-the-home-screen/

发表日期：Mar03 15th 2017, 12:00:00 pm

更新日期：May 29th 2019, 5:15:27 pm

Next Post

Git pull rebase 和 merge no-ff 保持提交线图整洁
Previous Post

禁止 Google 根据区域重定向跳转



缺失模块。
1、请确保node版本大于6.2
2、在博客根目录（注意不是archer根目录）执行以下命令：
npm i hexo-generator-json-content --save
3、在根目录_config.yml里添加配置：

jsonContent:
  meta: false
  pages: false
  posts:
    title: true
    date: true
    path: true
    text: false
    raw: false
    content: false
    slug: false
    updated: false
    comments: false
    link: false
    permalink: false
    excerpt: false
    categories: true
    tags: true