给单页网站添加ico图标

什么是favicon.ico?


中文名字叫网站头像,除网站标题外,使用图标方式来区别不同的网站。使用浏览器打开网站的时候,在URL前面显示的小图标,或者在搜索引擎搜索网站的时候,在标题前面显示的图标,就是favicon.ico图标。如下图所示:


danye002.jpg


danye003.jpg


添加favicon.ico图标有什么好处?


1.可以明确区别你的单页网站和其他网站。


2.能提高网站的专业性。


3.对搜索引擎非常友好。


4.提高用户信任和用户体验。


5.利用SEO优化排名。


在线制作favicon.ico图标:


1.使用PS软件,制作长16像素宽16像素的图片,或者长32像素宽32像素的图片,图片格式可以保存为png,jpg,gif等格式。如果自己不会使用PS制作图片,可以花点小钱,请做美工的人,给你打造一个精美的图片。


2.使用PS制作的16*16或者32*32的图片,是无法直接保存ico格式的,需要把图片转换成.ico格式。你在百度里面搜索“ico图标在线制作”,会出现很多在线制作网站,随便选择一个进行制作和转换即可。


这里使用这个网站http://free.logomaker.cn/tools/icoMaker.aspx,来做讲解。打开网址,然后点击上面的“选择本地图片”按钮。


danye004.jpg


3.在弹出的添加图片界面里面,找到制作好的图片,选中图片,然后点击“打开”。


danye005.jpg


4.图片添加进去后,会出现2个选项,一个是保存为16*16长宽的ico图标,一个是保存为48*48长宽的ico图标。由于浏览器显示的是16*16大小的图标,这里建议保存为16*16大小的图标。


danye006.jpg


5.点击“保存图标(16*16)”图标,会弹出保存界面,选择合适的保存路径,然后点击“保存”,就把图标保存下来了。


danye007.jpg


给单页网站添加上favicon.ico图标!


1.把保存的图片,复制到单页网站根文件夹里面。


danye008.jpg


2.用Dreamweaver打开单页网站首页index.html,找到<head></head>代码标签,把这个代码<link rel=”shortcut icon” href=”favicon.ico” />添加到<head></head>中间。然后保存你的操作设置。


danye009.jpg


3.然后使用FTP软件,把单页网站程序,全部上传到空间根目录下。到此为止,代码就都添加好了。使用IE浏览器打开网址,就能在URL网址前面看到你设置的ico图标了。


在使用搜索引擎搜索一些内容的时候,有很多人的网站,都没有设置这个ico图标,是一大败笔。今天写了这篇文章,告诉大家给自己的单页网站添加上ico图标的方法,让你的网站也具有个性化,跟其他人的网站区别开来。


使用这个方法,也可以给自己的博客、企业网站、商城、论坛等网站,添加个性化的ico图标,在茫茫网站中,让你的网站标新立异!

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://danyeyingxiao.com/danyewangzhanzhizuo/8.html

发表评论

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。