AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

前端如何设置浏览器网页标签页前的小图标favicon.ico

2022-11-14 1052
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 前端如何设置浏览器网页标签页前的小图标favicon.ico

步骤1：

将小图标favicon.ico文件（或者普通的icon小图片）放在项目的public或者static目录下

步骤2：

index.html代码中设置favicon.ico

favicon.ico文件<linkrel="icon"href="%PUBLIC_URL%/favicon.ico"/>或普通icon图片<linkrel="icon"href="%PUBLIC_URL%/logo.png"/>

image.png

下面的小工具，可以用来将图片转化为icon格式的图片，而且会生成对应的html代码，还是挺方便的。

https://www.favicon-generator.org/

文章标签：
前端开发
关键词：
前端网页
设置浏览器
浏览器设置
前端浏览器
前端图标
Boale_H
目录
相关文章
。思索
|
1月前
|
IDE 开发工具
Edge浏览器——如何设置跨域请求
Edge浏览器——如何设置跨域请求
。思索
74 0
1313310884104708
|
15天前
|
JSON 前端开发 开发工具
初探在WSL中设置vim前端开发环境
初探在WSL中设置vim前端开发环境
1313310884104708
23 0
路边两盏灯
|
19天前
|
存储
【Azure APIM】APIM 策略语句如何来设置多个Cookie值让浏览器保存
【Azure APIM】APIM 策略语句如何来设置多个Cookie值让浏览器保存
路边两盏灯
27 1
土木林森
|
24天前
|
Web App开发 JSON 安全
【跨域难题终结者】：一键解锁Chrome浏览器神秘设置，彻底告别开发阶段的跨域烦恼！
【8月更文挑战第20天】跨域是前端开发常遇难题，尤其在前后端分离项目中。浏览器因安全考量会阻止不同源间的请求。本文对比CORS、JSONP、代理服务器等解法，并介绍开发阶段通过调整Chrome设置来临时禁用跨域限制的方法，提供启动Chrome及使用`fetch`API示例，适合快速测试。但请注意这不适用于生产环境，存在一定安全风险。
土木林森
78 1
热爱技术的小郑
|
25天前
|
搜索推荐 前端开发 程序员
如何在浏览器中搜索内容自动过滤CSDN的相关文章，一次设置永久过滤
这篇文章介绍了如何在浏览器中设置搜索时自动过滤掉CSDN的相关文章，提供了具体的浏览器设置步骤和推荐使用的搜索引擎。
热爱技术的小郑
24 0
如何在浏览器中搜索内容自动过滤CSDN的相关文章，一次设置永久过滤
路边两盏灯
|
19天前
|
缓存 前端开发 Java
【Azure 应用服务】App Service 使用Tomcat运行Java应用，如何设置前端网页缓存的相应参数呢(-Xms512m -Xmx1204m)？
【Azure 应用服务】App Service 使用Tomcat运行Java应用，如何设置前端网页缓存的相应参数呢(-Xms512m -Xmx1204m)？
路边两盏灯
12 0
热爱技术的小郑
|
23天前
|
存储 JavaScript
纯Vue实现网页日常任务清单小功能（数据存储在浏览器）
这篇文章介绍了如何使用纯Vue实现一个网页日常任务清单的小功能，数据存储在浏览器中以保持数据持久化。文章内容包括功能描述、效果演示、核心代码修改方法，以及已经打包好的项目源码下载链接。作者还提供了友情提示，指出了数据存储到浏览器的核心代码部分，方便读者快速理解和应用。
热爱技术的小郑
27 0
孙飞i
|
1月前
|
存储 前端开发 JavaScript
前端语言串讲 | 青训营笔记
前端语言串讲 | 青训营笔记
孙飞i
20 0
艾尼麻麻
|
3月前
|
JSON 前端开发 JavaScript
前端Ajax、Axios和Fetch的用法和区别笔记
前端Ajax、Axios和Fetch的用法和区别笔记
艾尼麻麻
63 2
爱你三千遍斯塔克
|
3月前
|
前端开发 JavaScript 数据库
如何实现前后端分离-----前端笔记
如何实现前后端分离-----前端笔记
爱你三千遍斯塔克
43 0

热门文章

最新文章

  • 1
    C#调用浏览器的原理及实现浅析
  • 2
    谷歌浏览器油猴插件安装教程，让你的浏览器更加强大
  • 3
    Chrome 技巧篇-浏览器网页设置编码，解决网页乱码问题，最新版charset插件获取，UTF-8编码设置
  • 4
    让互联网拥抱移动VR，三星将发布新版VR浏览器
  • 5
    简单易用的headless浏览器
  • 6
    如何添加360浏览器（chrome）添加JavaScript例外，禁止网站加载JS
  • 7
    基于 H5 Canvas "指纹识别" 技术 【浏览器指纹 VS Canvas指纹】
  • 8
    如何减少浏览器repaint和reflow（中）
  • 9
    JavaScript 浏览器对象（三）
  • 10
    微软声称Win10周年更新为Edge浏览器带来更好电池寿命
  • 1
    前端和后端限制文件大小的具体实现方式
    310
  • 2
    【Web 前端】如何将一个 HTML 元素添加到 DOM 树中的？
    62
  • 3
    【Web 前端】jQuery 里的 each() 是什么函数？你是如何使用它的？
    124
  • 4
    【Web 前端】如何找到所有 HTML select 标签的选中项？
    80
  • 5
    【Web 前端】JavaScript window.onload 事件和 jQuery ready 函数有何不同？
    58
  • 6
    【Web 前端】$(document).ready() 是个什么函数？为什么要用它？
    427
  • 7
    【Web 前端】如何在点击一个按钮时使用 jQuery 隐藏一个图片？
    158
  • 8
    从前端Vue到后端Spring Boot：接收JSON数据的正确姿势
    192
  • 9
    【Web 前端】 jQuery 里的 ID 选择器和 class 选择器有何不同？
    78
  • 10
    【Web 前端】网页上有 5 个div元素，如何使用JQ来选择它们？
    92

    • 相关课程

    更多
  • 网站性能前端监控课程
  • 移动Web前端开发
  • Ajax 前端开发入门与实战
  • 零基础学前端HTML+CSS
  • 前端开发CSS基础
  • 前端开发框架Bootstrap使用教程

    • 相关电子书

    更多
  • Vue.js 在前端服务化上的探索与实践
  • 阿里文娱大前端技术实践
  • 前端代码是怎样智能生成的

    • 相关实验场景

    更多
  • 前端开发基础3：CSS3常见显示属性
  • 前端开发基础6：Node.js和LESS预编译工具
  • 前端开发基础2：VS Code和Edge的联动开发
  • 前端开发基础1：前端开发环境的安装和配置
    • 下一篇
    什么是 Load balancer？