如何给网页添加icon图标?

这篇具有很好参考价值的文章主要介绍了如何给网页添加icon图标?。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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

网页图标favicon.ico小简介

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

1.添加网站已有icon图标
  • 以CSDN网站为例:
    如何给网页添加icon图标?
  • 想要这样的网站图标:
  1. 搜索框输入:

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

如何给网页添加icon图标?

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

如何给网页添加icon图标?

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

如何给网页添加icon图标?

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

2.自定义icon图标

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

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

如何给网页添加icon图标?

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

如何给网页添加icon图标?

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

如何给网页添加icon图标?
打开后:
如何给网页添加icon图标?

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

如何给网页添加icon图标?
2. 在html页面引入

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

如何给网页添加icon图标?

学会了嘛!(/ω\)💜💜💜文章来源地址https://www.toymoban.com/news/detail-454106.html

到了这里,关于如何给网页添加icon图标?的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Rust UI开发(二):iced中如何为窗口添加icon图标

    注:此文适合于对rust有一些了解的朋友 iced是一个跨平台的GUI库,用于为rust语言程序构建UI界面。 想要了解如何构建简单窗口的可以看本系列的第一篇: Rust UI开发:使用iced构建UI时,如何在界面显示中文字符 本篇是系列第二篇,主要解决一个问题,就是为窗口添加图标ic

    2024年02月04日
    浏览(62)
  • 鼠标右键添加自定义Cmd与Powershell【最全 最详细 含图标Icon】

    快捷键 Win+R 打开运行,输入 regedit 进入注册表 Background 的 shell 目录下新建项,取名 OpenCmd 这里的取名就是鼠标实际右键时显示打开cmd的名称,如↓ 1.4.1 OpenCmd下新建 command 项 1.4.2 command项赋值【实际打开cmd的命令值】 至此,基本的右键打开 cmd 的功能实现,下面是附上右键

    2024年04月23日
    浏览(30)
  • 微信小程序-如何点击marker触发事件更改图标icon

    最近在做课设,要求实现一个找附近停车位的功能 绿色marker为空闲车位,红色marker为占用车位,现要求实现点击绿色marker,进行上锁操作,并让绿色锁改为红色锁。 如下图所示: 点击中间绿色锁,跳出弹窗,点击关锁,则锁变红色。 倘若点击红色锁的关锁,则会提示 “该

    2024年02月03日
    浏览(69)
  • 如何更改vue项目窗口的标题title和图标icon

    背景 :由以下代码知,Vue CLI创建的项目窗口的标题默认是打包后的项目名称,默认图标是Vue的图标favicon.ico。那么特定项目如何根据需要在窗口展示相应的项目标题和项目图标呢? 解决方法: 修改图标:直接将新图标导入public文件夹,然后将favicon.ico替换为新图标的名字即

    2024年02月15日
    浏览(51)
  • vue3.x结合element-plus如何使用icon图标

     基于 Vue 3的Element Plus如何使用icon图标 首先注意Element Plus版本:官网如图所示,  基于vue3的具体如何使用: 参考官网文档: 1.首先选择一种方式安装  2.然后全局注册图标 在main.js或main.ts文件中引入:  3.然后就可以使用了,具体实例如下: 使用方式1:输入框中使用 输入框

    2023年04月08日
    浏览(51)
  • element icon图标用法

    1.基础用法:  2.直接使用 SVG 图标 3.下载成PNG使用                  

    2024年04月09日
    浏览(44)
  • 苹果IOS在Safari浏览器中将网页添加到主屏幕做伪Web App,自定义图标,启动动画,自定义名称,全屏应用

    在ios中我们可以使用Safari浏览自带的将网页添加到主屏幕上,让我们的web页面看起来像一个本地应用程序一样,通过桌面APP图标一打开,直接全屏展示,就像在APP中效果一样,完全体会不到你是在浏览器中。 通过点击桌面上的图标,直接打开全屏页面:(这图标是我用CSDN的图标

    2024年02月06日
    浏览(73)
  • windows应用程序icon缓存、查看图标、icon制作方法

    在vs中替换c++程序的图标后,需要重新编译,但是很多情况下都不会刷新,还是看到老的图标,只能重启电脑才能看到新的图标。 通过ChatGPT得到相关的回答如下: 如果在 Windows 上更换了可执行文件 (.exe) 的图标,但是在图标文件已经更改的情况下仍然显示旧的图标,可能是因

    2024年02月14日
    浏览(45)
  • 常用图标(icon)css下载

    1、演示图例(icon1.css)[24*18]     2、演示图例(icon2.css)[24*24] 3、演示图例(icon3.css)[24*24]        4、演示图例(icon4.css)[24*18]   5、演示图例(icon5.css)[26*26]    6、演示图例(icon6.css)[20*20]  7、演示图例(icon7.css)[24*24] 商务金融专用  8、演示图例(icon8.css)[24*24] 9、代

    2024年02月01日
    浏览(34)
  • 菜单管理中icon图标回显

    2024年02月07日
    浏览(38)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包