如何给网页添加icon图标?

news2025/1/31 11:09:35

做一些小页面或者项目的时候,我们会发现每个网站都有自己的小图标,下面我就告诉你怎么弄这个,超简单的!💜💜

网站添加icon小图标

      • 网页图标favicon.ico小简介
        • 1.添加网站已有icon图标
        • 2.自定义icon图标

网页图标favicon.ico小简介

favicon.ico一般用于作为缩略的网站标志,它显示在浏览器的地址栏、浏览器标签上或者在收藏夹上,是展示网站个性的缩略logo标志,也可以说是网站头像,目前主要的浏览器都支持favicon.ico图标,加上这个,会显得更美观更专业哦!

1.添加网站已有icon图标

  • 以CSDN网站为例:
    在这里插入图片描述
  • 想要这样的网站图标:
  1. 搜索框输入:

https://www.csdn.net/favicon.ico

请添加图片描述

  • 就会出现CSDN小图标
    请添加图片描述
  1. 右键将图片以icon格式下载后,拖到自己的前端项目中。

请添加图片描述

  1. 在html页面引入
 <link rel="shortcut icon" href="favicon.ico" />

请添加图片描述

然后刷新一下页面就OK啦💜💜💜

2.自定义icon图标

自定义图标就是自己想喜欢啥样的图标就可以自己去做!nice!

  • 使用一个制作图标的网站: bitbug

在这里插入图片描述

其实~也没啥技术含量哈哈,跟这上面步骤来就OK啦

在这里插入图片描述

  • 选择文件——>选好自己想要的尺寸——>附加码——生成icon图标
    就会得到下面以ico后缀的文件啦~

在这里插入图片描述
打开后:
在这里插入图片描述

  • 然后就是引入了,其实和上面的引入方式是一样的!
  1. 将下载好的文件,拖到自己的前端项目中。

请添加图片描述
2. 在html页面引入

 <link rel="shortcut icon" href="favicon.ico" />

请添加图片描述

学会了嘛!(/ω\)💜💜💜

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/407603.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

VUE——使用VUE脚手架创建项目

前言 vue脚手架工具&#xff0c;对vue项目构造做了封装&#xff0c;直接使用vue-cli创建项目&#xff0c;常用配置自动帮你完成&#xff0c;不用自己像使用webpack一样配置。 目录 1、安装 npm i vue 2、创建vue项目 3、运行项目 1、安装 npm i vue ps:项目化开发中&…

前端加密,后端解密的过程及代码(密码明文传输解决,不是太保险。key在前端有显示)

在工作中经常遇到密码明文传输这个问题&#xff0c;为了让密码安全些会让加密&#xff0c;现在有个比较方便的AES加密分享给大家&#xff0c;话不多说&#xff0c;上代码 1&#xff0c;首先引入前端需要用到的js&#xff1a;crypto-js&#xff0c;下载命令 npm install cryp…

vue中computed和watch的使用场景

一、computed computed擅长处理的场景&#xff1a;一个数据受多个数据影响&#xff0c;如果一个属性是由其他属性计算而来的&#xff0c;这个属性依赖其他属性是一个多对一或者一对一&#xff0c;一般用computed&#xff1b; 如果 computed 属性值是函数&#xff0c;那么默认会…

uni-app,vue3接口请求封装

uni-app接口&#xff0c;全局方法封装 1.在根目录创建一个api文件&#xff0c;在api文件夹中创建api.js&#xff0c;baseUrl.js和http.js文件 2. baseUrl.js文件代码 export default "https://XXXX.test03.qcw800.com/api/" 3.http.js文件代码 export function h…

【微信小程序】运行机制和更新机制

&#x1f352;观众老爷们好呀&#xff0c;牛牛又更文了&#xff0c;上文我们对部分比较常用的组件进行了讲解&#xff0c;作为开发者&#xff0c;我们还需要对小程序的运行机制和更新机制做一定的了解&#xff0c;那问题来了&#xff0c;你对它们了解多少呢&#xff1f; &#…

微信小程序自定义导航栏机型适配--底部Tabbar--view高度--底部按钮适配

自定义微信小程序头部导航栏 自定义微信小程序头部导航栏&#xff0c;有几种方式 方式一 {"navigationStyle": "custom" // 将navigationStyle从默认default改为custom }定义此方法后&#xff0c;头部的导航栏会去掉&#xff0c;导航栏下的元素会直接向上…

‘vue-cli-service‘ 不是内部或外部命令,也不是可运行的程序?npm i (npm install)安装不上的原因

启动项目时&#xff0c;本地有node包&#xff0c;但是终端提示&#xff1a;vue-cli-service 不是内部或外部命令&#xff0c;也不是可运行的程序&#xff0c;导致项目无法启动&#xff0c;如下&#xff1a; 原因之一是项目的npm版本较低&#xff0c;但是你本地的npm版本过高&am…

uniapp一键发行代码并混淆代码

第一步.在项目根目录下安装插件 npm install javascript-obfuscator -g安装完成后&#xff0c;javascript-obfuscator就是一个独立的可执行命令了。 javascript-obfuscator -v第二步&#xff1a;HbuilderX点击发行按钮&#xff0c;打包代码到dist文件中 小程序发行后代码会自…

