图标版权

作者对版权很重视, 提到两点:

1. 出售, 修改, 发布或者其他从中受益的行为都是不允许的.
2. 你可以在论坛, 博客或者个人网站中使用.

相关链接

Y o l k s
Y o l k s - 2

后话

三年前, 我介绍了一套图标. 不料今天在晚上看到竟然有新版本 Y o l k s - 2, 于是立即下载, 并且更新了这个文章...

• 30 个免费矢量图
• 简单布局上如何协调网页样式
• GNOME图标: Somatic
• 下水道口的涂鸦
• 为什么将多个图标放在一个图片里?

是否你也想过为网站定义一个图标, 如果用户将网站添加至主屏幕, 网站链接看起来更像原生程序, 也能获得更多的关注. 除了兼容手机端的浏览体验, 我们还能做得更多, 为 iPhone 和 iPad 自定义网站的主屏幕图标也算其中之一, 本文将对网站的主屏幕图标及其设定方法为进行详细介绍.

网站的主屏幕图标

iPhone/iPad 上的原生浏览器可以向主屏幕添加小图标, 作为网站入口. 如下:

如果网站没做过兼容处理, 小图标显示的是网页截图. 效果如下:

我们再看看 Apple 自己的页面, 它已经设定了主屏幕图标, 效果如下:

设定主屏幕图标

看到上面的截图, 我想你会打算自定义一个图标了. iOS 的网页图标与传统的网页 favicon 相似, 处理方式也差不多, 下面会为你介绍几种处理方式.

放置在默认位置

创建一个 PNG 图片, 命名为 apple-touch-icon.png 或者 apple-touch-icon-precomposed.png, 放置在网站根目录即可.

指定图标路径

为页面指定一个图标路径, 在网页的 head 部分代码如下:

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

为不同设备指定图标

在网页中为不同的设备指定特殊图标, 因为 iPhone 和 iPad 的图标尺寸不一样, 需要 sizes 属性来进行区分, 如果没有定义 sizes 属性, 默认 sizes 是 57 x 57. 代码如下:

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

如果没有图片尺寸可以匹配设备图标的尺寸, 存在比设备图标大的图片, 将使用比设备图标尺寸略大的图片; 如果没有比设备图标大的图片, 则使用最大的图片.

如果没有在网页中指定图标路径, 将会在根目录搜寻以 apple-touch-icon... 和 apple-touch-icon-precomposed... 作为前缀的 PNG 图片. 假设现在有一个设备的图标大小是 57 x 57, 系统将按以下顺序搜寻图标:

1. apple-touch-icon-57x57-precomposed.png
2. apple-touch-icon-57x57.png
3. apple-touch-icon-precomposed.png
4. apple-touch-icon.png

主屏幕图标尺寸

iPhone 和 iPod (iTouch) 使用的图标尺寸:

• 57 x 57 pixels
• 114 x 114 pixels (高分辨率, iPhone 4 或以上使用)

iPad 使用的图标尺寸:

• 72 x 72 pixels

主屏幕图标效果

当我们将图片作为主屏幕图标, iOS 系统会自动为图标加上视觉效果:

• 圆角
• 阴影
• 高亮

例如, 一个 57 x 57 的网站图标如下:

当用户将网页添加到主屏幕, 图标会加上上述效果, 如下:

所以我们无需对图片做太多处理, 提供符合尺寸的正方形图片即可.

无论是将图标放在默认位置上, 还是指定图标路径, 如果图标带有 -precomposed 后缀 (如: apple-touch-icon-precomposed.png), 系统将不会为你加上高亮效果.

后话

本文参考了 Safari 开发文档的两篇文章:《Configuring Web Applications》和《Custom Icon and Image Creation Guidelines》. 主要摘要了关于主屏幕图标的一些内容, 如果发现错漏和疑问, 请留言反馈.

我也为这个博客添加主屏幕图标, 同学们可以在设备中打开试试效果.

• App 每日推送 - 挖掘免费 iPhone/iPad 应用
• iPad 绘图工具 Adobe Ideas
• 魅族 M8 的 iPhone 风格主题 Suave
• Tango 图标: 番茄
• I am back

无论如何, 既然买了, 我不能对不住自己的 2380 大元, 还是会用出它应有的价值, 也会偶尔美化一下. 今天看到一套 iPhone 风格的叫 Suave 的图标, 很是喜欢. 做了一套 M8 主题, 分享一下, 希望用 M8 的朋友会喜欢.

主题只支持 0.9.x 的 M8 固件, 预览图如下, 下载请到 Box.net

