当前位置: 首页 > news >正文

【前端】网站favicon图标制作

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

一、制作favicon图标
  • 把品优购图标切成png图片。(具体切图过程请见之前的文章,PSD文件需要可以在评论留言)
    在这里插入图片描述
    在这里插入图片描述
  • 把png图片转换成ico图标,这需要借助于第三方转换网站,例如比特虫:https://www.bitbug.net/
    在这里插入图片描述
二、favicon图标放到网站根目录下
  • 保存到网站根目录下后,改名。
    在这里插入图片描述
三、HTML页面引入favicon图标
  • 在html文件的元素之间引入以下代码。(注意href属性的文件路径)
<link rel="shortcut icon" href="favicon.ico" />
  • VScode编辑器下运行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>
http://www.dtcms.com/a/315721.html

相关文章:

  • MyBatisPlus查询数据库中所有表的数据(AI)
  • 使标签垂直水平居中的多种方法
  • 自动驾驶控制算法——MPC控制算法
  • 数据结构 实现单链表
  • Vue3核心语法进阶(Props)
  • C语言:选择排序算法深度剖析!
  • nodejs 编码初体验
  • JAVA无人共享球杆柜系统球杆柜租赁系统源码支持微信小程序
  • 嵌入式硬件中运放的基本控制原理
  • 基于k8s环境下的pulsar常用命令(上)
  • 达梦分布式集群DPC_分布式任务执行拆分流程_yxy
  • 安全测绘之敏感网络资产排查指南
  • 在Linux上部署RabbitMQ、Redis、ElasticSearch
  • Taro Hooks 完整分类详解
  • 深度解析随机森林 API:参数奥秘与调优指南
  • 在AI时代,如何制定有效的职业规划?AI时代职业规划+AI产品经理角色
  • 【学习笔记】NTP时间同步验证
  • Kali Linux 2025.2基于MITRE ATTCK框架
  • DPU(数据处理单元)架构中,SoC(系统级芯片)与FPGA(现场可编程门阵列)之间的数据交互
  • 山东移动e企组网技术分析:底层架构与实现方式
  • 第12届蓝桥杯Scratch_选拔赛_初级组_真题2020年11月21日
  • SpringBoot3.x入门到精通系列:4.2 整合 Kafka 详解
  • Linux第十二讲:线程概念与控制
  • 前端保持和服务器时间同步的方法【使用vue3举例】
  • Qt 音频播放全攻略:常用函数、实战示例与资源获取
  • 升级 Elasticsearch 到新的 AWS Java SDK
  • 基于LDA主题的网络舆情与情感分析——以云南某景区话题为例
  • 8.5 CSS3多列布局
  • 继承知识总结
  • 【AI】提示词与自然语言处理:从NLP视角看提示词的作用机制