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.

Sign up for GitHub

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

Jump to bottom

Add favicon/manifest #191

Open
missmatsuko opened this issue Feb 20, 2019 · 7 comments · May be fixed by #193
Open

Add favicon/manifest #191

missmatsuko opened this issue Feb 20, 2019 · 7 comments · May be fixed by #193

Comments

@missmatsuko
Copy link
Contributor

missmatsuko commented Feb 20, 2019 •
edited

name: Feature request
about: Suggest an idea for this project

Feature request

What is the expected behavior?
Generate different sizes favicons from one source SVG and create a manifest.

What is motivation or use case for adding/changing the behavior?
Don't have to manually create and commit different favicon sizes and include them in helmet. I think most people would want to configure a web app manifest as well.

How should this be implemented in your opinion?
Use gatsby-plugin-manifest.
I gave it a try and it seemed to work fine just by adding it into plugins. I thought there might be some issues with helmet, but seem ok.

This is the configuration I used. I guess the current coffee cup favicon will need to be recreated as an SVG, unless someone knows the source?

  {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: `Kaldi`,
        short_name: `Kaldi`,
        start_url: `/`,
        background_color: `#FFFFFF`,
        theme_color: `#FFFFFF`,
        icon: `src/img/favicon.svg`, // Need to create this asset
        include_favicon: true,
      },
    },

Are you willing to work on this yourself?
yes
@ZoltanVeres
Copy link
Collaborator

ZoltanVeres commented Feb 22, 2019 •
edited

Sorry for getting back to you so late, i do think it makes sense having that plugin in the repo.
This starter is based by the Kaldi Hugo template, most of the images you can find here, but not sure if there's coffee.svg, although the Kaldi logo is an svg, you can use use that if you like.

@missmatsuko
Copy link
Contributor Author

@ZoltanVeres Not late at all! I'll make a PR for this tonight or maybe tomorrow. Thanks for the links! It looks like one of those SVGs contains a coffee cup, so I'll try to pull it out (or trace it if that's not possible).

@missmatsuko missmatsuko linked a pull request Feb 23, 2019 that will close this issue
Open
@dbertella
Copy link
Contributor

This is my favourite site nowadays, you can definitely use this as favicon / icon if you like https://favicon.io/emoji-favicons/hot-beverage/

@ZoltanVeres
Copy link
Collaborator

ZoltanVeres commented Mar 5, 2019 •
edited

@missmatsuko Does this means that the gatsby-plugin-manifest will generate in each commit and each build these assets? I like the idea of generating the icons dynamically in develop mode, but when the build command is running (or on each deploy) this is shouldn't be running anymore.
(The reason this is a concern is that when a user does an edit to the content, that triggers a build in Netlify and in those situations we don't want to generate these assets anymore)
Is there a way to achieve this, what do you think? I'm open for new arguments.

@missmatsuko
Copy link
Contributor Author

Sorry about my last comment, I was looking at the wrong repo.

I couldn't find a way to find out how long the favicon generating part takes, but I tried building the demo site a few times with and without the plugin and I think it's around 2-4 seconds, with the total build ranging from 16-20 seconds. Is that a terribly long time? I would think that Purge CSS and Gatsby Image (which resizes pretty much all the raster images) would take a lot longer than this Favicon thing.

I saw that gatsby-plugin-offline is recommended to use with this. I'm not sure if it would help, especially in conjunction with Netlify:
https://www.npmjs.com/package/gatsby-plugin-offline

@ZoltanVeres
Copy link
Collaborator

I was checking your PR and the build took ~6 mins in Netlify, the reason that it runs fast on your machine is that the gatsby-manifest-plugin is using sharp for creating the images and it uses all cpus, but on the Netflify environment we only have one cpu. Now, if you check other builds for this starter it usually fluctuates between 1-2 mins, which is negligible.I was looking into the gatsby-plugin-manifest's code and if the manifest images are existing then it won't attempt to generate the images.
So, can you do another commit on that PR, and add back the generated manifest images and we can see if the build time is improved? In addition to that we could also specify in the Readme.md that you have to delete the manifest images in order to regenerate the manifest images.
Apart from this all looks fine, we should be able to merge this is.

As a side note: I think, from our usecase we should only run the manifest generation when npm run develop is executed, but we shouldn't run it when npm run build is executed. I think that would be the ideal use case for us, but this is not supported atm. We have to raise an issue for that in the gatsby repo.

@missmatsuko
Copy link
Contributor Author

I can make that change. gatsby-image also uses sharp, and that would likely be used to resize all the content images on a production site. Those generated images are not committed, either. I'm surprised the favicon generation takes so long in comparison.

@missmatsuko missmatsuko mentioned this issue Mar 13, 2019
Closed
@missmatsuko missmatsuko mentioned this issue May 13, 2019
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Add favicon/manifest missmatsuko/gatsby-starter-netlify-cms
3 participants
@ZoltanVeres @dbertella @missmatsuko