中国石凳联盟 登录注册

收藏夹里的小图标

rockage··1 回复·597 浏览

发表回复
FONT-SIZE: 18px" id="post1"
制作浏览器地址栏收藏夹里的小图标
E

如果您使用的 WEB 浏览器是 IE5 或以上版本,那么当您将某些网站(如:网易、Yahoo等等)加入到“收藏夹”后,您是否注意到在这些网站标题的旁边还有一个独具个性的图标呢?这就是“收藏夹图标”(F avorites Icon)。就拿“网易”来说,在标题“Welcome to netease !” 的左边,IE5 默认的图标被换成了一个红色的变体中文“易”字。非但如此,如果您正在浏览“网易”,这时 IE5 的地址栏中的图标也同样是一个红色的“易”字。也正是因为这些个性化的图标使得他们在您的“收藏夹”众多的白底蓝 e 中显得格外的醒目。 您是不是也希望为您的网站加上一个体现您的主页的风格和个性的图标呢?其实要实现这一目的非常简单。
)eSR

第一步,准备一个图标制作软件。首先您必须了解所谓的图标(Icon)是一种特殊的图形文件格式,它是以 .ico 作为扩展名。普通的图像设计软件无法使用这种格式,所以您需要到一个软件下载站点去下载一个图标制作软件。您也可以访问http://www.favicon.com/,这里提供一个免费的在线“收藏夹”图标生成器,如果您 E 文够好的话,在这里您还可以了解到更多的关于“收藏夹”图标的知识
x

第二步,确定“收藏夹”图标的规格。
Gi(

“收藏夹”图标有着它特有的规格:图标的大小为 16 * 16(以像素为单位);所使用的颜色不得超过 16 色。 (为了清晰)
G

第三步,设计一个属于您自己的图标。
h

您可以将您的网站的 LOGO 做成一个缩图或者另外设计一个别具特色的图案来作为“收藏夹”图标。总之,它一定要是属于您自己的,并且能很好的代表您的网站的风格和个性。
=5V2yb

然后将这个图标文件命名为:f avicon.ico。
uN

最后,将这个图标文件(favicon.ico)上传到您的网站所在的服务器的根目录下。您不需要对您的网页文件作任何的修改,IE5 会自动的不停的搜索您的网站的根目录,只要它一发现了 favicon.ico 这个文件,就会将该图标显示在访问者的地址栏和收藏夹列表中了。
A

如果您希望为不同的页面设置不同的“收藏夹”图标,那么您就需要在该网页文件的 HEAD 部分加入下面的内容:
2:E(

注意:该图标的路径一定要使用绝对路径。
}s$

还有一点需要说明的是:有些 Web 站点的主机服务器(如:Geocities )不支持图标文件格式,这时您就需要与管理员联系,要求他开通图标文件格式的支持。马上行动,让您的网站也拥有一个“收藏夹”图标吧!
}QG2


点赞0 收藏
"TABLE-LAYOUT: fixed"







"blog_text" class="cnt"

"t_msgfont"
初学者只需要几个简单的步骤即可建立一个收藏夹图标:

"1"


为你的网站创建一个图标( 16 x16 )

上传favicon.ico到根目录

复制并粘贴代码到head部份
"#808080"
link rel=”shortcut icon” href=”favicon.ico” type=”image/x-icon” /


重新载入你的网站,完成!

你被第一步吓到了?你不会设计图标?没关系,网络上有很多的收藏夹图标生成器,这里为你介绍20款最好的。

Favicon.cc
-一个web 2.0风格的收藏夹图标生成器。 你可以自己绘制图标或者上传图片在线生成收藏夹图标。支持图标预览。

"http://www.favicon.cc/" target="_blank"
"0" alt="http://www.favicon.cc/" src="http://cssjuice.com/wp-content/uploads/2007/08/tn_faviconico-generator_1186488980758.png"/



256pixels
-
"http://www.256pixels.com/" target="_blank"
"0" alt="http://www.256pixels.com/" src="http://cssjuice.com/wp-content/uploads/2007/08/tn_256-pixels.png"/