微信小程序--》小程序—全局数据共享和分包

&#x1f3cd;️作者简介&#xff1a;大家好&#xff0c;我是亦世凡华、渴望知识储备自己的一名在校大学生 &#x1f6f5;个人主页&#xff1a;亦世凡华、 &#x1f6fa;系列专栏&#xff1a;微信小程序 &#x1f6b2;座右铭&#xff1a;人生亦可燃烧&#xff0c;亦可腐败&…

Code For Better 谷歌开发者之声—— 在 Windows 10 上对 Google Chrome 进行故障排除

&#x1f482; 个人网站:【 海拥】【小霸王游戏机】&#x1f91f; 风趣幽默的前端学习课程&#xff1a;&#x1f449;28个案例趣学前端&#x1f485; 想寻找共同学习交流、摸鱼划水的小伙伴&#xff0c;请点击【摸鱼学习交流群】&#x1f4ac; 免费且实用的计算机相关知识题库&…

小白也可以,10分钟搭建大气的Halo博客(保姆级教程)

一、博客的好处 很多程序员、职业投资人、KOL喜欢建立自己的博客系统&#xff0c;为的是让自己有一个知识归纳的工具&#xff0c;也为自己收纳的各种资料有一个线上存储的记事本。到了币圈后&#xff0c;虽然有很多人用Mirro、Medium等文字工具&#xff0c;但这些工具对于中国…

完美解决:flex布局中设置宽度被压缩的问题

问题描述&#xff1a; 在父级中设置了display:flex;父元素宽度不够的时候&#xff0c;子元素就算设置的宽度&#xff0c;也会被压缩&#xff1b; 产生原因&#xff1a; 当子元素设置固定宽度&#xff0c;如果整体宽度不足时&#xff0c;会把固定宽度给压缩 解决方法: 给固定宽…

uniapp小程序开发-富文本编辑器mp-html,juice外部样式转内联样式

前言 在开发一款公司的小程序过程中&#xff0c;有一个需求&#xff1a;web端后端可以上传word文档&#xff0c;后端转为html字符串&#xff1b;小程序接收显示&#xff0c;并且可以在小程序进行编辑修改。 其实在日常小程序中很少见到富文本编辑器的使用&#xff0c;所以这次…

【JavaScript】五个常用功能/案例:计时器 | 流程控制 | 闭包应用 | arguments剩余参数 | 二次封装函数

CSDN话题挑战赛第2期 参赛话题&#xff1a;学习笔记 &#x1f5a5;️ NodeJS专栏&#xff1a;Node.js从入门到精通 &#x1f5a5;️ 博主的前端之路&#xff1a;前端之行&#xff0c;任重道远&#xff08;来自大三学长的万字自述&#xff09; &#x1f9e7; 个人社区&#xff1…

Vue2-生命周期

之前说完了Vue的基础知识&#xff0c;说了语法、数据代理、数据监听、计算属性、指令、过滤器等等&#xff0c;但是没有涉及到Vue的声明周期&#xff0c;其实之所以把生命周期放在后面讲&#xff0c;是因为&#xff0c;如果最开始讲生命周期&#xff0c;里面涉及到的概念性东西…

vue路径component使用import的方式来写 component: () => import(‘@/views/order/orderDetail‘)

以前老师教的一直是这种写法: 工作后突然看到这种写法,我蒙了 首先我们先来理解一下,路由文件里面. path里面其实就是url也就是我们写路径的,我们在网址栏所看到的. 而component则是我们所对应的页面组件.每个页面相当于一个组件.所以我们的页面的名字就是组件的名字. 方法一:普…

掌握Mock摆脱后端同学的束缚

文章目录前言Mock概述mock.js安装Mock规范Mock的使用总结前言 当下采用前后端分离模式开发Web应用已经成为气候&#xff0c;在开发阶段有一个不成文的规定则是 项目开发后端先行 但是作为前端开发工程师的我们&#xff0c;难道在搭建完页面后只能等待后端的接口么&#xff1f;…

自定义修改el-talbe show-overflow-tooltip的样式

el-table表格行有一个可使用的show-overflow-tooltip属性&#xff0c;它接受一个Boolean&#xff0c;为true时多余的内容会在 hover 时以 tooltip 的形式显示出来。 <el-table-columnprop"address"label"地址"show-overflow-tooltip></el-table-…

Vue3、Vue2都有哪些区别

vue3和vue2版本对比&#xff1a; vue2中绝大多数的API与特性&#xff0c;在vue3中同样支持。同时&#xff0c;vue3中还新增了所特有的功能&#xff0c;并废弃了vue2中的某些旧功能。 新增的功能如&#xff1a;组合式API、多根节点组件、更好的TypeScript支持等。 废弃的功能…

jq获取和设置标签的css样式、jq给标签增加或移除class属性

1、jQuery获取和设置标签的css样式 jQuery既可以直接获取标签的css样式&#xff0c;也可以设置样式&#xff0c;包括行内、内部、外部样式&#xff1b;思路&#xff1a;先要选取这个标签&#xff0c;然后再获取或者设置样式&#xff1b;获取css属性&#xff1a;console.log($…