如何更改网站的 ico图标

Posted 2023-04-09

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何更改网站的 ico图标相关的知识，希望对你有一定的参考价值。

这个是要用编程的

网站ico图标怎么设置方法：

1、制作一个尺寸16x16大小的图片，可以用图片处理工具来设计，然后保存到本地电脑上，通过网上搜索查找ico在线制作工具，可以查询出很多有关的网站，把jpg图片上传并转换生成一个标准的ico图标命名为：favicon.ico。

2、把favicon.ico文件上传到网站的根目录下。并把网站的首页文件的源代码<head></head>之间加上一句：<link rel="shortcut icon" href="favicon.ico" >。

3、把更改好的首页文件上传到空间上，再用浏览器打开就可以看到网址前面有自己设计的ico图标了。

ico图标是一种修饰网站的图标，可以选择一个对自己比较独特的图片或者文字制作。

参考技术A <link rel="shortcut icon" href="ico图片地址" type="image/x-icon" />
<link rel="shortcut icon" href="ico图片地址" type="image/gif" />

在你网站头部一般叫做header的文件中head标签之间添加这个代码，里面的图片文件记得上传

这样就可以了

希望能帮助到你

本回答被提问者采纳参考技术B 这个可以找到你的网站的ico文件
然后把自己想要的新文件替换就的ico文件
在浏览器多刷新就可以显示新ico
如果像有一些酷呢嗯网站的缓存严重的，你可以过段时间访问你的网站，可能ico就是新的参考技术C

网站标志是.ico文件。

浏览器调用Favicon的原则是首先在网页所在的目录下寻找Favicon.ico文件，如果没有，便到网站的根目录下寻找。

因此，在网页中使用Favicon最简单的办法便是将制作好的图标文件命名为Favicon.ico，然后将其上传到网站的根目录即可。

如果需要将Favicon.ico放到其他目录下，或者希望让不同的网页显示不同的Favicon，就需要在网页html文件中做设定了，具体设置也很简单，在Html中的部分加入如下的代码：

Firefox还支持GIF动画格式的Favicon,使用方法如下:首先制作一个16*16的gif动画,然后在html代码<head></head>中加入如下代码:

如果网站模板是 XHTML 规格的，就在最后的>前加个/。

注：如果想要所有的网页上都显示自己的图标，那就需要在你所有的模板上都加上这段代码，路径不要写错了。

参考技术D vhfc

更改图标 Vuejs？

【中文标题】更改图标 Vuejs？【英文标题】：Change favicon Vuejs? 【发布时间】：2019-04-12 10:50:48 【问题描述】：

如何在 Vuejs CLI 上更改网站图标？

<link rel="shortcut icon" type="image/png" href="/src/assets/img/logo.png"/>

【问题讨论】：

favicon.ico 保存在公共文件夹中 ***.com/questions/40190524/…怎么样 How to set favicon.ico properly on vue.js webpack project?的可能重复 【参考方案1】：

Vue CLI (3.0.5) 使用包含favicon.ico 和index.html（引用favicon.ico）的<root>/public 目录生成项目。

您的图标似乎在<root>/src/assets 中。我建议将其移至<root>/public，将favicon.ico 替换为jinane-logo-JC.png，并相应地更新index.html：

<!-- <link rel="icon" href="<%= BASE_URL %>favicon.ico"> --> <!-- REPLACE THIS -->
<link rel="icon" href="<%= BASE_URL %>jinane-logo-JC.png">

【讨论】：

【参考方案2】：

(function() 
    var link = document.querySelector("link[rel*='icon']") || document.createElement('link');
    link.type = 'image/x-icon';
    link.rel = 'shortcut icon';
    link.href = 'http://www.***.com/favicon.ico';
    document.getElementsByTagName('head')[0].appendChild(link);
)();

【讨论】：

【参考方案3】：

如果您使用的是 vue cli2，请将您的 fovicon 放入静态文件并更改 <link rel="shortcut icon" type="image/png" href="static/jinane-logo-JC.png"/> 或者您正在使用 vue cli3，将您的 favicon 图像放在公共文件中，并在 index.html 中公开更改它 <link rel="icon" href="<%= BASE_URL %>jinane-logo-JC.png">

【讨论】：

【参考方案4】：

按照以下步骤操作：-

查找图标的链接标签并将“youlogohere”的名称替换为您的徽标名称

< link rel="icon" href="<%= BASE_URL %>yourlogohere.png">

运行项目和图标已更改。

【讨论】：

【参考方案5】：

你应该使用vue-head包

将此代码添加到您的App.vue 文件中：

  export default 
    head: 
       link: [
             
                 rel: "icon",
                 href: require("./assets/logo.png")
             ,
          ]

祝你好运！

【讨论】：

以上是关于如何更改网站的 ico图标的主要内容，如果未能解决你的问题，请参考以下文章

如何制作网站ico小图标

如何在网站上安装Favicon.ico识别图标