艺琼网络
臻至美 · 韵天成
建站信息
网站首页
建站资讯
建站常识

网站建设标题栏前的小图标怎么做?

浏览:10014人次 发布日期:2018-03-16 来源:艺琼网络

  关于本站原创内容禁止转载的维权通告

这实际上是放在网站根目录下的一个命名为favicon.ico的ICON小图标。

  很多朋友建设网站后浏览别人的网站发现网站标题栏会出现一个小图标(见下图),瞬间感觉自己的网站并不完美。没有关系,艺琼网络教你如何做这个小图标(favicon.ico)并让它显示在你的网站标题栏里。

 

网站标题栏小图标

 

  其实,这个小图标是存放在你网站目录里的一个后缀为ico的小图标文件。首先,咱们来看看如何做这个小图标。这里需要用到2个软件:一个是Photoshop,什么版本都可以,笔者用的是Photoshop 7.0。另一个是Awicons,用V9.4.0吧。没有安装的去百度搜索一下就有下载。OK,准备就绪。

 

第一步:

  在Photoshop里新建一个宽高为16 X 16像素的PSD文件,然后将你的LOGO(建议为PNG透明背景图片)拖放到这个文件里,按Ctrl + T修改图标的尺寸(修改尺寸时注意按住Shift键,进行等比缩放),让图片正好全部显示在这个16 X 16像素的框框里。然后把背景图层隐藏掉,另存为PNG透明背景图片。

 

第二步:

  打开Awicons软件,新建一个文件,将像素同样改成16 X 16像素。直接将上面做好的PNG小图片拖到Awicons里,然后点保存按钮,命名为favicon.ico。

Awicons做ICO小图标

 

  经过上面的操作,你已经得到了一个可放置在网站标题栏前的小图标。怎么放呢?有两种方法可以实现这个功能。

 

第一种(强烈推荐,简单、好用):

  将做好的ICO图标favicon.ico上传到网站的根目录即可,全站所有页面都会读到这个图标并显示在网站的标题栏里,注意,一定且必须是favicon.ico,不然浏览器无法读取到的。

 

第二种:

  在网页代码中的<head>和</head>之间添加下列代码:

  <link rel="icon" href="ico图标地址" type="image/x-icon">

  这种方式允许ICO图标任意命名并放在网站的任意目录里,修改上面代码中的“ico图标地址”为你的图标真实地址即可。这种方式要麻烦许多,而且每个页面都要加代码,因此,不推荐。

 

  整个过程很简单,艺琼网络经常为客户网站添加这种标题栏小图标,一般十分钟内就完成了。如果你不会处理,笔者可以帮你。

分享
本文由艺琼网络原创,禁止转载、复制、传播,深圳市艺琼网络科技有限公司保留著作权。
您可能感兴趣的内容
112
直招招聘网站建设解决方案直招网站应主要突出中短期用户在使平台的便捷性,提升网站的可操作性和用户体验。
284
AI人工智能对网站建设行业的影响研究作为网站建设行业的从业者,笔者认为,AI人工智能目前并不能取代程序员的工作。
397
深圳爱升PCB线路板及IC基板网站建设项目完成基于设计、开发多个线路板、PCB、电子电路、元器件网站的经验,在爱升官网的设计上,迎合了PCB行业的产品特性,全站采用绿色、深蓝色为主调色,大量引入线路纹理元素,给访问者打开网站的第一感留下深刻的行业印象。
6536
全国型家教网站建设成本探底全国型家教网站建设成本大约在3-5万元左右。
6340
深圳网站建设简易攻略深圳网站建设公司多如牛毛,随便百度一下就会出来很多。
6834
外贸商城网站建设常识建设外贸商城网站则是外贸企业对外展示和宣传的主要窗口之一。
联系电话:13824347551 电子邮箱:service@yiqnet.com
深圳市艺琼网络科技有限公司 2007-2025 版权所有 | ICP许可证:粤ICP备14034579号
公司主营:深圳做网站、东莞做外贸网站、惠州网站制作免费上门,为全国各地做网站的企业和个人提供在线一条龙建站服务。
网站制作服务 企业网站建设 外贸网站建设 模板网站建设