这个图标是哪个网站图标的。我要去看。

来源：蜘蛛抓取(WebSpider) 时间：2015-08-26 15:01 标签： 阿里旅游去啊网站图标
分享如何设计网站的favicon图标_深圳网页设计培训UI设计培训_天涯博客
星狮创想国内首页O2O教育机构，，UI设计培训,网页设计培训,平面设计培训,前端开发培训,CSS+DIV培训课程。咨询电话：400-688-0264用更短的时间，让您成为设计界的“老A”!
今日访问：[$DayVisitCount$]
总访问量：34091
开博时间：
博客排名：54167
(132)(137)
(6)(5)(38)(45)(17)(7)(2)(9)(4)(4)(1)
经常听见群里的人在讨论如何制作favicon图标，虽然知道怎么做，但是具体的详细表达却又说不上来，今天在网上看见这样一篇关于favicon制作图标文章，在这里分享给大家，希望对大家有所帮助！
现代网页设计中最令人沮丧和感到混乱的莫过于网站图标了(favicon)，是&favorite&icon&的简称。这枚小小的图标一般出现在浏览器的选项卡里、地址栏处，根据我们操作系统和浏览器的不同，还有可能出现在其他地方。
笔者先给大家科普下：favicon，即Favorites&Icon的缩写。favicon&就是出现在浏览器地址栏左侧的那个小图标。favicon，中文名称是网站头像。当然，这不仅仅是Favicon的全部，根据浏览器的不同，Favicon显示也有所区别：在大多数主流浏览器如FireFox和Internet&Explorer&(5.5及以上版本)中，favicon不仅在收藏夹中显示，还会同时出现在地址栏上，这时用户可以拖曳favicon到桌面以建立到网站的快捷方式;除此之外，标签式浏览器甚至还有不少扩展的功能，如FireFox甚至支持动画格式的favicon等。
由于他们不同寻常的文件格式和超级小的图像尺寸使得设计师们在设计这些图标时显得很费劲。更加见鬼的是，人们有时候甚至纠结于这单词的发音(我曾听人说&fah-vee-con&和&fave-eye-con&,尽管前者更常见)。啊，穿过一切没用的元素，直击主题吧!
好文推荐：
第二弹!那些你不知道的PHOTOSHOP冷知识之乾坤大挪移
高手支招!怎样分辨图片是否被PS过
设计一枚favicon
创建标识是设计的第一步。一个好的favicon应该在本身小得如同表情的情况下捕获网站的本质，并且在非常紧凑的空间里传达你的品牌。Favicon最常见的形式是该公司的商标标志(并非完整的标志与文字合并成的商标)。
(这些网站使用该品牌的标志,或至少接近它)
排除任何文本是一个好主意，毕竟这图标是在太小了。不过也有例外，那就是标志性的标志标记文本。例如,维基百科使用公认的&W&而Facebook使用其众所周知的「F」。
(这些图标使用与该品牌密切关联的一个字母。在这个例子中,你还会注意到,迪斯尼图标出现失常。这是因为这截图拍摄于视网膜显示屏,他们只使用一个16&16图标大小,而其他网站提供一个32&32大小和更多的细节。)
这些网站图标们实在是太小了导致了每个像素都被计算在内。有时候直接把一个完整的logo缩小下来很容易造成图标变得很模糊。所以，制作这些网站图标时往往都是按照像素级别去设计。
(这是Facebook的logo被整合为32*32像素时的一部分，边缘混淆而模糊，再一次证明像素级别的设计是很有必要的。)
在编辑图标时，我喜欢用位图软件编辑。例如Photoshop或者Pixelmator就可以做出很棒的效果。我通常先调整我的大标志到64&64px,因为这是我需要的最大的图标大小。接着我使用铅笔工具编辑一次，知道像素图标看起来很脆。这是一个非常繁琐的过程,可能需要一两个小时,但它会产生最好的结果。
一旦我把满意的64&64px图标做出来，我会按照原来的方法继续做出32&32,&24&24和&16&16的图标。下面是各尺寸对应的用途：
64&64&&Safari阅读列表和Windows网站图标
24&24&&固定在IE9
32&32&&高DPI或视网膜显示屏往往会用到这个尺寸的图标
16&16&&&在各种浏览器中最常用的尺寸大小
你可能会发现要得到这些小图标，通常通过调整64&64的就可以了，但往往会有更多的地方需要用到像素级别的编辑。记住如果你想调整这些小图标的alpha值也是可以的。几乎所有当下使用的浏览器都支持透明小图标。
保存favicon
我们做完所有尺寸的图标后就可以保存了!在ps中使用&存储为web所用格式&然后选择png格式。接下来需要转换png为ICO文件。我们把这些图标再次统一放进一张大的png图片里。ICO并不是一个常用的格式，但是我们依然需要它。使用X-Icon编辑器可以很好地转换之。这是一个免费的web在线工具，我们上传自己的图像然后导出合适大小的图标。步骤非常简单，跟着该网上的步骤指示就OK了。
(X-Icon可以让我们很方便地根据网站指示上传png格式的图片然后导出ico格式的图标，尺寸很丰富~)
给网站添加favicon
完成以上步骤后我们就可以把ico文件存到网站根目录下了。现在我们在网站的顶级域名外加上&/favicon.ico&即可看到该图标。比如/favicon.ico。
几乎每一个浏览器都会自动查找网站根目录下的favicon.ico文件然后显示出来，所以不要将它藏在文件夹里面，不然浏览器无法读取。同时，考虑到跨浏览器的兼容性，我们不要给这个图标添加任何链接。
更新favicon
由于某些原因浏览器很喜欢保存网站图标，这很糟糕，因为我们在开发的过程中需要更新图标，每次我们放进一个新的图标浏览器却不会自动把新的覆盖旧的，看起来很不舒服。
此时，我们可以添加一个临时的html指向favicon.ico的位置。此外,我们应该添加一个短而无意义的图标URL查询字符串,如下:
这将使浏览器认为这是一个迫切需要完成的任务，我们的新图标就这么被更新了。切记更新完毕后记得立马删掉该语句。那么如果我们需要额外再更新着这图标呢?一样的方法，增加v后面的数值就OK了。这样子这个url永远都是独特有用的，但是要确保每次更新完都记得把这串语句删掉。
制作花样繁杂的网站图标
本文只是粗略地介绍一个网站图标制作并投入使用的流程，但实际设计中我们往往需要制作各式各样的图标。比如ioc触屏图标，windows的metro风格图标，google&TV图标等等，所以墙裂建议你查看一下这份favicon审核列表。
(Favico.js允许我们创建动态图标)
你可能需要创建很多可标记的动态图标，标记是为了统计数量，所以很有必要去看这份文件。对了，这文件的跨浏览器支持性不是很好，但是依然很好用。分类： |windows7系统的文件夹图标怎么换？我下载了好多好看的不知道往哪里解压如何修改图标格式，解压出去要用时看不到东西！搞清楚我是要换文件夹小图标！懂的高手来，最好可以远程给我！
windows7系统的文件夹图标怎么换？我下载了好多好看的不知道往哪里解压如何修改图标格式，解压出去要用时看不到东西！搞清楚我是要换文件夹小图标！懂的高手来，最好可以远程给我！
不区分大小写匿名
选择更换图标，选择你喜欢的小图标后点应用，确定。哦啦！
Windows系统默认的下载文件夹默认目录：C:\Documents&and&Settings\你的用户名\Local&Settings\Temp&注意，这个文件夹是隐藏的。要更改IE的默认下载目录，可以通过修改注册表的方法实现。依次展开HKEY_CURRENT_USER\Software\Microsoft\Internet&Explorer键值，此时我们就可以在Internet&Explorer键值下发现一个名为“DownLoad&Directory”的字符串值，其默认值为“C:\Windows\Desktop”。它就是用于定义IE默认文件下载路径的，我们只需对其进行适当修改，将其改为“D:\downloads”，此后再使用IE直接下载文件时，系统就会将文件直接保存到“D:\downloads”
如果帮助到您，请记得采纳为满意答案哈，谢谢！祝您生活愉快！
相关知识等待您来回答
操作系统领域专家
& &SOGOU - 京ICP证050897号48小时排行
大家都在看我想在学校里看网络电视直播，有IPV6协议设置自动获取，也安装了FLASH，但是一直显示下面图标_百度知道
可能是站方自己开发的视频播放插件，不一定是flash player。如果没有安装，打开网页时通常会有安装提示，仔细看一下。
其他类似问题
为您推荐：
ipv6协议的相关知识
等待您来回答
下载知道APP
随时随地咨询
出门在外也不愁

我要回帖

更多关于 阿里旅游去啊网站图标 的文章

 

随机推荐