广州网站建设图标怎么设置？favicon与浏览器标签做法

浏览器标签页上那个小方块、手机桌面上那个圆角图标、收藏夹里那个小图，都是同一个东西。尺寸只有十几到几十像素，却出现在客户每一次打开和每一次收藏的时候。网站建设图标 这一块工作量很小，但漏掉的站点不在少数——标签页上一直是浏览器默认的灰色地球，看得出这家公司对细节不上心。

图：浏览器标签页上的图标位置示意

一、它会用在哪些地方

一块图标要适配的场景比想象中多。

1、最小的场景最难做

16×16 像素里放不下一句口号，也放不下完整的企业全称。这个尺寸能表达的只有轮廓和主色。设计时先按最小尺寸验证，再放大到其余尺寸，顺序反了必然返工。

2、手机桌面图标是另一套

添加到手机桌面的图标会被系统裁成圆角，四周要留出安全区，重要元素不能贴边。它和标签页图标可以同图不同尺寸，也可以单独出一个适配版本。多端适配的裁切规则在响应式网站设计里讲过，图标这块适用同一套思路。

3、分享卡片要单独备图

微信、微博等平台分享时抓取的是另一张指定大图，不是标签页图标。这张图尺寸更大，可以是横版，和图标分开准备。

二、网站建设图标怎么设置

落地分四步，做完基本不会漏。

1、按尺寸出一套文件

常用的一套包括 16×16、32×32、180×180 三个尺寸，再加上一个矢量源文件备用。像素图标要手工对齐像素网格，直接把大图缩小会出现边缘发虚。

2、格式用兼容性最好的

浏览器标签图标用支持透明的格式，同时保留一份兼容性最好的老格式做兜底。手机桌面图标用通用格式即可，多数系统都支持透明背景。

3、放到站点根目录并引用

把图标文件放在站点根目录，浏览器会自动识别；同时在页面头部写清引用声明，指向各尺寸文件。两处都做，兼容性最好。只放文件不写声明，部分场景识别不到。

4、上线后清缓存验证

改完图标后本地往往看不到变化，是缓存导致的。清一次浏览器缓存，或用无痕窗口打开验证。手机端要把站点从桌面删除后重新添加，图标才会更新。

三、favicon制作：设计上要避开什么

1、只保留一个识别点

做网站建设图标 时，识别点只能有一个：一个字母、一个简化图形。

图标面积小，一个识别点足够：一个字母、一个简化图形、一个符号。塞进标志全称加图形，缩小后就是一团糊。

2、不要用照片

人物照片、产品照片缩小到 16 像素后完全没有辨识度。图标要用专门为小尺寸设计的图形，而不是把现有素材缩一缩。

3、背景色要考虑深浅两种环境

浏览器标签有浅色和深色两种模式，图标在两种背景下都要看得清。纯深色图形在深色标签上会消失，解决办法是给图标加一个实色底或者描边。

4、留白别太多

有些企业为了显得干净，把图形缩得很小、四周留一大圈空白。结果在实际尺寸下图形只剩几个像素。图形要尽量撑满画面，边缘留一点点余量即可。

四、常见错误与排查

网站建设图标 这一块出问题，多数是路径或缓存，不是图形本身。

1、改版时最容易漏

改版换了标志、换了主色，图标却还用旧的。改版清单里要单列图标一项，和标志文件一起替换。改版相关的检查项在广州企业官网改版要点里有清单，可以合并进去。

2、多站点要各配各的

集团站有多个子站、语言站时，各站图标要有区分，不能全用同一个。访客同时开几个标签页时，图标一样就分不清哪个是哪个。

3、把图标写进交付清单

源文件、各尺寸文件、引用代码位置，都要在交付时说清并归档。后续换标志时才知道该改哪些文件。这类细节属于网站建设服务交付清单里容易被省略的一项，验收时要主动核。

延伸问答：网站图标尺寸 与用法

1、能不能直接用标志当图标

看标志的复杂程度。图形简洁、能单独拆出来的可以直接用；图文组合的标志要拆出图形部分单独处理，全塞进去必然糊。

2、图标需要动态效果吗

不需要。标签页面积小，动效只会分散注意力，还会增加实现复杂度。静态图标足够。

3、多久需要换一次

随标志换。标志没变就不必动图标，避免访客刚建立的印象被打断。

总结：小尺寸，大频次

网站建设图标 是全站露出次数最多的图形，成本却几乎可以忽略。按最小尺寸先验证、多尺寸分别绘制、深浅背景都看清、上线后清缓存验证，这四步做完就到位。优诺网络做官网交付时会把图标文件与引用位置一并归档，改版换标志时直接替换，不留旧图。