【前端】网站favicon图标制作

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

一、制作favicon图标
  • 把品优购图标切成png图片。(具体切图过程请见之前的文章,PSD文件需要可以在评论留言)

  • 把png图片转换成ico图标,这需要借助于第三方转换网站,例如比特虫:https://www.bitbug.net/
二、favicon图标放到网站根目录下
  • 保存到网站根目录下后,改名。
三、HTML页面引入favicon图标
  • 在html文件的元素之间引入以下代码。(注意href属性的文件路径)
html 复制代码
<link rel="shortcut icon" href="favicon.ico" />
  • VScode编辑器下运行html文件,即可见到效果。
html 复制代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>品优购</title>
    <link rel="shortcut icon" href="favicon.ico" />
</head>
<body>
    
</body>
</html>
相关推荐
2501_938774294 分钟前
Leaflet 弹出窗实现:Spring Boot 传递省级旅游口号信息的前端展示逻辑
前端·spring boot·旅游
meichaoWen19 分钟前
【CSS】CSS 面试知多少
前端·css
我血条子呢25 分钟前
【预览PDF】前端预览pdf
前端·pdf·状态模式
90后的晨仔40 分钟前
报错 找不到“node”的类型定义文件。 程序包含该文件是因为: 在 compilerOptions 中指定的类型库 "node" 的入口点 。
前端
90后的晨仔1 小时前
5分钟搭建你的第一个TypeScript项目
前端·typescript
专注前端30年1 小时前
Vue2 中 v-if 与 v-show 深度对比及实战指南
开发语言·前端·vue
90后的晨仔1 小时前
TypeScript是什么?为什么前端必须学它?
前端
用户47949283569152 小时前
从 58MB 到 2.6MB:我是如何将 React 官网性能提升 95% 的
前端·javascript
该用户已不存在2 小时前
7个让全栈开发效率起飞的 Bun 工作流
前端·javascript·后端
芙蓉王真的好12 小时前
Angular CDK 响应式工具指南:从基础到自适应布局应用
前端·javascript·angular.js