前端给网页添加标题和前面的小图标原生html和vue项目

效果图如下

在这里插入图片描述

一.添加标题

1.原生html添加方法

head标签里面添加<title>小鸟</title>

2.vue添加方法

打开项目文件夹,在目录里面找到public文件,再打开找到index.html放到编译器vscode里面,添加标题,和原生方法一样

二.网页前面的小图标

1.原生html添加方法pc端和移动端同时添加html里面

也可以使用本地图标,现在用的线上图标

(1).pc端如下

<link href="https://uploads-ssl.webflow.com/624181072db315237608dddf/624602e7174c0d34449163d4_Frame%2044%20copy.png"
    rel="shortcut icon" type="image/x-icon" />

(2).移动端如下

  <link href="https://uploads-ssl.webflow.com/624181072db315237608dddf/624602b0a1398304c2f7bdb4_Frame%2044.png"
    rel="apple-touch-icon" />

更具体的手机图标大小

<link rel="apple-touch-icon" sizes="57x57" href="touch-icon-iphone.png" />

<link rel="apple-touch-icon" sizes="72x72" href="touch-icon-ipad.png" />

<link rel="apple-touch-icon" sizes="114x114" href="touch-icon-iphone4.png" />

<link rel="apple-touch-icon" sizes="144x144" href="apple-touch-icon-ipad3-144.png" />

2.vue添加方法和上面添加标题一样

感觉文章好的话记得点个心心和关注和收藏,有错的地方麻烦指正一下,如果需要转载,请标明出处,多谢!!!

猜你喜欢

转载自blog.csdn.net/m0_49714202/article/details/124895752