怎样为你的网站制作icon图标?

什么是网页的icon?

什么是网页的icon呢?就是当你在浏览器中打开一个网页时,网页标签(tab)最左部位的那个小图标。例如百度的网页icon为百度独特的熊掌标识:

网页icon有什么作用?

网页的icon不仅能让你的网站显的更为专业,还能突出你的品牌和特色,一个有意思的或者美观的或者独特的网页icon能给你的读者留下比较深的印象。
而且在用户使用的过程中,如果浏览器打开了众多的标签,一个好的icon能让用户方便的点回你网站的页面。

用画图工具制作icon图标

如果你在搜索引擎中搜索 “网页icon制作”,能找到很多网站为你提供免费的icon制作或者生成的工具,杂七杂八,好坏都有,不多评价了。这篇文章主要写给那些不想在第三方网站上生成,并且也不熟练PS技术的同学。

因为这里讲的是用Windows系统默认的画图工具制作一个简单的网页icon,最后并在多个浏览器中测试显示的效果。

1. 在windows中打开画图工具(例如我的英文系统为paint),将图片尺寸设置为32×32像素,或者16×16,建议选32,因为太小了不太好画,清晰度也不够。
32×32,还是太小了,没有办法画,用放大镜(view ->放大镜)将图片放到最大然后进行编辑。

设计的部分就不多讲了,你的icon需要突出你网站的主题,就像公司的商标一样,例如CodeWenda.com,我的设计是以Code首字母C加上问号演变而来的一个图标,比较简洁清晰,将图片放大效果如下,看大图有点粗糙,不过效果还不错。

将图片保存为favicon.ico,注意扩展名为ico

2. 图片制作完成之后,将图片ftp(或使用别的工具)保存在你网站的根目录下,例如Linux下为/var/www/html/,默认情况下,重新打开你的网站应该能在页面中显示你的icon图标了。
如果没有显示有可能因为缓存的原因,可以清空本地缓存重新尝试。

以上的图标在Code网站显示的效果如下(分别为Chrome,Firefox和Edge浏览器):

Code问答 | CodeWenda.com

发表评论

电子邮件地址不会被公开。 必填项已用*标注

− 1 = 1