CODEWITHSUNDEEP
reactjsfavicongatsby
Antonio Pavicevac-Ortiz
Antonio Pavicevac-Ortiz

Reputation: 7729

Alternative way to render favicon in React.js

I am using Gatsby.js to create a blog. One of the starter packages seems to leverage an alias, so one can fetch and reuse an image to serve as a favicon. The favicon (alias) is in the src/ folder and it's called favicon.png.

enter image description here

That file is being rendered in this component: 

import React from 'react';
import favicon from './favicon.png';

let inlinedStyles = '';
if (process.env.NODE_ENV === 'production') {
  try {
    /* eslint import/no-webpack-loader-syntax: off */
    inlinedStyles = require('!raw-loader!../public/styles.css');
  } catch (e) {
    /* eslint no-console: "off" */
    console.log(e);
  }
}

export default class HTML extends React.Component {
  render() {
    let css;
    if (process.env.NODE_ENV === 'production') {
      css = <style id="gatsby-inlined-css" dangerouslySetInnerHTML={{ __html: inlinedStyles }} />;
    }
    return (
      <html lang="en">
        <head>
          <meta charSet="utf-8" />
          <meta name="viewport" content="width=device-width, initial-scale=1.0" />

          {/* Mobile Meta */}
          <meta name="HandheldFriendly" content="True" />
          <meta name="viewport" content="width=device-width, initial-scale=1.0" />

          {/* Styles'n'Scripts */}
          <link href="https://fonts.googleapis.com/css?family=Scope+One" rel="stylesheet" />

          {this.props.headComponents}
          <link rel="shortcut icon" href={favicon} />
          {css}
        </head>
        <body>
          <div id="___gatsby" dangerouslySetInnerHTML={{ __html: this.props.body }} />
          {this.props.postBodyComponents}
        </body>
      </html>
    );
  }
}

This is what is rendered:

enter image description here

Can someone suggest an alternative way to get it to work?

Thanks in advance!

Upvotes: 3

Views: 3041

Answers (2)

user7867506
user7867506

Reputation: 11

Try using a template literal:

link={[
      { rel: 'shortcut icon', type: 'image/png', href: `${favicon}` }
  ]}

This worked for me (I am using react-helmet though).

See the following tutorials for more help:

Upvotes: 1

anthowelc
anthowelc

Reputation: 85

To add favicon in gatsby you should use gatsby-plugin-favicon :

Install

npm install --save gatsby-plugin-favicon

Use

Add your favicon.png in src folder (or subfolder).

In your gatsby-config.js add the plugin :

plugins: [
  {
    resolve: `gatsby-plugin-favicon`,
    options: {
      logo: "./src/path/to/your/favicon",
      injectHTML: true,
      icons: {
        android: true,
        appleIcon: true,
        appleStartup: true,
        coast: false,
        favicons: true,
        firefox: true,
        twitter: false,
        yandex: false,
        windows: false
      }
    }
  }
]

The plugin recommends a size of 1500x1500px for the favicon.

Doc here : https://github.com/Creatiwity/gatsby-plugin-favicon

Upvotes: 3

Related Questions