Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Can't add favicon? #2987

Closed
yirichie opened this issue Nov 22, 2017 · 7 comments

Comments

@yirichie
Copy link

@yirichie yirichie commented Nov 22, 2017

I'm not sure if I missed it, but the docs don't seem to show you how to add a favicon. I followed the "getting started" guide.

@benforshey

This comment has been minimized.

Copy link
Contributor

@benforshey benforshey commented Nov 22, 2017

@yirichie I don't the docs mention it specifically, but here's where the concept is laid out. If I recall correctly, a favicon is just a special icon (or series of icons) that browsers look for in the root of the domain.

If you put your favicon in the static folder, it'll get loaded into the root of your site. Alternatively, you could import the favicon asset into your site and get all the benefits of staying within the module system (per the link, above). Either way, you'll have to declare the link with react-helmet—just like other <head> metadata.

@benforshey

This comment has been minimized.

Copy link
Contributor

@benforshey benforshey commented Nov 22, 2017

Hey, I just noticed that you mentioned changing the favicon the (in issue title), and I've been talking about adding a favicon. Do you have a favicon that's showing up, but you want a different one to show up? Because favicons are cached for a long time.

@yirichie

This comment has been minimized.

Copy link
Author

@yirichie yirichie commented Nov 22, 2017

Hey Ben sorry I did mean adding, I'll edit the title and post. And ah thanks, I'll go through what you linked above!

@yirichie yirichie changed the title Can't change favicon? Can't add favicon? Nov 22, 2017
@yirichie yirichie closed this Nov 25, 2017
@skube

This comment has been minimized.

Copy link
Contributor

@skube skube commented Jul 13, 2018

For posterity and since it wasn't immediately obvious to me, basically one way to do it with Helmet:

import favicon from '../images/favicon.png';

<Helmet
  title="..."
  meta={[
      { name: 'description', content: '...' },
      { name: 'keywords', content: '....' },
  ]}
  link={[
      { rel: 'shortcut icon', type: 'image/png', href: `${favicon}` }
  ]}
/>
@gespiton

This comment has been minimized.

Copy link

@gespiton gespiton commented Sep 8, 2018

I tried @skube 's method, but somehow not working. so I modified the icon option of gatsby-plugin-react-helmet in gatsby-config.js , now it's working :D

sheelah added a commit to sheelah/reactdenver.com that referenced this issue Nov 21, 2018
We could use a Gatsby plugin for this but I don't think that's
worth doing since this site isn't on Gatsby v2 yet (and
all popular plugins are). See:
gatsbyjs/gatsby#2987 (comment)
@holmberd

This comment has been minimized.

Copy link

@holmberd holmberd commented Apr 23, 2019

@gespiton icon option in gatsby-config, please do tell ? :)

@AllanPooley

This comment has been minimized.

Copy link
Contributor

@AllanPooley AllanPooley commented Apr 24, 2019

Hey guys! I had some confusion from where my app was sourcing it's favicon earlier today and stumbled across this thread. I found a solution and thought to share it here just in case anyone else got lost.

In my case, icon and favicon generation was being handled by gatsby-plugin-manifest.
You can check out the documentation here.

In gatsby-config.js, gatsby-plugin-manifest was being configured like so:

{
      resolve: 'gatsby-plugin-manifest',
      options: {
        name: SITE_NAME,
        short_name: PWA_SHORT_NAME,
        start_url: '/',
        background_color: PWA_BACKGROUND_COLOR,
        theme_color: PWA_THEME_COLOR,
        display: 'standalone',
        icon: 'src/images/logo.png',
      },
},

The key option here, being the icon key in options:
icon: 'src/images/logo.png'

Important note in the doc:

For best results, if you’re providing an icon for generation it should be…

…at least as big as the largest icon being generated (512x512 by default).
…square (if it’s not, transparent bars will add to make it square).
…of one of the follow formats: JPEG, PNG, WebP, TIFF, GIF or SVG.

Hope this helps someone!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
6 participants
You can’t perform that action at this time.