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
richieyi opened this issue Nov 22, 2017 · 8 comments
Closed

Can't add favicon? #2987

richieyi opened this issue Nov 22, 2017 · 8 comments

Comments

@richieyi
Copy link

richieyi 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
Copy link
Contributor

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
Copy link
Contributor

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.

@richieyi
Copy link
Author

richieyi 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!

@richieyi richieyi changed the title Can't change favicon? Can't add favicon? Nov 22, 2017
@skube
Copy link
Contributor

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
Copy link

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
Copy link

holmberd commented Apr 23, 2019

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

@AllanPooley
Copy link
Contributor

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!

@sfonua10
Copy link

sfonua10 commented May 16, 2020

Thanks Everyone! Y'all rock! This all helped

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

7 participants