前端框架 Nuxt3 Vue3 修改网页favicon.ico 顶部小图标

最新推荐文章于 2025-04-01 13:59:53 发布

Dragon Wu

最新推荐文章于 2025-04-01 13:59:53 发布

阅读量4.5k

点赞数 3

分类专栏：前端框架文章标签：前端

本文链接：https://blog.csdn.net/qq_50909707/article/details/128311152

版权

前端框架专栏收录该内容

37 篇文章

订阅专栏

本文介绍如何在Nuxt.js项目中正确配置网站图标（ICO文件）。通过将.ico文件放置于public目录并修改nuxt.config.ts文件来实现。同时强调了清理浏览器缓存的重要性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、public目录下存放.ico文件

二、配置nuxt.config.ts文件

三、清理浏览器缓存，避免ico加载之前的缓存

目前这方面的文章很少，官网也没有对此进行详细步骤的说明，可能我没找到，后来经过不断尝试后找到了解决方案。

一、public目录下存放.ico文件

二、配置nuxt.config.ts文件

export default defineNuxtConfig({

    // 软件配置
    app: {
        head: {
            title: "后台管理系统",
            meta: [
                { name: "description", content: "OA" },
                { name: "keyword", content: "后台管理系统" }
            ],
            link: [
                { rel: "icon", type: "image/x-icon", href: "favicon.ico" }
            ]
        }
    },

   ......
});

主要配置这个：