激发你的灵感:50个优秀的Favicons

所属分类: 网络编程 / CSS/HTML 阅读数: 1566
收藏 0 赞 0 分享

原文:http://www.smashingmagazine.com/page/2/
翻译:Blank(怿飞)

Inspire Yourself: 50 Remarkable Favicons
激发你的灵感:50个优秀的Favicons

引用:
Actually it's a pity that many designers don't really make use of them. Favicons, mini graphics for a particular web-site, can be displayed in the browser's URL bar, next to the site's name in lists of bookmarks, and next to the page's title in a tabbed document interface. To be recognized immediately, favicons have to be visually appealing and fit to the design or logo of a given page. In fact, if you use Favicons for your sites, users can easily find your URL in their bookmarks - in this way you create some kind of a visual connection between your web-site and your sites' visitors.

很遗憾,事实上许多设计师都不能很好的运用他们(Favicons)。Favicons,袖珍图形,适用于比较细致的网站,可以在浏览器的地址栏里显示,紧邻着书签列表里网站的名字,还紧邻着文件对话框界面的网页标题。直接得到认知,favicons应该悦目,并且要适合页面的设计或标识。事实上,如果你在网站上使用favicons,用户可以轻易在他们的书签里找到你的URL——通过这种方式,你在你的网站和网站的访问者之间创造了一些视觉连接。

引用:
However, the design of Favicons can be tricky - it isn't that easy to create a beautiful 16×16px mini-icon. Still, some designers manage to achieve tremendous effects. Logotypes with clear geometric structures are easier to work with than typefaces or abstract images. The color selection corresponds to current Web 2.0 trends. Let's take a look at 50 beautiful favicons you can inspire yourself from. You can click on favicons - they lead to a page, which uses the image as a page icon.

然而,Favicons的设计可能是有难度的——不是那么容易就能创造一个漂亮的16×16px的迷你图标。尽管如此,部分设计师的运用已经取得了巨大的成效。用清晰的几何结构组成的标识比用抽象的字体或图像来得容易,颜色的选取应当符合当前Web 2.0的趋势。让我们来看看能激发你灵感的50个漂亮favicons. 你可以点击favicons——它们指向使用这些图像做为页面图标的网站。

Petal(花瓣)

 http://www.aurea.es/
 http://www.fxis.net/
 http://www.divshare.com/
 http://www.tanyamerone.com/
 http://www.akken.com/
 http://www.kepu.net.cn/english/

Rounded Elements(圆形元素)

 http://www.fat-man-collective.com/
 http://www.lisensa.com/
 http://www.lorop-it.de/
 http://www.akamai.com
 http://www.cogmap.com/
 http://www.colorwarepc.com/
 http://www.evozon.com/
 http://www.diabetesgate.de/
 http://www.adelaidemetro.com.au/

Letters and Typography(字母和印刷样式)

 http://www.cubexagency.com/
 http://www.lisensa.com/
 http://www.somox.com/
 http://www.piqniq.jp/
 http://www.eight6.com/
 http://reachgroupconsulting.com/
 http://www.flexy.info/
 http://www.kiva.org/

Ornaments(修饰)

 http://www.imthere.com/
 http://www.elevenmedia.com/
 http://www.roisure.com/
 http://www.pixellogo.com/
 http://www.thinkpinkstudio.com/
 http://www.mattwebb.com.au/

Squares(正方形)

 http://www.sumagency.com/
 http://www.indesign.einsteiger-portal.de/
 http://www.kirkpatrickbank.com/
 http://deforum.ru/
 http://www.imasters.com.br/
 http://www.ouvaton.coop/
 http://detlog.org/
 http://www.ministrycamp.com/
 http://www.getpaint.net/
 http://microformats.org/
 http://www.kath-thun.ch/
 http://www.campus-and-more.de/
 http://pro-buero.com/
 http://www.quada-office.de
 http://www.modulio.net/

Further Favicons(更多的Favicons)

 http://www.joomlart.com/
 http://letterpop.com/
 http://www.illustrationclass.com/
 http://www.trendwatching.com/
 http://www.edag.hu/
 http://www.elektro.de/

Favicon Tools(Favicon工具)

Favicon Generator
Favicon Generator 2
Even More Favicon Generators
Favourite Favicons
Mysteries Of The Favicon.ico — How To Create A Favicon In Photoshop

更多精彩内容其他人还在看

简单明了带你了解CSS Modules

不要误会,CSS Modules可不是在说“css模块化”这个好像在某些地方见过的词,它其实是特指一种近期才出现的技术手段。什么技术手段呢?下面小编来和大家一起学习一下
收藏 0 赞 0 分享

新手学习css优先级

大部分人同样也会在写css的过程中产生很多困惑,比如为什么自己写的某段css没有生效,或者呈现出的样式和预计的不同,但又不知道要如何解决。下面小编来和大家一起学习CSS的优先级
收藏 0 赞 0 分享

css进阶学习 选择符

css这种没有程序逻辑的代码中,又能找出什么来说明谁做得更出色呢?下面小编给大家说明如何从css选择符的角度来提高css代码质量。
收藏 0 赞 0 分享

实现css文字垂直居中的8种方法

CSS可以轻易实现文字的水平居中,但有时我们需要文字垂直居中,除了表格可以实现这种CSS文字垂直居中以外,还有其它几种方法可以做到
收藏 0 赞 0 分享

完美实现CSS垂直居中的11种方法

在做前端项目时CSS的水平居中我们经常使用,但有时还会用到CSS垂直居中,对于小白来说这个就有些难度了,下面看一下我是如何实现的
收藏 0 赞 0 分享

webpack高级配置与优化详解

这篇文章主要介绍了webpack高级配置与优化,其中包括了webpack打包多页面,webpack跨域问题等相关内容
收藏 0 赞 0 分享

5个HTML5的常用本地存储方式详解与介绍

在HTML5规范之前,存储主要是用cookies,但cookies缺点有在请求头上带着数据,大小是4k之内,今天为大家介绍一下H5的5种存储方式
收藏 0 赞 0 分享

CSS代码检查工具stylelint的使用方法详解

stylelint是一个强大的现代CSS检测器,可以让开发者在样式表中遵循一致的约定和避免错误。本文将详细介绍CSS代码检查工具stylelint
收藏 0 赞 0 分享

Zen Coding css,html缩写替换大观 快速写出html,css

本文是在zen使用生产中遇到的问题做一些分享。
收藏 0 赞 0 分享

javascript代码规范小结

javascript代码规范,大家可以参考下,以便写出更利于阅读的代码。
收藏 0 赞 0 分享
查看更多