最后, 赞一下魅族的 M8SE 换机活动, 我在广州买的机, 用了刚 10 个月, 触摸屏被我搓坏了, 在杭州没花一分钱就换了个新机. 不过好像所有 09 年初买的机器都有这触摸屏问题, 换机人数超多, 魅族现在已经不敢玩了...

• 为 iPhone 和 iPad 自定义网站的主屏幕图标
• App 每日推送 - 挖掘免费 iPhone/iPad 应用
• Gnome-Buuf-Deuce
• Shiftie Pastel
• Pidgin 状态图标

这套图标给我感觉特别好, 就像是一直想要的东西. 作者觉得这可以用作 iPhone 菜单栏图标, 我觉得这更适合作为网页的图标, 并准备换到自己博客上去. (挺适合我现在的博客风格) 另外, 图标作者发布出来的是一个 PSD 文件, 我们可以以此作为模板来扩展图标数量. 下面是下载文件.

相关文章: 30 Free Vector Icons
图标下载: 30 Free Vector Icons Attachment

最近我不怎么活跃, Twitter 很少留言, Gtalk 也上得不多, 但这并不是坏事, 说明我正在做一些更值得我花时间去做的事情. 这一个月里, 接触到很多新的东西, 也看到自身的很多缺点, 这些都需要时间来消化, 有了更多的体会才有更多的思考和分享.

这段期间收到一些同学的邮件, 因为太多了我没时间折腾, 那只能一视同仁了, 所以都没有回复. 如果真遇到问题 (经过自己的尝试和思考的问题, 包括这次的 "跨页显示评论提示框" 等遇到的问题), 最好可以在博客中留言, 只要不嫌弃迟来的回覆, 我会尽量解答的 (但我不能保证一定回复).

不知道这个文章该不该起这样的标题, 但是如果没看到这些图标, 我真的意识不到一个月来自我行为的改变. 谢谢图标.

• 广州推友聚会
• BlackBerry and Testa
• mary ann's elegant file icons
• 将 Ubuntu 图标更换为 GNOME 脚丫
• 保俶山之游

现在 iNove 主题的菜单上使用一个小屋图标来代替首页文字, 我觉得这是一种形象而友好的 UI 表示, 但是很多人问我如何将它换成相关的文字. 好吧, 下面我将将告诉你如何把它更换掉.

为什么要把小屋换成图标?

不喜欢小屋图标的人无非两种. 其一, 确切的不喜欢他的外观, 认为用户会对此产生歧义或者不够显眼; 其二, 认为这个小屋是个图片, 对搜索引擎不友好.

对于第一种人, 你们可以直接转跳至下面的更换教程.

对于第二种人, 我觉得你们需要知道, 它实质上并不是图片, 是通过 CSS 让文字隐藏起来而只显示背景图片, 它是文字, 不存在对搜索引擎很不友好的事情. (这一点可以通过去除 style.css 来验证)

怎样把小屋图标换成文字?

打开 style.css 文件, 找到并把代码

#menus li a.home {
	background-position:0 -93px;
	width:45px;
	padding:0;
	margin-left:0;
	text-indent:-999em;
}
#menus li a.home:hover {
	background-position:0 -124px;
}
#menus li.current_page_item a.home {
	background-position:0 -155px;
}

替换为以下代码

#menus li a.home {
	background:#FFF;
	padding-left:15px;
	margin-left:0;
}
#menus li a.home:hover {
	background:#F4F5F7;
}
#menus li.current_page_item a.home {
	background:#EDEFF0;
}

加强 SEO

无论你是将它显示为小屋还是文字, 它现在显示的其实是 "Home" (中文译本为 "首页") 字样, 而 "首页" 并不是一个理想的关键字, 它和你的网站没有太大的关系. 所以我们可以把它换成其他的关键字. 如: 你的网站是个专注冷笑话的网站, 那么可以改成 "最新冷笑话", 其他类推. 请参考以下步骤进行修改.

1. 打开 templates/header.php 文件, 找到以下代码

<?php _e('Home', 'inove'); ?>

2. 把它替换为你要换上的字样, 如: "最新冷笑话".

• WordPress 导航菜单
• iNove 中鼠标悬浮显示 @ 评论
• CSS 菜单列表设计
• Use Image Title in iNove
• WordPress 多级导航菜单

在制作网页时, 为什么要将多个图标放在一个图片文件里面呢?

