网站的Apple Touch图标
J82*_*J82 70 html apple-touch-icon mobile html5
到目前为止,我一直在脑海中包含Apple Touch图标的行,如下所示:
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
但是,在问答中"苹果触摸图标的正确像素尺寸是多少？" 在公认的答案中说明,根据Apple的指导原则,现在需要三张图片.
那么如何将这些插入代码的head部分呢？
小智 69
你走了,希望这有帮助.
如果你想让Apple为你做一个审美位(添加光泽度),那么你可以将这些添加到<head>标签中:
<link rel="apple-touch-icon" href="apple-touch-iphone.png" />
<link rel="apple-touch-icon" sizes="72x72" href="apple-touch-ipad.png" />
<link rel="apple-touch-icon" sizes="114x114" href="apple-touch-iphone4.png" />
<link rel="apple-touch-icon" sizes="144x144" href="apple-touch-ipad-retina.png" />
如果你想预先组合图像,以便Apple显示它没有光泽,那么你可以这样做:
<link rel="apple-touch-icon-precomposed" href="apple-touch-iphone.png" />
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="apple-touch-ipad.png" />
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="apple-touch-iphone4.png" />
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="apple-touch-ipad-retina.png" />
如果您提供多个,iOS设备将查找正确的大小并自动使用该图像.从示例中的图像名称可以看出,带有视网膜显示屏的iPad需要一个144x144px的图标,iPhone 4/4S/5需要一个114x114px的图标,原始iPad(和iPad 2,作为屏幕分辨率没有区别)需要一个72x72px的图标,而原始的iPhone不需要尺寸规格,但供你参考它是57x57px.
- 从iOS 7开始,这已经过时了. (4认同)
phi*_*e_b 69
Apple规范为iOS7指定了新尺寸:
- 60X60
- 76x76
- 120×120
- 152x152
- 180x180
此外,不推荐使用预组合图标.
因此,为了支持新设备(运行iOS7)和更早版本(iOS6和更早版本),通用代码是:
<link rel="apple-touch-icon" href="/path/to/apple-touch-icon.png">
此外,您应该创建一个名为apple-touch-icon.png的180x180图片.
请注意/apple-touch-icon-76x76.png,如果在HTML代码中找不到有趣的东西,iOS会查找URL (有点像IE正在做的事情/favicon.ico).因此,保持文件名是否重要是很重要的.同样重要的是要考虑Android/Chrome也在使用这些图片.
您可能想知道此favicon生成器可以一次创建所有这些图片.完全披露:我是这个网站的作者.
- 如果它们不在客户端的缓存中,那么每个`<link>`标签中的所有文件都会被下载吗？无论页面请求在哪里(手机,平板电脑,电脑,Windows,Android ......)？我有点担心性能影响...... (2认同)
- @iquito 是的，您完全可以只使用一个声明。作为 RealFaviconGenerator 的创始人，我正在研究这个一刀切的解决方案。尽管 iOS 做得很好，但有一个可能的问题：iOS 使用类似于 Mitchell 的算法来缩小图标。根据您的具体设计，这可能不是您想要的。一旦我对此有更多反馈，我会更新我的答案。 (2认同)
- 顺便说一句,RealFaviconGenerator真的很棒,我认为唯一可能更好的是许多标题链接,这些标题链接并非绝对必要 - 无论是在生成新的favicons还是检查网站的运行方式时.也许作为进一步的改进,网站可以显示不同的可能性 - 哪些部分是严格有益的(以及它们做什么/更多解释),哪些部分可以省略并且通常由浏览器自动检测(据我所知iOS)如果页面没有关于`apple-touch-icon`的任何信息,也会在根目录中查找特定大小. (2认同)
由于其中一些答案已经过时,我建议使用http://realfavicongenerator.net/生成所有图像和标记 - 每次使用它时我都会捐出几欧元,希望它能让它们保持关于iOS,Android和Windows上目前有效的最新信息,所以我没有必要这样做.
- 支持这个开发者,因为这个网站是完美的 (3认同)
- (我刚才注意到这里的其中一个答案来自realfavicongenerator.net的作者 - 请用他的答案而不是我的答案!) (2认同)
小智 6
为Web Clip指定网页图标
您可能希望用户能够将您的Web应用程序或网页链接添加到主屏幕.这些链接以图标表示,称为Web Clips.按照以下简单步骤指定一个图标来表示iOS上的Web应用程序或网页.
要指定整个网站的图标(网站上的每个页面),请将PNG格式的图标文件放在名为apple-touch-icon.png的根文档文件夹中
要为单个网页指定图标或使用特定于网页的图标替换网站图标,请在网页中添加链接元素,如下所示:
<link rel="apple-touch-icon" href="/custom_icon.png">
在上面的示例中,将custom_icon.png替换为您的图标文件名.要为不同的设备分辨率指定多个图标(例如,同时支持iPhone和iPad设备),请为每个链接元素添加一个sizes属性,如下所示:
<link rel="apple-touch-icon" href="touch-icon-iphone.png">
<link rel="apple-touch-icon" sizes="76x76" href="touch-icon-ipad.png">
<link rel="apple-touch-icon" sizes="120x120" href="touch-icon-iphone-retina.png">
<link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad-retina.png">
使用最适合设备大小的图标.如果未设置sizes属性,则元素的大小默认为60 x 60.如果没有与设备的建议大小匹配的图标,则使用大于建议大小的最小图标.如果没有大于推荐尺寸的图标,则使用最大的图标.
如果未使用link元素指定图标,则会在网站根目录中搜索带有apple-touch-icon ...前缀的图标.例如,如果设备的相应图标大小为60 x 60,系统将按以下顺序搜索文件名:
apple-touch-icon-76x76.png
apple-touch-icon.png
有关网页图标指标,请参阅图标和图像大小.
注意:iOS 7上的Safari不会为图标添加效果.较旧版本的Safari不会为使用-precomposed.png后缀命名的图标文件添加效果.有关详细信息,请参阅第一步:在iTunes Connect中识别您的应用程序.
资料来源:Apple touch图标规格
截至2018年，Apple开发者网站建议iOS设备使用以下内容：
<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">
<link rel="apple-touch-startup-image" href="/launch.png">
<meta name="apple-mobile-web-app-title" content="AppTitle">
应用标题将替换您的网站标题。通常，您会想要的。应用启动时将显示启动图像。
| 归档时间： |
|
| 查看次数： |
75185 次 |
| 最近记录： |