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

如下图所示：

那个小图标有个名字叫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

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

  1. link标签实现给网页标题前加一个小图标favicon.ico

    使用方法如下:1.<link rel="shortcut icon " type="images/x-icon" href="./favicon ...

  2. 为网站添加网址图标favicon.ico

    今天终于有时间把domety的图标设计好,并显示在了网站地址前面.如果你还不知道怎么把自己的图标放到网站上,今天DDBug就和你分享一下实现方法. 制作图标 首先是准备一张ico图标,你可以从网上搜索 ...

  3. 让网站不去请求favicon.ico图标

    让网站不去请求favicon.ico图标 favicon.ico 图标用于收藏夹图标和浏览器标签上的显示,如果不设置,浏览器会请求网站根目录的这个图标,如果网站根目录也没有这图标会产生 404.出于优 ...

  4. 如何给网页标题栏上添加图标(favicon.ico)（转）

    如何给网页标题栏上添加图标(favicon.ico)   favicon.ico详解:     favicon是Favorites Icon的缩写,favicon.ico是指显示在浏览器收藏夹.地址栏 ...

  5. favicon.ico的制作

    1.选取需要的图片(jpg的格式等) 2.在网上搜索favicon.ico的制作,将jpg转为ico 3.在html中输入<link rel="shortcut icon" ...

  6. 网站图标 favicon.ico

    默认情况下,浏览器访问一个网站的时候,同时还会向服务器请求“/favicon.ico”这个URL,目的是获取网站的图标. 若没有配置的话,Django就会返回一个404错误,并且浏览器接收到这个404 ...

  7. 如何给网页标题栏上添加图标(favicon.ico)

    favicon.ico详解:     favicon是Favorites Icon的缩写,favicon.ico是指显示在浏览器收藏夹.地址栏和标签标题前面的个性化图标. 设置步骤: 1. 把做好的f ...

  8. 站点图标favicon.ico

    favicon.ico图标: 网站的favicon.ico需要一次额外的http请求,无论你是否有在html里面添加 link链接 <link rel="shortcut icon&q ...

  9. 网页左上角图标 favicon.ico

    显示网页左上角标志图标 <link rel="shortcut icon" type="image/x-icon" href="images/f ...

随机推荐

  1. Python高手之路【六】python基础之字符串格式化

    Python的字符串格式化有两种方式: 百分号方式.format方式 百分号的方式相对来说比较老,而format方式则是比较先进的方式,企图替换古老的方式,目前两者并存.[PEP-3101] This ...

  2. Chrome出了个小bug：论如何在Chrome下劫持原生只读对象

    Chrome出了个小bug:论如何在Chrome下劫持原生只读对象 概述 众所周知,虽然JavaScript是个很灵活的语言,浏览器里很多原生的方法都可以随意覆盖或者重写,比如alert.但是为了保证 ...

  3. ABP文档 - Mvc 视图

    文档目录 本节内容: 简介 AbpWebViewPage 基类 简介 ABP通过nuget包Abp.Web.Mvc集成到Mvc视图里,你可以像往常那样创建常规的视图. AbpWebViewPage 基 ...

  4. 在Ubuntu 16.10安装mysql workbench报未安装软件包 libpng12-0错误

    1.安装mysql workbench,提示未安装软件包 libpng12-0 下载了MySQL Workbench 6.3.8   在安装的时候报错: -1ubu1604-amd64.deb 提示: ...

  5. .net windows Kafka 安装与使用入门(入门笔记)

    完整解决方案请参考: Setting Up and Running Apache Kafka on Windows OS   在环境搭建过程中遇到两个问题,在这里先列出来,以方便查询: 1. \Jav ...

  6. [C#] C# 知识回顾 - 学会使用异常

    学会使用异常 在 C# 中,程序中在运行时出现的错误,会不断在程序中进行传播,这种机制称为“异常”. 异常通常由错误的代码引发,并由能够更正错误的代码进行 catch. 异常可由 .NET 的 CLR ...

  7. EntityFramework的多种记录日志方式,记录错误并分析执行时间过长原因(系列4)

    前言 Entity Framework 延伸系列目录 今天我们来聊聊EF的日志记录. 一个好的数据库操作记录不仅仅可以帮你记录用户的操作, 更应该可以帮助你获得效率低下的语句来帮你提高运行效率 废话不 ...

  8. 深入理解javascript函数定义与函数作用域

    最近在学习javascript的函数,函数是javascript的一等对象,想要学好javascript,就必须深刻理解函数.本人把思路整理成文章,一是为了加深自己函数的理解,二是给读者提供学习的途径 ...

  9. 微信小程序二维码推广统计

    微信小程序可以通过生成带参数的二维码,那么这个参数是可以通过APP的页面进行监控的 这样就可以统计每个二维码的推广效果. 今天由好推二维码推出的小程序统计工具HotApp小程序统计也推出了带参数二维码 ...

  10. ubuntu+mono+jexus 搭建.net的web平台 实现.net跨平台

    准备工作: vmware 用来安装 ubuntu 下载地址:VMware-workstation-9.0.1-894247.exe.tar 注册码: 1A4P8-DMK0N-FZ431-7K8NH-2 ...