经常在网上搜罗资源的朋友可能会发现, 很多网站喜欢将小图标拼在一个图片文件里. 然后在 CSS 中通过 background-position 定位访问图标, 访问量大的网站尤是如此. 为什么呢? 分开管理不是更加灵活吗?
大家都这么做当然有它的优点, 但这同样存在缺点.

优点:

1. 1 + 1 < 2
图标放在一起, 可以令图标的总容量稍小一点. 这不是最重要的, 但我可以告诉你, 很多程序员都是完美主义者.

2. 让连接次数大量减少
用过 Opera 的朋友可能会对它那个显示图片下载的进度条印象很深, 它会显示 "已下载图片/图片总数". 对于 Web 服务器上的每个独立资源, 都需要去连接和获取的. 所以大家都设法将很多图标放在一个图片上, 连接一次就全部取回来. 这也许是一图多标的主要目的.

3. 让浏览器将图标预先下载
浏览器为了尽快地显示页面, 一般只是将打开页面时用到的图片下载到本地, 而一些可能用到, 但没有立刻被用到的图片需要在应用的时候再进行下载. 最经典的例子可能是导航菜单的 Tab 图标, 如果普通状态的 Tab 图标和鼠标悬停时的图标都是独立放置的, 那么当你鼠标移动到 Tab 按钮时, 图标才开始下载, 这样会带给用户很不好的视觉效果. 所以我觉得遇到这种情况时, 将多个图标合并在一起的处理是必须的.

缺点:

1. 图片难以管理, 难以定位
如果你要更换一个图标, 那么你需要编辑整个大图片. 如果你要改变一个图标的大小, 很可能你需要重新计算它的位置, 甚至无从下手, 只能在别的位置再添加一个图标.

2. 2 > 1
两个图标合成的图片是肯定比其中一个图标独占的图片大的, 也就是说, 下载这个图片所需的时间将比单独一个图标用的时间长. 浏览器显示图片一般都是下载完则显示或者边下载边显示的, 如果你那几个图标组成的图片容量比较大, 那么它们不能逐个显示予用户, 会造成很不好的用户体验.

应用:

1. 让图标尽量排列得有规律
有规律地排放的图标跟容易定位和维护, 这里的间隔可以使用 16, 32, 48, 96 等标准尺寸.

2. 将背景颜色一致的图标放置在一起
如果背景颜色不一样, 最好分为两个或多个图片放置, 特别是背景颜色相近的, 很容易混淆.

3. 将相同栏目的图标放置在一起
这样可以少写一些 CSS 代码. 设置一个 background, 再在每个项设置 background-position 就行了.

4. 不要将大图绑在一块
大部分用户都不会耐心地等待页面的所以文件被下载完毕再进行阅读, "不耐烦" 会驱使他们去点 close.

关于图片定位, 可以看看这里: CSS 中背景图片定位

拓展:

万物都是相通的, 软件和互联网技术也一样. 如果图片作为网络资源需要每个进行连接来获取, 那么 .js 文件和 .css 文件也是如此. 我们应该将可能放在一起的资源绑起来. 这样可以为你省下一些资源, 也可以满足你追求完美的虚荣.

但切忌过度. 并不是所有东西都可以绑一块的, 没有人会将洗衣粉和饼干缠在一起的. 将有相关性的, 或者特别零碎的放在一起都是可以的, 我相信聪明的你一定会有自己的一套分类方法.

• CSS 属性 background-position 的 W3C 定义
• CSS 中背景图片定位
• 将 iNove 菜单上的小屋图标换成文字
• CSS 菜单列表设计
• CSS: 突破框框的设计

经典的 Somatic 系列 GNOME 图标主题.
Windows 上相应的 IP 主题早已有了, 现在 Linux 上也不缺了.
虽然主题里的一些图标不太易于辨认, 但图标确实很可爱, 也许习惯就好了.
下载链接: Somatic - GNOME Icon

本站之前还介绍过 Somatic 的 GDM 主题.
如果你喜欢这种风格的话, 可以访问这里: Click here!

• GDM主题: Somatic
• Gadgetango
• Palladium Icons
• GAIA for GNOME
• Tango 图标: 番茄

作者提供一个 SVG 图标和一个 64x64 的 PNG 图标.
下载请访问: Tomato Tango icon

你可以用 inkscape 或 GIMP (需要装插件) 将 SVG 转成其他图片格式.
如果你没有工具转其他格式, 或许我可以帮一下, 但请报上尺寸和文件格式.

我们的口号是: 不放过一个 Tango 图标!

• Tango mime
• I am back
• Gadgetango
• 为 iPhone 和 iPad 自定义网站的主屏幕图标
• Oxygen Days

