按平台划分的 favicon
图标文件在哪里都一样,放在哪里却不一样。选择你的技术栈,按照为其自身约定编写的指南操作:共 19 篇,都附有真实的文件路径和配置。
框架
Angular 只有在构建配置这么要求时才会复制静态文件。一个没有被 angular.json 中 assets 条目匹配到的文件,无论你把它放在项目的哪里,都进不了 dist/。
查看指南SvelteKit 会把 static/ 里的所有东西复制到构建的根目录,而文档外壳是 src/app.html 而不是一个组件。图标标签属于那里,这样它们才能在任何 JavaScript 运行之前就出现在提供的 HTML 里。
查看指南Nuxt 默认会把一个指向 /favicon.ico 的 link 注入每个页面,所以新项目在你把文件放进 public/ 之前会为它记录一次 404。其余的图标在 nuxt.config 的 app.head 块里声明。
查看指南Remix (and React Router framework mode, which is the same route API under renamed packages) does not pick up icons from a special filename. You put files in public/ and return them from the root route's links() export so <Links /> can render them into the document head.
查看指南Laravel has no icon convention of its own. Files in public/ are served at the site root, and the link tags belong in your Blade layout's head. Getting the web server's document root wrong is the most common reason a perfectly placed favicon.ico still 404s.
查看指南Django does not special-case favicons. Icons are ordinary static files collected into STATIC_ROOT and referenced from your base template with the static template tag. In production the collectstatic step is what makes them reachable.
查看指南Rails expects the favicon to go through the asset pipeline. Put the files under app/assets/images and declare them with favicon_link_tag in the application layout so production fingerprinting keeps working.
查看指南In ASP.NET Core the web root is wwwroot. Icon files go there, and the link tags go in your layout (MVC/Razor Pages) or App component (Blazor). Static file middleware has to be in the pipeline or every icon 404s regardless of the markup.
查看指南静态站点
Gatsby 是这里唯一替你生成整套图标的技术栈。gatsby-plugin-manifest 会取一张在 gatsby-config.js 里指定名字的源图片,在构建时生成各种尺寸、web app manifest 以及 link 标签。
查看指南CMS
电商
无代码
Squarespace 把 favicon 称作浏览器图标(browser icon),它是在站点设置里上传的一张方形图片。这里没有文件系统、没有可编辑的模板,所以那一次上传就是你能得到的大部分。
查看指南