什么是favicon.ico?favicon图标制作和制作技巧

  方正视觉经常会碰到客户要求在网页标签栏处加一个小图片,看起来酷酷的,这个的制作其实非常简单,它叫做favicon、 favicon.ico、favicon图标。favicon.ico会显示在浏览器的地址栏,浏览器的标签页上和你的收藏夹中,建立自己的网上品牌这样的细节工作不可少。


  这样大家清楚了什么是favicon.ico?下面方正视觉说一下favicon制作技巧,就是favicon图标的制作。

  制作favicon图标只需要两步:

  一、做一个16*16像素的favicon.ico图片,上传到网站根目录下。

  二、把这段代码放在网页head区域里就行了。

  对于专业人士看起来很简单,那没有基础的人呢,别急,下面方正视觉给大家扩展一下,详细说明favicon.ico图标的制作过程。

  第一步:favicon.ico图片制作

  我们需要用到在线制作工具,省时省力,http://www.favicon.cc/这是一个国外的在线制作工具,功能强大,界面亲和。


  现在网站建设的客户基本都会有自己的logo,所以这里先讲一下,直接上传logo的方法:


  点击插入图片


  选择文件,这里如果是ai格式的logo要另存一下,存成jpg格式,当然还有其它的格式,图片上面有写的很清楚。

  然后点击上传,短暂的等待会出现下面的样式,中间就是你的logo的像素化图像。


  下面还会很贴心的显示出,实际的效果


  点击Download Favicon 会生成favicon.ico图标,下载到本机上就行了。这样的你的企业的favicon.ico图片就制作完成了。

  可能有的企业暂时还没有自己的logo,那么也不用担心,我们可以自己制作一个简单的favicon.ico。

  点击左上角新建一个文件


  下面的界面方正视觉来给大家翻译一下,每个按钮的用途:


  先看右边取色画图,大家都明白,就像window自带的画图工具一样,下面的三个小按钮分别为"橡皮" "取色" "移动"

  橡皮:下面试着在中间的画布上随便图一下,然后点击橡皮工具,擦擦试试。

  取色:有时看到的颜色很漂亮,但又找不到确切的位置,就用这个来取一下颜色。

  移动:画歪了?不怕,点他,移动到喜欢的位置就行了。

  画布下面的四个按钮分别代表:清除场景、创建下一个场景、拷备前一个场景、删除场景。

  这几个按钮的用法就高级一些了,因为favicon.ico也可以做成gif动画的效果,是不是很酷,但每个动作都要我们自己做出来,动作是否连贯就要看你做的细不细了,这是个细心的活,方正视觉就不在这里多说了。有兴趣的朋友可以试试看。

  第二步:把代码放入网页的头部:

  玩够了,也做出个自己喜欢的favicon.ico图标,就要让favicon.ico显示出来了。

  这里插入一个小常识,现在大多数网站程序是cms系统的,cms系统的页面都是用模板形式生成,一般的模板文件也都放在网站根目录的“templets”文件里


  点开以后一般都会有一个“header”开关的文件,后缀名可能不一样,找到这个文件,用Dreamweaver软件打开,显示的内容也会不一样,但只要抓住重点就行了。


  在以上加入代码:就可以了,也不用管上面还有其它什么东西了。

  到这里favicon.ico图标的制作就完成了,希望方正视觉的文章可以帮助到大家。

  说的比较多,但都是切身体会,亲身实践,相信会对朋友们有所帮助。方正视觉 www.whjianzhan.com A5首发,大家转载请注明出处,注明出处的财源滚滚,流量大增,谢谢!

时间: 2024-08-03 16:35:02

什么是favicon.ico?favicon图标制作和制作技巧的相关文章

在线制作favicon.ico 的经验谈

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断 淘宝客 云主机 技术大厅 一直在纳闷,浏览器中的网站ICO 是怎么弄的? 为什么我没有那? 今天才知道. 不少浏览器 都有这个功能现在. 找到了制作Favicon.ico的在线制作地址 http://www.html-kit.com/favicon/ 呵呵.~ 来个说明 * 关于favicon favicon.ico      --      favicon 文件 (