这是一套简单的图标, 灰白色, 14 玫, PNG 格式, 256x256.

图标的数量比较少, 这些类型的图标在桌面应用上并不常见, 而且作者也没有将它们打包成图标主题, 所以要将它们作为桌面的图标主题应该会相当的麻烦. 但不知道为什么, 作者将这套图标归类为 GNOME 图标主题. 而我认为它更适合用作网页图标, 尤其是简洁风格的网页界面. 不知道你怎么觉得?

下载请点: GNOME-Look.org

• mary ann's elegant file icons
• GNOME图标: Somatic
• Pidgin 状态图标
• Tango mime
• Dock 图标 - SQUARE

Silvestre Herrera 创作了多套 Linux 的图标主题, 没有一个不是精品.
半个月之前, 他分别在 GNOME-Look.org 和自己的 Blog 预言将会发布一套名为 Dropline NOU 的新图标. 已期待多日, 昨天 Dropline NOU 终于发布了.

这套图标风格有点接近 Mac 风格的图标, 但没有那么写实, 也不那么闪亮. 一些图标中能看到作者其他作品的身影. 依作者的说法, 发布这个版本就像在履行一个承诺一样, 它还不是一个完全版 (貌似还有很多图标会被加进去), 但作者说会将他完成. 就以前的案例, 这个完成的过程可以很长...

另外, 作者好像不太满意现在的驱动图标.
我却是觉得那个 Computer 图标有点怪怪的, 不知道会不会以后顺手也还掉呢?

下载请到作者 Blog: silvestre|artwork weblog

• Gnome-Buuf-Deuce
• 将 Ubuntu 图标更换为 GNOME 脚丫
• Linux 是防毒专家?
• Secret Maryo
• Gadgetango

Give me Foot (script) 是一个 shell 脚本, 它可以助你方便地换上脚丫图标. 依据作者的说明, 这是一个针对 Ubuntu 的脚本, 本人也未曾在其他发行版测试, 所以在这只推荐给 Ubuntu 用户.

使用方法: （使用前请注意备份.）
1. 到 GNOME-Look.org 下载安装文件, 并解压之.
2. # ./replace.sh {图标主题的目录名称}
(如果图标主题所在目录是 /usr/share/icons/gnome/, 则图标主题的目录名称为 gnome.)

更换图标的弊端: System->About Ubuntu 的图标也会变成脚丫.

• Ubuntu StartUp Manager
• Ubuntu 8.04 LTS (Hardy Heron)
• Mint 7 初体验
• Ubuntu 8.10 正式版发布
• Gnome-Buuf-Deuce

一套挺 Cool 的文件图标, 一共 21 枚.
我已将官方的 SVG 转成 PNG 256x256 了.

Downloads:
SVG: GNOME-Look.org
PNG: maryanns_png_256x256.zip

• Palladium Icons
• Tango mime
• Gadgetango
• 将 Ubuntu 图标更换为 GNOME 脚丫
• GNOME图标: Somatic

最近犯了敲字过渡综合症, 继续分享图标.

这是一个自动生成图标的脚本, 可以一次性帮你生成整年的日历图标, 可以生成任意大小的 PNG 文件, 而且图标非常漂亮.
打开看了一下脚本代码, 应该需要 inkscape 支持. 在 Linux 跑过, 能用, 效果也很好.

如果报这样的错误: Syntax error: Bad fd number
则打开文件 build-dates.sh, 并将
--export-png=export/${SIZE}x${SIZE}/$y-$z.png >& /dev/null;
改写为:
--export-png=export/${SIZE}x${SIZE}/$y-$z.png > /dev/null;

下载链接: GNOME-Look.org

• Oxygen Cursor
• GNOME图标: Somatic
• 在 CentOS 4.4 上安装 Oracle 9i
• GDM主题: Somatic
• 将 Ubuntu 图标更换为 GNOME 脚丫

Pidgin 状态图标 9 枚, 尺寸 48x48.
下载请点: GNOME-Look.org

• Pidgin Screenlet
• Gadgetango
• Tango mime
• Dock 图标 - SQUARE
• Palladium Icons

一批 Tango 风格的文件图标, SVG 格式.
下载 SVG 请点: GNOME-Look.org

我已将所有图标转成了 PNG 格式, 包括 48x48, 128x128, 256x256 三种格式.
下载 PNG 请点: mime.zip

• Tango 图标: 番茄
• Shiki Mint Icons
• Dock 图标 - SQUARE
• Gadgetango
• Pidgin 状态图标