【前端】网站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>
相关推荐
moyu84几秒前
Pinia 状态管理:现代 Vue 应用的优雅解决方案
前端
Deepsleep.2 分钟前
吉比特(雷霆游戏)前端二面问题总结
前端·游戏
wycode12 分钟前
# 面试复盘(2)--某硬件大厂前端
前端·面试
怪可爱的地球人14 分钟前
ts枚举(enum)
前端
做你的猫16 分钟前
深入剖析:基于Vue 3与Three.js的3D知识图谱实现与优化
前端·javascript·vue.js
渊不语21 分钟前
富文本编辑器自定义图片等工具栏-完整开发文档
前端
用户239712822487021 分钟前
taro+vue3+vite项目 tailwind 踩坑记,附修复后的模板源码地址
前端
做你的猫25 分钟前
深入剖析:基于Vue 3的高性能AI聊天组件设计与实现
前端·javascript·vue.js
G佳伟27 分钟前
vue拖动排序,vue使用 HTML5 的draggable拖放 API实现内容拖并排序,并更新数组数据
前端·vue.js·html5
Bling_Bling_132 分钟前
ES6新语法特性(第二篇)
开发语言·前端·es6