[转]网站地址栏小图标favicon.ico的制作方法

有人也许会好奇,有的网址前面有个漂亮的小图标而且有的网站图标还会动,这是怎么做到的呢?

如下图所示:

那个小图标有个名字叫favicon.ico,网站图标虽小但可以起到很好的点缀作用,尤其是当浏览者将你的网站放入收藏夹之后,网站图标的作用就出来了,它可以使你的站点在众多网址中突出显示,对于用户体验起到很好的作用,好了,废话不多说,现在来告诉大家怎么做favicon.ico这个网站图标文件。

虽然现在有很多在线制作网站图标的网站,但制作出来的图标实在是差强人意,而且不支持透明样式的ico,这非常糟糕,而为一个小小的文件再装个专业的ico制作工具又有点浪费,其实用Photoshop就可以很方便的制作出漂亮的ico文件,我们知道Photoshop是无法保存ico格式的文件的。

怎么办呢,下载这个东东ICOFormat,下载以后将解压出来的文件拷贝到“C:\Program Files\Adobe\Adobe Photoshop CS2\Plug-Ins\文件格式”这个文件夹中。

之后再保存的时候就会有ico这个选项了,这样不但可以制作透明样式的网站图标,而且制作出来的ico边缘非常光滑,比在线制作的精美很多。工具准备好了,开始制作。

挑一张喜欢的图片,调整成16×16大小,通过Photoshop保存为favicon.ico。注意,使用ICOFormat插件时,图片大小不能超过256×256,否则保存时还是看不到保存为ico的选项。

之后将制作好的favicon.ico上传到网站的根目录,如果是美国的空间,关闭浏览器后重新打开你的站点就可以看到网站图标了。

如果使用国内主机或者无法看到网站图标,请进行下面的操作

在<head></head>之间加上

<link rel=”shortcut icon” href=”favicon.ico” type=”image/x-icon” />

而动态的网站图标很简单,就是一张GIF动画,同样是16×16大小,上传到网站根目录后,在《head》《/head》之间加下面这一句即可。

<link rel=”icon” href=”favicon.gif” type=”image/gif” >

加上下面的代码会让对方收藏夹中的ICO跟着改变。

<link rel=”Bookmark” href=”favicon.ico” />

到这里如果操作无误,你就会在自己的网址前面看到自己制作的小图标了,如果还是看不到的话,请保证操作正确,清空浏览器的缓存文件,刷新页面就可以看到了。至于动态的网站图标,用火狐浏览器才会生效

这里需要明确的是,在favicon.ico中,favicon是文件名,ico是扩展名,文件名是可以随意起的,但之所以叫favicon,是因为在国外的主机市场,大多数的主机如果发现根目录里有一个favicon.ico文件的话会自动将其定义为网站的图标,不用修改程序的源代码,我们只要将做好的网站图标文件保存为favicon.ico并上传到网站的根目录即可,很方便。但在国内的主机市场,目前很多还没有这个功能,只能通过修改源代码的方式将favicon.ico加上去。

最后给出一个在线制作网站图标的网站:http://www.html-kit.com/favicon/

按照提示一步一步操作,最后你可以下载到你所需要的东西,包括ico文件和源码。

地址:http://www.chami.com/html-kit/services/favicon/

地址:http://www.chami.com/html-kit/services/

Buddy Icon from Pics //把图片转换成ICO格式,还可制作PNG格式的背景图片

Image Embellisher //制作特殊效果的图片,比如立方体,Windows徽标那样的波浪

原文出处

原文作者:funkey

原文链接:http://www.ifunkey.com/1121.html

时间: 2024-10-21 00:47:07

[转]网站地址栏小图标favicon.ico的制作方法的相关文章

网页左上角图标 favicon.ico

显示网页左上角标志图标 <link rel="shortcut icon"type="image/x-icon"href="images/favicon.ico" /> 或者 <link rel="shortcut icon" href="images/114dyy.png" /> 貌似图片格式不是问题. 网站的图标一般都放在根目录,文件名为favicon.ico,比如博客园的图标网

PHP - 设置地址栏小图标

效果: 1/把icon图标直接放到根目录. 2/在header标签中写下: <link rel="icon" type="image/x-icon" href="favicon.ico"/>

favicon.ico的制作

Google最近换了新的favicon.ico,一个朋友是Google粉,应邀为他的个人主页也设计制作了一个. 用Photoshop图层样式制作: 写一个大的字母,选择好文字大小和文字样式. 复制四个文字图层,设置每一个图层的文字的前景色,用拾色器在Google图标上获取. 在每个颜色的图层中用选择器选择所需的区域,在图层添加蒙版,得出来四个颜色的字母. 导出为png文件. 用IcoWorkshop生成ico文件: 在软件中打开png文件,点击小窗口右上角,以图像创建新图标,勾选所需要的大小和像

网站微图标,页标签,favicon.ico

随便打开一个网页:比如 http://www.baidu.com/ 可以看到在浏览器的标签头上面显示了一个图标,也就是我们常说的favicon.ico, 由于这篇文章主要讨论favicon.ico,以及各个浏览器对其的不同处理,所以还是新建web项目如下: home.html 代码如下: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>ho

网站小图标

访问网站的时候,可以在标题栏.搜索栏.收藏夹看到网站的小图标,它们其实就放在网站根目录下,名为:favicon.ico 如: http://www.cnblogs.com/favicon.ico 制作Favicon.ico的方法: 创建2个256色的小图片:像素大小为32×32(用于桌面图标)和16 ×16(用于浏览器),调色板要选用"Windows 默认调色板",不然,在最终的效果展示中图形可能会发生迥异于您初衷的颜色上变化. 使用: 图片制作好后,使用如Image2Ico之类的小程

网站前面的图标

找自己的个性图片(一般不要太复杂,最终图片比较小,也看不清),百度搜索"favicon.ico在线制作",任选一个链接. 如何使用Favicon.ico? 1. 将成功生成的图标文件下载并改名为favico.ico,上传到网站根目录.2. 在网站首页的源文件 head 之间插入下面的代码: <link rel="shortcut icon" href="/favicon.ico"/> <link rel="bookma

Apache中 File does not exist: /var/www/html/favicon.ico

今天搭建lamp架构的电子商务网站,突然间发现/var/log/httpd/errorlog报错了[Sat Jul 12 09:14:53 2012] [error] [client 192.168.1.152] File does not exist: /var/www/html/favicon.ico[Sat Jul12 09:25:19 2012] [error] [client 192.168.1.152] File does not exist: /var/www/html/favic

Failed to load resource: the server responded with a status of 404 (Not Found) favicon.ico文件找不到

今天使用sublime以localhost方式打开html文件时(使用wamp环境提供一个Apache服务器,html文件存在于wamp环境的www文件夹下),出现favicon.ico文件找不到问题 查看D:\wamp\logs文件夹的apache_error.log文件发现以下错误信息: [Thu May 11 16:40:06 2017] [error] [client ::1] File does not exist: D:/wamp/www/favicon.ico, referer:

导航的标题与小图标

导航的标题与小图标的添加 只要在网站根目录放一个favicon.ico的图片文件,浏览器请求时候这个文件会自动返回显示出来 <link rel="icon" href="~/Content/NormalContent/images/favicon.ico" type="image/x-icon" />