favicon.ico引起的spring security登录后跳转错误

之前一直没发现这个问题是因为在项目中存在favicon.ico文件,这个请求被nginx处理了而未转发给tomcat. 这次因为偷懒还没来得及配置nginx,结果就出现了上面的问题. 出现上述问题的原因是:基本大多数浏览器都会请求favicon.ico这个图标文件用来展示在浏览器的URL地址前面,而这个文件被spring security保护了,所以-有下面的流程: the user requests URL "/". This URL is cached. the browser m

教你制作透明网站favicon.ico图标

从严格意义上,favicon的话题无关SEO技术,也与http://www.aliyun.com/zixun/aggregation/17117.html">Web服务器技术方面的讨论没有太大干系,不过,在我们的网站建设中,为网站打造一个契合网站主题的个性化标志则是必需的,这直接关系到能否成功地塑造网站的品牌.这从某些角度看仍在网站推广的范畴之内,而欲取得成功,不仅包括良好的页面设计.令人印象深刻的网站Logo,也包括favicon. 所谓favicon,即Favorites Icon的缩

网页favicon.ico图标设置(转)

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

网站favicon.ico的制作方法和步骤

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断 淘宝客 云主机 技术大厅 最近因为百度 favicon.ico显示的事,也是闹得favicon.ico图标成为了众多站长的关注热点之一,所以小狼今天就想到了写一篇关于网站favicon.ico制作方法步骤的文章,来给部分站长朋友讲解一下favicon是如何制作的. favicon.ico这个后缀的文件是Windows的图标文件格式的一种,可以存储单个图案.多尺寸.多色

favicon.ico图标提取工具如何使用

  ps:Favicon是favorites icon的缩写,亦被称为website icon(网页图标).page icon(页面图标)或urlicon(URL图标). favicon.ico图标提取工具使用教程: 1.将下载的favicon.ico图标提取工具压缩文件进行解压,双击程序. 2.在网站链接位置输入要下载的网页favicon图标的网页地址. 3.点击查看,就将该网页的favicon图标下载下来了. 4.点击另存按钮,可以将下载的favicon图标文件保存在本地.        

在线生成favicon.ico或ico图标源码

在线|favicon php在线生成ico文件源代码. favicon图标介绍 favicon.ico一般用于作为缩略的网站标志,它显示位于浏览器的地址栏或者在标签上,用于显示网站的logo,如图红圈的位置, 目前主要的浏览器都支持favicon.ico图标. 以下是index.php源代码<?PHP  $output = "";  if(isset($_GET['action'])&&$_GET['action'] == 'make'){      if(iss

【整理】favicon.ico 相关内容整理

      所谓 favicon,即 Favorites Icon 的缩写,顾名思义,是可以是的浏览器收藏夹中除显示相应标题外,还能以图标方式区别不同的网站.当然,这不仅仅是 Favicon 的全部,根据浏览器的不同,Favicon 显示也有所区别:在大多数主流浏览器如 FireFox 和 Internet Explorer (5.5 及以上版本)中,favicon 不仅在收藏夹中显示,还会同时出现在地址栏上,这时用户可以拖曳 favicon 到桌面以建立到网站的快捷方式:除此之外,标签式浏览器

Html中的favicon.ico

一.概述 使用的WEB浏览器是IE5或以上版本,那么将某些网站加入到"收藏夹"后,会注意到在这些网站标题的旁边还有一个独具个性的图标,这就是收藏夹图标favicon.ico.   二.制作方法 ① 将需要作为图标的图片(任意格式),提交给可在线生成16*16像素的ico图标的网站,得到网站的图标(后缀名为ico). ② 下载刚生成的图标文件并上传到网站根目录中即可. 三.注意点 若在低于IE5以下版本的浏览器中显示,应在HTML源文件<head>间添加如下代码:  <