apple touch icon（apple-touch-icon，shortcut icon和icon的区别）

本文目录

• apple-touch-icon，shortcut icon和icon的区别
• iPhone网页添加到主屏下边框
• 怎么样让网站在 iPhone「添加到主屏幕」时显示自定义图标，而不是网页截图
• 为何许多 iOS 应用图标采用高光（gloss effect）设计

apple-touch-icon，shortcut icon和icon的区别

apple-touch-icon 可以了解到这是一个类似网站favicon的图标文件，用来在iphone和ipod上创建快捷键时使用。这个文件应当是png格式，57x57像素大小，放在网站根目录之下。如果准备的文件不是57x57的话，它会自己缩放的。在页面的head部分，用下面的格式表示。《link rel="apple-touch-icon" href="/apple-touch-icon.png"/》�0�2语句一:《link rel="shortcut icon " href="favicon.ico" /》语句二《link rel="icon" href="animated_favicon.gif" type="image/gif" /》备注:语句一 Shortcut Icon 就是在网址列前面出现的Icon问题:语句二 icon的作用是怎么?和语句一有什么区别 ?指导 过去，为保证favicon出现，网站设计者和开发者采用了多种方法。很难明确地保证favicon可以在所有电脑上显示，即使是用同一版本的一种浏览器。下列代码另一个局限就是它把favicon关联到了某个特定的HTML或XHTML文档上。为避免这一点，favicon.ico文件应置于根目录下。多数浏览器将自动检测并使用它。建议包含以下两行HTML代码:CODE:然而，只有第一行是必须的，因为“shortcut icon”字符串将被多数遵守标准的浏览器识别为列出可能的关键词（“shortcut”将被忽略，而仅适用“icon”）；而Internet Explorer将会把它作为一个单独的名称（“shortcut icon”）。这样做的结果是所有浏览器都可以理解此代码。只有当希望为新浏览器提供另一种备用图像（例如动画GIF）时，才有必要添加第二行。 在HTML中，link元件必须在head元件里（在《head》和《/head》之间)。 对于XHTML，link必须使用“ /》”结束（或“》《/link》”），而不可以使用“》”结束。 href可以，但不必，指向/favicon.ico的位置。它可以指向任何URL。 图像通常可以使用任何被浏览器支持的图像格式。 .ico文件格式通常可以被所有可以显示favicon的浏览器读取。 设置服务器 ，以发送正确的MIME标识： ICO 文件 image/vnd.microsoft.icon（或者亦可出于兼容性原因使用image/x-icon。然而最好使用IANA注册的MIME类型，因为多数主流浏览器现在支持它） GIF 文件 image/gifPNG 文件 image/png 使用适当的分辨率和色深。 ICO：包括多种分辨率（最常使用的是16×16和32×32，Mac OS X有时使用64×64和128×128）以及位深（比特每像素）（多数使用4、8、24 bpp，即16、256和1600万色）。 GIF: 使用16×16，256色。 PNG: 使用16×16，256色或24位。 注意： 当favicon.ico被置于文档根目录时，将会被一些不处理link元件的浏览器找到，即使没有您的站点上没有指向它的链接。标准化 Favicon功能最早由微软创设，而微软公司的Internet Explorer网页浏览器会对每一个网站都请求favicon。微软支持的link标签不遵从World Wide Web Consortium（W3C，万维网联盟）的HTML建议，因为：rel属性必须包含一个用空格作分隔符的link类型的列表，所以一个包含两词的link类型不能被遵守标准的浏览器理解。 “.ico”文件类型（一种用于Microsoft Windows上图标的光栅格式）没有一个注册的MIME类型，而且似乎在当时也不能被多数浏览器理解。然而2003年，这一格式在IANA获得注册，其 MIME类型是image/vnd.microsoft.icon，进而消除了此问题的第一部分。 在网站上使用保留地址（reserved location）与Architecture of the World Wide Web（互联网的结构）矛盾，同时被认为是link squatting（链接劫持）或URI squatting（URI劫持）。 Mozilla浏览器通过一种遵从Web标准的方法添加了对favicon的支持。它采用rel="icon"并允许网络设计人员添加任何支持的图像格式 的favicon。例如《link rel="icon" type="image/png" href="/path/image.png"》。后来鉴于此功能将被用于所有新内容，多数浏览器都对此功能增加了支持。

iPhone网页添加到主屏下边框

iPhone网页添加到主屏下边框如果没有跟相应设备推荐尺寸一致的图标，那个会优先使用比推荐尺寸大，但最接近推荐尺寸的图标。如果没有比推荐尺寸大的图标，会优先选择最接近推荐尺寸的图标。如些有多个图标符合推荐尺寸，会优先选择包含关键字precomposed的图标。如果未在区域指定用link标签指定图标，会自动搜索网站根目录下有apple-touch-icon?或者apple-touch-icon-precomposed?前缀的图标。

怎么样让网站在 iPhone「添加到主屏幕」时显示自定义图标，而不是网页截图

就像favicon一样 把名字命名为apple-touch-icon.png 放在该目录下，那么该目录下所有网页的图标都是这个了,注意你的文件不要添加高光效果，系统会自己给你加上。图片文件大小是57x57

为何许多 iOS 应用图标采用高光（gloss effect）设计

喬布斯曾經這麼介紹: "One of the design goals was when you saw it you wanted to lick it."2007 年随第一代 iPhone 发布，延續了這種奇异审美（更多的原因其实是这个效果制作太粗糙，而且略顯過時）。首先几乎所有的 iPhone 预装应用都有这个效果，然后是 web app，即「add to home screen」添加网址链接到主屏幕的方式，所生成图标也带这个高光效果（HTML 中设置 apple-touch-icon-precomposed 可豁免）。后来的 XCode 也强制所有应用图标使用这种效果（設置 Icon already includes gloss effects 为 YES 可豁免）。苹果起初认为这能让许多质素平平的应用图标立即变身气质流。同时也可以让第三方应用（包括快速添加的网页）保持和系统风格一致。但，这是糟糕的审美：媚俗、快速、廉价地营造类似玻璃物体表面的「立体」，「光影效果」。很显然苹果意识了这点，后来的新应用（Find My Friends、Trailers 等）也没有一错再错，包括 iOS 6 很多应用的界面风格改变也去除了高光，而使用其它更具质感的纹理。(1) 真心认为这种高光好看；(2) 已经用了很久不想做改变；Evernote 也是拖到 5.0 版本才痛定思痛。所以，给点耐心。高光最终会被抛弃。