为应用程序添加图标 ios_为已添加书签的网站添加iOS图标

2024-05-18 19:59:02

自1999年引入Internet Explorer 5以来，书签图标或更常见的图标被称为favicon（收藏夹图标）。书签图标或favicon通常使用.ico （有时也使用.png格式）指定为16×16 px。并显示在Web浏览器的URL地址旁边或Tab界面的页面标题旁边，如下所示。

如今，随着移动设备的发展，书签图标或收藏夹图标也得到了发展。例如，您可能熟悉的iOS在屏幕上显示图标。

这些图标大多数都经过了精美的设计，在Apple引入了一个名为apple-touch-icon新元标记后，您现在可以在将站点添加为书签时在iOS主屏幕上显示网站图标。

添加Apple Touch图标

苹果触摸图标由<link>标签指定，如下所示。

<link rel="apple-touch-icon" href="icon.png"/>

默认情况下，此图标为57x57px。但是，对于iPad和Retina设备，我们需要提供更多尺寸。 iPad需要大小为72x72px的图标，而Retina设备需要大小为114x114px的图标。

因此，总而言之，我们需要在<head>提供以下规格的图标，以支持iPhone，iPad和Retina设备。

<link rel="apple-touch-icon" href="icon.png"/>
<link rel="apple-touch-icon" sizes="72x72" href="icon.png"/>
<link rel="apple-touch-icon" sizes="114x114" href="icon.png"/>

默认情况下，iOS会自动向图标添加糖果色效果。

如果您希望图标不影响此效果，则可以在rel名称的末尾添加-precomposed ，就像这样。

<link rel="apple-touch-icon-precomposed" href="icon.png"/>

刷新网页并重新保存到主屏幕。现在，效果未添加到图标。

使用Photoshop创建Apple Touch图标

在上一篇文章中，我们讨论了如何使用MacAppIcon创建苹果触摸图标。另外，这也是我的偏爱，我们可以使用AppIconTemplate中的 PSD模板来获得更大的自定义灵活性。

我真的很喜欢此PSD模板的另一个功能是，它还带有Photoshop Actions，可将图标自动保存为多种尺寸，包括iTunes Artwork的尺寸。

奖励：添加Windows 8固定图标

此外，Windows 8还提供了类似的方法，可以使用以下元标记在固定（带有书签）的网站上添加图标。

<meta name="msapplication-TileImage" content="/metro-tile.png"/>
<meta name="msapplication-TileColor" content="#015565"/>

有关在您的网站上实现这些标签的进一步讨论，您可以转到下面的MSDN帖子。

更多资源

Favicon浏览器支持 –信息礼品
使用应用程序图标模板制作iOS图标 – Pixel Resorts
为Web Clip指定网页图标 – Safari开发人员库
了解Favicon

翻译自: https://www.hongkiat.com/blog/ios-touch-icon/

为应用程序添加图标 ios_为已添加书签的网站添加iOS图标相关推荐

打印机安装后显示服务器图标,win10系统已安装打印机却看不到图标怎么解决?
大家都知道,现在打印机设备已经成为办公室不可缺少的设备了,第一次使用打印机必须要连接电脑才可以使用.这不有些网友反馈说win10系统明明已成功安装打印机了,却怎么也看不到图标,怎么办?有大部分用户都为 ...
java ico图标_javaweb中如何给自己的网站更改ico图标
我们在查看网页的时候很多网站都有自己的小图标,系统读取这个标志的时候先从你的项目的根目录下读看有没有favicon.ico文件,如果有直接显示这个图标,如果没有,则会去webapps/root/下找这 ...
chrome无法从该网站添加应用、扩展程序和用户脚本
问题: 为chrome添加infinity插件时提示无法从该网站添加应用.扩展程序和用户脚本解决方法: 1.在地址栏输入:chrome://flags/#extensions-on-chrome-u ...
更改应用程序图标_【iOS12人机交互指南】6.2-应用图标
该系列是iOS12人机交互指南的翻译,翻译的过程中加深自己的理解. 每个应用都需要一个漂亮而难忘的图标,它能在应用商店中吸引注意力,并在主屏幕上脱颖而出.图标通过用户的第一眼来和用户沟通,是传递应用的 ...
win7无法信息服务器安装程序,主编为你win7系统纯净版安装程序提示“microsoft注册服务器已停止工作”的解决方法...
win7专业版系统是众多客户默认的电脑系统,只是有不少客户在操作过程中恐怕会碰见需要解决win7系统纯净版安装程序提示"microsoft注册服务器已停止工作"的情景.几乎所有的初 ...
解决Chrome无法从该网站添加应用、扩展程序或脚本
转自:解决Chrome无法从该网站添加应用.扩展程序或脚本_七书的博客-CSDN博客_chrome无法添加扩展程序 1.先将后缀名为.crx的扩展文件的后缀名改为.rar. 2.然后将这个压缩文件解压 ...
favicon自动获取_php获取网站favicon.ico图标 api源码自动获取并添加Favicon图标
通常情况下,做网站的都会给自己的网站添加一个Icon,浏览器上一长排的标签页,用Icon来区分就显得更加醒目.现在想找一个没有Icon的网站并不好找,可见没有Icon的网站是多么的业余啊." ...
Matlab添加包libsvm svmtrain已被删除，请改用fitcsvm
Matlab添加包libsvm svmtrain已被删除, 请改用fitcsvm 原因运行一个脚本,运行的时候总是出现==svmtrain已被删除. 请改用fitcsvm.==后来发现,原来是因为次 ...
python使用fpdf2包和pdfrw包在已有的PDF页面上添加新的页
python使用fpdf2包和pdfrw包在已有的PDF页面上添加新的页目录 python使用fpdf2包和pdfrw包在已有的PDF页面上添加新的页 #包安装 #新内容添加到已有的PDF页面上 # ...

最新文章

热门文章