制作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;
制作favicon图标相关推荐
- 主题图标_Avada主题网站favicon图标设置详细图文教程
Avada主题网站favicon图标如何设置?很多网站打开后在浏览器标题栏会发现前面有一个小图标,在浏览器标签页和收藏夹中也能看到.这个标志名叫 favicon图标.ico图标.网站图标.是展示网站个 ...
- 网站的favicon图标和TDK的SEO优化
网站的favicon图标 favicon.ico一般用于作为缩略的网站标志,它显示在浏览器的地址栏或者标签上. 目前主要的浏览器都支持favicon.ico图标. 一.制作favicon图标 1.把图 ...
- CSS第九天学习总结—— favicon 图标、SEO优化、logo SEO优化
网站 favicon 图标 favicon.ico 一般用于作为缩略的网站标志,它显示在浏览器的地址栏或者标签上.目前主要的浏览器都支持 favicon.ico 图标. 制作favicon图标 把图标 ...
- 网站favicon图标
网站favicon图标 favicon一般用于作为缩略的网站标志,他显示在浏览器的地址栏或者标签上 制作favicon图标 把图片转换为png图片 把png图片转换为ico图标,可用比特虫:制作ico ...
- favicon图标制作
favicon图标制作详细步骤 一.Favicon简介 收藏夹图标,是其可以让浏览器的收藏夹中除显示相应的标题外,还以图标的方式区别不同的网站. 例如: 二.制作步骤 1.百度搜索favicon在线制 ...
- 网站favicon图标的制作
我们在浏览器的时候,标题栏上会有小图片,如下图 那我们该怎么样实现这种效果呢??? favicon.ico 一般用于作为缩略的网站标志,显示在地址栏或标签中 制作的步骤: 1.制作,先准备好png格 ...
- 制作 Favicon.ico 图标教程
摘要:有一些站长认为 favicon.ico 图标对于一个网站没有什么作用.甚至有一些站长认为,少加载一个图片,页面设计展现的速度更快些.的确,理论上是对的,但乐猪认为这种想法是肤浅的!有这种想法的站 ...
- 精灵图、favicon图标
精灵图 CSS Sprites 也称之为精灵图或雪碧图,是一种背景图片的应用处理方式,将很多小图片合并到到一张大图中去.把整个大图作为背景图,然后通过 background-position 属性将合 ...
- html网页制作favicon页面，图片存在网页显示
html网页制作favicon页面图片存在却无法显示 一.报错页面 二.解决方案 三.原理 一.报错页面 二.解决方案 1.你的favicon文件是否命名为favicon.ico:(文件调用名称是否错 ...
- Avada学习之-如何修改Header-logo和favicon图标
logo和favicon图标如何修改 以下是一些在线生成favicon的网站.一般生成16*16的icon图片即可. 在线生成透明ICO图标--ICO图标制作https://www.ico51.cn/ ...
最新文章
- AI算法领域常用的39个术语（上）
- 获取当前应用程序的文件名
- 红楼梦 --- 花开在眼前
- H5中JavaScript常用代码片段
- 【转】使用 vim + ctags + cscope + taglist 阅读源码
- 算法(23)-leetcode-剑指offer7
- vim高级技巧（split）_小花_新浪博客
- 括弧匹配检验（信息学奥赛一本通-T1354）
- 语义分割最新指南2019版
- java基础总结03-进制
- 非参数统计的Python实现——随机游程检验
- Python小白的数学建模课-11.偏微分方程数值解法
- 深度学习图像分割（一）——PASCAL-VOC2012数据集（vocdevkit、Vocbenchmark_release）详细介绍
- Oracle索引详解
- rs485数据线接反_终于有人把RS485通讯的正确接线方式讲明白了，网友：这下好办了...
- 查看solaris系统的版本和位数
- DM6437的中断和事件
- 如何用PS把照片变成红/白/蓝底
- 真的来了，浏览器端可以直接运行Python了
- VRChat_SDK3_Avatar