制作favicon图标

常见的图片格式和特点

格式	优点	缺点	使用场景
jpg	色彩丰富，文件小	有损压缩，反复保存图片质量下降明显	色彩丰富的图片/渐变图像
gif	文件小，支持动画、透明，兼容性比较好	只支持256种颜色	色彩简单的logo/icon/动图
png	无损压缩，支持透明，简单图片尺寸小	不支持动画，色彩丰富的图片尺寸大	logo/icon/透明图
webp	文件小，支持有损和无损压缩，支持动画、透明	浏览器兼容性不好	支持webp格式的app和webview

网站favicon

favicon.ico 一般用于作为缩略的网站标志，它显示在浏览器的地址栏或者标签上。目前主要的浏览器都支持 favicon.ico 图标。

制作favicon图标

（1） 把图标切成 png 图片 （2）把 png 图片转换为 ico 图标，这需要借助于第三方转换网站，例如比特虫：制作ico图标 | 在线ico图标转换工具 方便制作favicon.ico - 比特虫 - Bitbug.net

使用favicon图标

• （1）favicon图标放到网站根目录下

• （2）HTML页面引入favicon图标

• <link rel="shortcut icon" href="./favicon.ico">

网站TDK

其实TDK就是网站的标题（title）、描述（description）和关键词（keyword），TDK是网站很重要的元素，他是网络爬虫爬取你的网站之后最先看到的东西，所以设置好TDK对网站的优化是很关键的。

title(网站标题)

• 是搜索引擎了解网页的入口和对网页主题归属的最佳判断点。

• 通常是网站名（产品名）- 网站的介绍 （尽量不要超过30个汉字）

<title>京东(JD.COM)-综合网购首选-正品低价、品质保障、配送及时、轻松购物！</title>

description（网站描述）:

简要说明我们网站主要是做什么的。

description 作为网站的总体业务和主题概括，多采用“我们是…”、“我们提供…”、“×××网作为…”、“电话：010…”之类语句。

<meta name="description" content="京东JD.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!" />

keywords （关键字）

• 页面关键词，是搜索引擎的关注点之一。

• keywords 最好限制为 6～8 个关键词，关键词之间用英文逗号隔开，采用 关键词1,关键词2 的形式

  <meta name= "keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,京东" />

  • 注：对于我们前端人员来说，我们只需要准备好这三个标签，具体里面的内容，有专门的 SEO 人员准备

盒子阴影

• box-shadow

• • box-shadow: h-shadow v-shadow blur spread color inset;

  • h-shadow 必需，水平阴影的位置，允许负值；

  • v-shadow 必需，垂直阴影的位置，允许负值；

  • blur 可选，模糊距离；

  • spread 可选，阴影的尺寸；

  • color 可选，阴影的颜色；

  • inset 可选，将外部阴影改为内部阴影

• 复合写法：box-shadow: 10px 10px 10px gold,-10px -10px 10px blue ,20px 20px 10px purple;

文字阴影

• text-shadow

• • text-shadow: h-shadow v-shadow blur color;

  • h-shadow 必需，水平阴影的位置，允许负值；

  • v-shadow 必需，垂直阴影的位置，允许负值；

  • blur 可选，模糊距离；

  • color 可选，阴影的颜色；

复合写法： text-shadow: 0 0 3px gold ,0 0 5px gold ,0 0 10px gold ,0 0 15px gold,0 0 20px gold;