怎么让网站在浏览器网址前面显示小图标?
2016-07-15 10:02
411 查看
大家在浏览很多网站的时候都会发现在浏览器的地址栏前面会有一个小图标,在浏览器的标签位置也有一个小图标,例如 Baidu 、腾讯等网站都有这样的图标。你的网站上想不想也增加一个这样的小图标呢?有了这个小图标你的网站就会比别人的网站更加醒目,更能引起其他人的注意。
PHOTOSHOP、FLASHFXP、记事本
需要制作一个ico格式的小图标
使用PHOTOSHOP制作一个宽高均为32像素的小图标,制作完成后存储为ico格式的即可。
使用FLASHFXP下载网页到本地,并备份一份以防万一,使用记事本打开网页的源代码。
找到网页源代码的head部分,并在head部分插入下面这句代码,注意href里的地址是你存放ico图标的地址,根据你网站上存放的位置来写。
<link rel="shortcut icon" type="image/x-icon" href="http://www.iswweb.com/images/favicon.ico" media="screen" />
把修改过的网页文件上传到虚拟主机上,然后把做好的ico文件存放到虚拟主机的images这个网站目录里面。
5
大功告成!打开IE浏览器,输入你的网址试试看?是不是已经有了小图标了?
END
小图标的格式一定要是ico格式的,宽度和高度都是32个像素值
如果按照上面的步骤做完后无法看到小图标,请把IE浏览器的缓存清理掉,清理完缓存之后即可看到小图标。
小图标的存放位置一定要和代码里的存放位置一致,否则无法显示。
工具/原料
PHOTOSHOP、FLASHFXP、记事本需要制作一个ico格式的小图标
步骤/方法
使用PHOTOSHOP制作一个宽高均为32像素的小图标,制作完成后存储为ico格式的即可。使用FLASHFXP下载网页到本地,并备份一份以防万一,使用记事本打开网页的源代码。
找到网页源代码的head部分,并在head部分插入下面这句代码,注意href里的地址是你存放ico图标的地址,根据你网站上存放的位置来写。
<link rel="shortcut icon" type="image/x-icon" href="http://www.iswweb.com/images/favicon.ico" media="screen" />
把修改过的网页文件上传到虚拟主机上,然后把做好的ico文件存放到虚拟主机的images这个网站目录里面。
5
大功告成!打开IE浏览器,输入你的网址试试看?是不是已经有了小图标了?
END
注意事项
小图标的格式一定要是ico格式的,宽度和高度都是32个像素值如果按照上面的步骤做完后无法看到小图标,请把IE浏览器的缓存清理掉,清理完缓存之后即可看到小图标。
小图标的存放位置一定要和代码里的存放位置一致,否则无法显示。
相关文章推荐
- 【转】Serverless架构
- 多语言版本网站 数据库设计 What are best practices for multi-language database design?
- 数据库、分布式技术博客网站汇
- inno setup介绍及官方网站地址
- 公司项目架构的演变过程
- YARN基本架构
- MVC架构理解
- 网站收藏
- 微服务实战(三):深入微服务架构的进程间通信
- 微服务实战(一):微服务架构的优势与不足
- Kloxo面板-上传网站程序,管理网站文件,压缩和解压文件,使用FTP帐号
- 揭秘淘宝286亿海量图片存储与处理架构
- iOS中为网站添加图标到主屏幕
- Mark一些网站
- 余额宝技术架构及演进
- [android架构篇]mvp+rxjava+retrofit+eventBus
- 软件架构
- 专访58沈剑:除了架构,我还想认真谈谈管理
- git提交项目到多个网站
- 我在系统设计上犯过的14个错