Favicon2dots
- 一个非常个性的收藏夹图标生成器,日本网站。
"http://favicon2dots.com/" target="_blank"
"0" alt="http://favicon2dots.com/" src="http://cssjuice.com/wp-content/uploads/2007/08/tn_favicon2dots_1186490273668.png"/



Converticon
-可以从指定的图片URL或上传图片生成Favicon.
"http://converticon.com/" target="_blank"
"0" alt="http://converticon.com/" src="http://cssjuice.com/wp-content/uploads/2007/08/tn_converticon_1186491903318.png"/



FaviconTool
- 最酷的Favicon收藏夹图标生成器。
"http://www.favicontool.com/" target="_blank"
"0" alt="http://www.favicontool.com/" src="http://cssjuice.com/wp-content/uploads/2007/08/tn_favicons-generator-tool789.png"/



Webscriptlab Favicon Generator

"http://www.webscriptlab.com/favicongenerator.php" target="_blank"
"0" alt="http://www.webscriptlab.com/" src="http://cssjuice.com/wp-content/uploads/2007/08/tn_web-script-lab-favicon-generator.png"/



Flavicon
除了提供收藏夹图标生成器,这个网站还提供收藏夹图标定制,呃,如果你愿意花那个钱的话。
"http://www.flavicon.com/" target="_blank"
"0" alt="http://www.flavicon.com/" src="http://cssjuice.com/wp-content/uploads/2007/08/tn_flavicon_1186491332262.png"/



Favicon Generator and Gallery
- 这个网站包含一个收藏夹图标生成器,另外还收集了很多漂亮的Favicon,能给你一些灵感。
"http://www.favicon.co.uk/" target="_blank"
"0" alt="http://www.favicon.co.uk/" src="http://cssjuice.com/wp-content/uploads/2007/08/tn_favicon-generator-and-gallery_1186489218368.png"/



FaviconGenerator.com
- 简单的Favicon生成器。
"http://www.favicongenerator.com/" target="_blank"
"0" alt="http://www.favicongenerator.com/" src="http://cssjuice.com/wp-content/uploads/2007/08/tn_favicon-generator-make-free-favicons.png"/



Dagondesign Favicon Generator

"http://www.dagondesign.com/tools/favicon-generator-tool/" target="_blank"
"0" alt="http://www.dagondesign.com/" src="http://cssjuice.com/wp-content/uploads/2007/08/tn_favicon-generator-tool-dagon-design.png"/



Favicon.ru

"http://favicon.ru/en/" target="_blank"
"0" alt="http://favicon.ru/en/" src="http://cssjuice.com/wp-content/uploads/2007/08/tn_faviconru.png"/



Faviconsfor.us

"http://faviconsfor.us/" target="_blank"
"0" alt="http://faviconsfor.us/" src="http://cssjuice.com/wp-content/uploads/2007/08/tn_favicons45628733.png"/


更多的收藏夹图标生成器13. "http://www.degraeve.com/favicon/" target="_blank"
"#0000ff"
http://www.degraeve.com/favicon/


14. "http://www.antifavicon.com/" target="_blank"
"#0000ff"
http://www.antifavicon.com/


15. "http://www.html-kit.com/favicon/" target="_blank"
"#0000ff"
http://www.html-kit.com/favicon/

- 也就是最热门的一个收藏夹图标生成器。
16. "http://www.favicon.jp/" target="_blank"
"#0000ff"
http://www.favicon.jp/

- 日本网站。
17. "http://tools.dynamicdrive.com/favicon/" target="_blank"
"#0000ff"
http://tools.dynamicdrive.com/favicon/


18. "http://www.faviconprime.com/" target="_blank"
"#0000ff"
http://www.faviconprime.com/


19. "http://shaheeilyas.com/favicon/" target="_blank"
"#0000ff"
http://shaheeilyas.com/favicon/


20. "http://www.faviconfactory.com/" target="_blank"
"#0000ff"
http://www.faviconfactory.com/







点赞0 收藏
发表回复
发表回复