那个小图标有个名字叫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上传到网站的根目录,如果是美国的空间,关闭浏览器后重新打开你的站点就可以看到网站图标了。

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

之间加上

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

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

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

这里需要明确的是,在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徽标那样的波浪

html地址欄小圖標,网站地址栏前面的小图标favicon.ico制作方法相关推荐

  1. browser html page iconic show error : 瀏覽器html頁面小圖標按鈕出現錯誤

    browser html page iconic show error : 瀏覽器html頁面小圖標按鈕出現錯誤 下載一個新的瀏覽器,問題仍然在,注冊表出問題老.

  2. html:link-icon标签引入网站小图标favicon.ico

    示例 <link rel="shortcut icon " type="images/x-icon" href="favicon.ico&quo ...

  3. 前端如何设置浏览器网页标签页前的小图标favicon.ico

    前端如何设置浏览器网页标签页前的小图标favicon.ico 步骤1: 将小图标favicon.ico文件(或者普通的icon小图片)放在项目的public或者static目录下 步骤2: index ...

  4. 网站图标favicon.ico

    一.图标介绍 favicon.ico 一般用于作为缩略的网站标志,它显示在浏览器的地址栏.浏览器标签上或者在收藏夹上,是展示网站个性的缩略 logo 标志,也可以说是网站头像,目前主要的浏览器都支持 ...

  5. 网站的图标 favicon.ico

    网站图标是什么 浏览器收藏夹和地址栏网站网址前面的个性化图标,常被成为网页小图标.网站缩略图标或者收藏夹图标,是网站的重要识别方式. 如上图中CSDN的C favicon.ico 默认情况网页未指定i ...

  6. 网站图标 favicon.ico 快速在线制作工具

    建议生成16*16的比较小.加载快.兼容好. 这两个工具都很不错!!! 制作完,放在网站目录里. 把下面这行代码加入到网页内,href=""改成你自己的favicon.ico位置. ...

  7. html设置网站图标favicon.ico【带在线图标制作网址】

    一般图标设置名称为favicon.ico,如果不写默认会调用该网站根目录下的favicon.ico 在< head >标签当中添加如下代码: <link rel="shor ...

  8. 微信小程序腾讯地图bindregionchange事件导致图标闪烁的解决方法

    微信小程序中的腾讯地图,我们讲地图上放置一些图标,如共享单车的位置,如果我们在bindregionchange的函数中写入寻找图标位置的代码,我们启动后,或者移动地图的中心位置后,就会出现图标闪烁的现 ...

  9. 设置网页地址栏中的小图标

    网页中如何设置在网页地址栏中的小图标: 下面我们就讲讲: <link rel="SHORTCUT ICON" href="http://****/*****.ico ...

最新文章

  1. 【廖雪峰python入门笔记】tuple_“元素可变”
  2. js模块化:默认导出 export default
  3. python遍历文件对象_Python文件常见操作实例分析【读写、遍历】
  4. MM 常用table
  5. Linux(debian7)操作基础(十四)之文本搜索命令grep使用方法
  6. Spark中foreachRDD、foreachPartition和foreach解读
  7. 嵌入式Linux系统编程学习之四Shell编程
  8. 华为2018年收入超阿里腾讯总和,任正非:华为最大问题是赚钱太多
  9. YCOJ过河卒C++
  10. 第一道web类CTF题——一起来撸猫
  11. NXP TJA1040, TJA1042, TJA1050 TJA1051, TJA1057, TJA1044, TJA1055区别
  12. [数论 反演]BZOJ4816 [Sdoi2017]数字表格
  13. Blue Coat让企业在降低风险的同时利用网络应用程序
  14. 日期计算excel_在Excel中计算日期范围内的项目
  15. word如何转excel
  16. 基于JAVA银创科技有限公司人事信息系统计算机毕业设计源码+系统+数据库+lw文档+部署
  17. android 平板hdmi开发,安卓平板电脑的新突破口:HDMI in 视频输入,取代便携显示器...
  18. rtx3050和rtx3060差距大吗 rtx3050和rtx3060的区别
  19. 消息钩子使用教程(转)
  20. 在一个excel里面直接批量从谷歌地图抓取经纬度(vba部分)

热门文章

  1. java 填充字符串_Java字符串右补齐——String.format
  2. uniapp切换中英文
  3. 如何在Genymotion虚拟设备上安装Google框架(Play,Accounts等)? [重复]
  4. 苹果手机10秒解除锁屏_忘记苹果锁屏密码10秒解决 音量键选择wipedata/
  5. 前端面试题型汇总(适合应届/社招1年水平)
  6. 蓝桥杯 ADV-222 求arccos
  7. 指针--指针的创建和指针的大小
  8. AutoConfig工具使用指南
  9. 计算机辅助翻译优缺点,计算机辅助翻译优缺点
  10. PDF转Word文档怎么转?两招教你学会PDF转word