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

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



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

制作favicon图标只需要两步:

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

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

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

第一步:favicon.ico图片制作

我们需要用到在线制作工具,省时省力,https://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首发,大家转载请注明出处,注明出处的财源滚滚,流量大增,谢谢!

分类:其他
时间:2013-12-08

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

如何给网站制作favicon.ico图标

favicon.ico图标主要用于区别不同的网站,其实,也就是网站的头像,比如打开百度,会看到每个网页前都带有百度的特有标志。那么,网站favicon.ico图标该如何制作呢?

Discuz建站教程:[37]如何修改favicon.ico图标

如何修改favicon.ico图标?网站建好的时候默认的是discuz的泡状图标!需要自己更改替换掉!下面介绍一下如何更改替换favicon.ico图标

网站标识favicon.ico图片的制作方法和步骤

网站标识是网站的一大形象,好的网站标识不仅能够提升网站的美观度,而且可以增加网站的吸引力,提升流量。网站的标识文件为favicon.ico,下面介绍一个简单的制作方法。

如何给你的网站加上favicon.ico图标:[1]

favicon.ico图标是网站的缩略标志,可以显示在浏览器标签、地址栏左边和收藏夹,是展示网站个性的缩略logo标志,也可以说是网站头像,如果要让网站看起来更专业、更美、更有个性,favicon.ico是必不可少的,所以你在本站使用ICO图标转换工具就可以轻松达到你的要求。

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

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

discuz论坛favicon.ico图标不显示的解决方法

favicon.ico图标做法很简单,只需要你有一个自己想要的图,然后在百度搜索一下favicon.ico在线生成,点进去某个网站,提交你自己的图案,一般选择32*32格式,就会得到一个完整的favicon.ico图标了,然后用FTP工具把这个图标上传到你空间根目录,刷新一下,你就会发现自己网址前面也有一个图标了那么,在使用discuz建站的时候,上传到网站根目录却不显示这个图标,为什么呢?在这里,草根站长网管理文帮才有一个小窍门按照我们上面说的做好图标并上传后,请登录discuz后台,也就是你

如何制作网站ico小图标

favicon.ico一般用于作为缩略的网站标志,它显示位于浏览器的地址栏或者在标签上,用于显示网站的logo,如图红圈的位置, 目前主要的浏览器都支持favicon.ico图标,对于拥有网站的人或企业来说,凸显网站LOGO主体,创建favicon.ico是必要的。 若对你有帮助,请在经验页面上点【投票】予以支持,或点击右方的【双箭头】来分享;想了解更多有用经验,请直接点击我的头像,或点击上方【+关注】关注我哦O(∩_∩)O!

.ico格式图标制作教程:DIY桌面图标攻略(魔方)

很多朋友对自己电脑桌面上快捷方式的图标有“洁癖”,希望自己可以DIY设计制作一套极具个性的桌面图标,替换掉系统、软件自带的快捷方式图标。但是我们在替换桌面上快捷方式的图标时可以看到:在桌面图标文件格式仅支持.ico\.dll\.icl\.exe等这几种格式(如下图所示)。而目前常用的图片格式.jpg\.png\.bmp等却不能直接使用,那该怎么办?本文教程就是借助魔方电脑大师,DIY一套极具个性风格的桌面图标。(我们以软媒旗下闪游浏览器图标DIY设计更换为例。)温馨提示:本教程适用于Win7、Win8、W

如何制作自己网站地址的ico小图标?

做好一个网站其实不容易,有太多的小细节可以处理。比如经常可以看到别人的网址在浏览器中输入时会有一个标志性的图标,如果不注意可能觉得没有什么。但细想这也是品牌宣传,岂能不重视的,还是想想怎么来处理的。就这么一个小功能应该是不难的。