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

【前端】网站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.xdnf.cn/news/17172.html

相关文章:

  • Kubernetes 已弃用 `apps/v1beta1` 版本的 StatefulSet
  • @【JCIDS】【需求论证】联合能力集成与开发系统知识图谱
  • [数组]977.有序数组的平方;209.长度最小的子数组
  • 跨越系统孤岛:4A架构如何实现企业级一体化协同
  • 深度解析 TCP 三次握手与四次挥手:从原理到 HTTP/HTTPS 的应用
  • 【AI论文】iLRM:一种迭代式大型3D重建模型
  • Vue3视频播放组件自定义封装、控制是否自动播放、全屏小屏控制、loading加载、静音播放等样式完全自定义控制,代码复制即用
  • JAVA学习笔记 自增与自减的使用-006
  • uniapp转app时,cover-view的坑
  • Chisel芯片开发入门系列 -- 18. CPU芯片开发和解释8(流水线架构的代码级理解)
  • 基于k8s环境下的pulsar常用命令(下)
  • 创维智能融合终端SK-M424_S905L3芯片_2+8G_安卓9_线刷固件包
  • 计算机网络:目的网络在路由表项中的作用
  • 如何通过 5 种方式将照片从 iPad 传输到电脑
  • MongoDB学习专题(一)介绍安装基本操作
  • 电路基础相关知识
  • 【轮播图】H5端轮播图、横向滑动、划屏效果实现方案——Vue3+CSS position
  • Python爬虫09_Requests用bs4进行数据解析
  • Java、Android及计算机基础面试题总结
  • ubuntu-server安装
  • 外协采购订单的价格差异科目没有产生差异科目问题
  • MongoDB学习专题(二)核心操作
  • 使用buildx构建镜像
  • 蓝桥杯常用java API
  • 东北大学“进化论”赋能具身导航!SE-VLN:基于多模态大模型的自进化视觉语言导航框架
  • wps创建编辑excel customHeight 属性不是标准 Excel Open XML导致比对异常
  • 【qt5_study】2.使用Qt Designer构造UI界面(信号与槽)
  • PHP实战代码解析与应用分享:用户管理、日志,配置管理与文件操作全解析
  • 《C++》继承完全指南:从入门到精通
  • 基于 Spring Boot 的小区人脸识别与出入记录管理系统实现