Gatsby.js博客中Favicon渲染的替代实现方案咨询

Hey there! Let's cover a few reliable ways to render your favicon (located at src/favicon.png with your template's alias setup) in Gatsby. These alternatives give you flexibility depending on your needs:

方案1：使用Gatsby官方Manifest插件（推荐） #

This is the most robust approach because it handles not just your favicon, but also generates all necessary icon sizes for different devices (mobile, desktop, etc.) and supports PWA features. Here's how to set it up:

1. First, install the plugin if you haven't already:

npm install gatsby-plugin-manifest

2. Add it to your gatsby-config.js with the path to your favicon (you can use your alias here if it's configured, or the direct src/favicon.png path):

module.exports = {
  plugins: [
    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        icon: `src/favicon.png`, // Or use your alias like `@/favicon.png` if configured
        name: `Your Blog's Name`,
        short_name: `My Blog`,
        start_url: `/`,
        background_color: `#ffffff`,
        theme_color: `#2d3748`,
        display: `minimal-ui`,
      },
    },
  ],
};

After running gatsby develop or gatsby build, the plugin will automatically inject the favicon and all required icon variants into your site's <head>.

方案2：自定义HTML模板 #

If you prefer a more manual approach without plugins, you can modify Gatsby's core HTML template to directly add the favicon link:

1. First, copy the default HTML template from Gatsby's cache to your src folder. Run gatsby develop once, then copy .cache/default-html.js to src/html.js.

2. In the <head> section of your new src/html.js, add the favicon link using Gatsby's asset require syntax:

<head>
  {/* Keep all existing head content here */}
  <link 
    rel="icon" 
    type="image/png" 
    href={require(`src/favicon.png`).default} 
  />
  {/* Use your alias here if available, e.g., require(`@assets/favicon.png`).default */}
</head>

The .default suffix is important because Gatsby's asset loader exports the file path as the default value.

方案3：在React组件中渲染（不太推荐，但可行） #

If you need to dynamically add the favicon from a component (e.g., a header component), you can import the image and render the <link> tag directly. Note that placing <link> in the <body> isn't standard, but some browsers will still recognize it:

import React from "react";
// Import using your alias or direct path
import favicon from "src/favicon.png";

const Header = () => {
  return (
    <header>
      {/* Your header content */}
      <link rel="icon" type="image/png" href={favicon} />
    </header>
  );
};

export default Header;

关于别名配置的小提示 #

确保你的别名配置正确，这样Gatsby才能解析路径。比如在项目根目录添加jsconfig.json（JavaScript项目）或tsconfig.json（TypeScript项目）：

// jsconfig.json
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  }
}

这样你就可以在代码中用@/favicon.png代替src/favicon.png了。

内容的提问来源于stack exchange，提问作者Antonio Pavicevac-Ortiz