Git Product home page Git Product logo

gatsby-plugin-favicon's Introduction

gatsby-plugin-favicon

Generates all favicons for Web, Android, iOS, ...

Install

yarn add gatsby-plugin-favicon

or

npm install --save gatsby-plugin-favicon

How to use

  1. Include the plugin in your gatsby-config.js file.
  2. Add a favicon.png file in your src folder. The recommended size for the file is: 1500x1500px.
// in gatsby-config.js
plugins: [
  `gatsby-plugin-favicon`
];

Options

Here is a full list of options with their default values you can use to configure this plugin.

// in gatsby-config.js
plugins: [
  {
    resolve: `gatsby-plugin-favicon`,
    options: {
      logo: "./src/favicon.png",

      // WebApp Manifest Configuration
      appName: null, // Inferred with your package.json
      appDescription: null,
      developerName: null,
      developerURL: null,
      dir: 'auto',
      lang: 'en-US',
      background: '#fff',
      theme_color: '#fff',
      display: 'standalone',
      orientation: 'any',
      start_url: '/?homescreen=1',
      version: '1.0',

      icons: {
        android: true,
        appleIcon: true,
        appleStartup: true,
        coast: false,
        favicons: true,
        firefox: true,
        yandex: false,
        windows: false
      }
    }
  }
];

Gatsby v1

Starting from v3, this plugin is not compatible anymore with Gatsby v1, you should stick to the version 2.1.1 of this plugin with Gatsby v1.

gatsby-plugin-favicon's People

Contributors

chrisboon avatar dirtyf avatar julien1619 avatar kripod avatar maddijoyce avatar mperkh avatar ngirardin avatar pyrax avatar tdharmon avatar tuckerwhitehouse avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

gatsby-plugin-favicon's Issues

Build fails when emitStats is false

It seems that disabling emitStats causes the build to fail. Here is my config:

    {
      resolve: `gatsby-plugin-favicon`,
      options: {
        ...
        emitStats: false,
      },
    },

And here is the error that occurs on a fresh build.

info bootstrap finished - 7.182 s

success onPostBootstrap — 0.002 s
error UNHANDLED REJECTION


  Error: ENOENT: no such file or directory, open 'PROJECTDIR/public/.iconstats.json'
  
  - render-page.js:1735 Object../node_modules/gatsby-plugin-favicon/gatsby-ssr.js.module.exports.onRenderBody
    PROJECTDIR/public/render-page.js:1735:31
  
  - render-page.js:157 
    PROJECTDIR/public/render-page.js:157:36
  
  - Array.map
  
  - render-page.js:152 ./.cache/api-runner-ssr.js.module.exports
    PROJECTDIR/public/render-page.js:152:25
  
  - render-page.js:552 Module../.cache/develop-static-entry.js.__webpack_exports__.default
    PROJECTDIR/public/render-page.js:552:57
  
  - worker.js:35 Promise
    [website]/[gatsby]/dist/utils/worker.js:35:36
  
  - debuggability.js:313 Promise._execute
    [website]/[bluebird]/js/release/debuggability.js:313:9
  
  - promise.js:483 Promise._resolveFromExecutor
    [website]/[bluebird]/js/release/promise.js:483:18
  
  - promise.js:79 new Promise
    [website]/[bluebird]/js/release/promise.js:79:10
  
  - worker.js:31 Promise.map.path
    [website]/[gatsby]/dist/utils/worker.js:31:37
  
  - util.js:16 tryCatcher
    [website]/[bluebird]/js/release/util.js:16:23
  
  - map.js:61 MappingPromiseArray._promiseFulfilled
    [website]/[bluebird]/js/release/map.js:61:38
  
  - promise_array.js:114 MappingPromiseArray.PromiseArray._iterate
    [website]/[bluebird]/js/release/promise_array.js:114:31
  
  - promise_array.js:78 MappingPromiseArray.init
    [website]/[bluebird]/js/release/promise_array.js:78:10

Check if file has changed before generating favicons

Looks like this plugin is generating every favicon every time it runs, regardless of whether the source icon has changed. Given how long image generation takes, this is a bit of a deal breaker.

Please perform a check to see if the source image has changed and if not, skip favicon generation.

Path Prefix on Development

On development the path to Favicon includes the PathPrefix

I believe this should not be the case unless the --prefix-paths is added as in build

Cheers for the plugin

background color or theme color doesnt change

I just tried this out in my gatsby project, and im really happy that it works, but the problem is that my favicon.png is white, so i try to change the background color to use custom color, it doesnt work. I refresh the site, rebuild the site. But still it doesnt work. Please tell me how to fix this.

{
      resolve: `gatsby-plugin-favicon`,
      options: {
        logo: "./src/favicon.png",
  
        // WebApp Manifest Configuration
        appName: null, // Inferred with your package.json
        appDescription: null,
        developerName: null,
        developerURL: null,
        dir: 'auto',
        lang: 'en-US',
        background: '#6bc4bc',
        theme_color: '#fff',
        display: 'standalone',
        orientation: 'any',
        start_url: '/?homescreen=1',
        version: '1.0',
  
        icons: {
          android: true,
          appleIcon: true,
          appleStartup: true,
          coast: false,
          favicons: true,
          firefox: true,
          opengraph: false,
          twitter: false,
          yandex: false,
          windows: false
        }
      }
    },

404 Error With Favicon

I've got an issue with this plugin and searched for other similar issues.

I installed the package via NPM and added the necessary file to my folder (src > assets > favicon.png) but it wont show up.

When I deploy via netlify the console gives me a 404 error for the file.
When I look for the favicon in localhost, it doesnt show up (no 404 error in console).

Has anyone else had this issue?

gatsby.config file:

module.exports = {
  plugins: [
    `gatsby-plugin-sass`,
    `gatsby-plugin-react-helmet`,
    {
      resolve: `gatsby-plugin-favicon`,
      options: {
        logo: "./src/assets/favicon.png",
        injectHTML: true,
        icons: {
          android: true,
          appleIcon: true,
          appleStartup: true,
          coast: false,
          favicons: true,
          firefox: true,
          twitter: false,
          yandex: false,
          windows: false
        }
      }
    },
  ],
};

Add unit tests

Since testing this plugin by hand is a pain (looking at generated favicons folder and generated/injected html source), it would be nice to add unit tests.

GatsbyJS uses https://facebook.github.io/jest/ for all its tests. Perhaps we could also use this library, which I have never used before, but want to learn.

No favicons are generated in the output build

Using this plugin it looks like the favicon links are generated correctly into the HTML head. For example, these links appear in index.html

<link rel="shortcut icon" href="/favicons/favicon.ico"/>

But there is no /public/favicons/* folder generated in the output, which leads to 404s for all the favicon links.

Using Gatsby V2 (next)

The plugins for this project

const plugins = [
  `gatsby-plugin-typescript`,
  'gatsby-plugin-react-helmet',
  'gatsby-plugin-styled-components',
  'gatsby-plugin-react-next',
  {
    resolve: 'gatsby-source-greenhouse',
    options: {
      apiToken: '',
    },
  },
  {
    resolve: 'gatsby-plugin-manifest',
    options: {
      name: 'name',
      short_name: 'name',
      start_url: '/',
      background_color: '#fff',
      theme_color: '#fff',
    },
  },
  {
    resolve: `gatsby-plugin-favicon`,
    options: {
      logo: './src/favicon.png',
      injectHTML: true,
      icons: {
        android: true,
        appleIcon: true,
        appleStartup: true,
        coast: false,
        favicons: true,
        firefox: true,
        twitter: false,
        yandex: false,
        windows: false,
      },
    },
  },
  {
    resolve: `gatsby-plugin-google-analytics`,
    options: {
      trackingId: '',
    },
  },
]

how to add links to html?

The plugin adds favicons folder to public folder. But there is no any links to that icons in index.html. How can i add them?

Is it possible to customize the `manifest.json`?

Hello,

Thank you for this plugin! Is it, or could it be, possible to customize the generated manifest.json file? I'd like to be able to set the name, short_name, description, start_url, etc.

Using different source images for different sizes

Thank you for the excellent plugin!

I'd love to be able to provide a few different favicon sources for different sizes—what works at 16x16 isn't appropriate for 148x148, and vice-versa.

Is this possible to do with this plugin? It looks as though gatsby-plugin-manifest has this functionality, but I'd prefer to continue using gatsby-plugin-favicon if at all possible. I'd be happy to help by submitting a PR and/or writing some documentation. 😺

Err 137 with v2.1.1 in Gatsby 1.9.241

Hello,

I have reviewed all the open & closed issues, however, haven't found any with the solution to my issue.

My package.json has the following relevant info:

...
  "dependencies": {
    "bloomer": "^0.6.3",
    "bulma": "^0.6.2",
    "font-awesome": "^4.7.0",
    "gatsby": "^1.9.241",
    "gatsby-link": "^1.6.39",
    "gatsby-plugin-favicon": "^2.1.1",
    "gatsby-plugin-react-helmet": "^2.0.8",
    "gatsby-plugin-sass": "1.0.19",
    "nuka-carousel": "^4.4.0",
    "react-helmet": "^5.2.0",
    "react-responsive": "^5.0.0",
    "react-scroll": "^1.7.10"
  },
...

My gatsby-config.js is as follows:

module.exports = {
  siteMetadata: {
    title: 'ph - Crypto wave',
  },
  plugins: [
    'gatsby-plugin-react-helmet',
    'gatsby-plugin-sass',
    {
      resolve: `gatsby-plugin-favicon`,
      options: {
        logo: './src/favicon.png',
        injectHTML: true,
        icons: {
          android: true,
          appleIcon: true,
          appleStartup: true,
          coast: false,
          favicons: true,
          firefox: true,
          twitter: false,
          yandex: false,
          windows: false,
        },
      },
    },
  ],
  pathPrefix: '/ph_website',
};

However, I am getting the npm exit status 137 with code ELIFECYCLE

What am I doing wrong and facing this error?

Thanks,

Add content hashes to output filenames

To allow long-term caching.

Consider changing the default output directory to be under "static" at that point too, along with other things which can be cached long-term.

Could not install favicons-webpack-plugin

npm ERR! code ENOLOCAL
npm ERR! Could not install from "node_modules/gatsby-plugin-favicon/favicons-webpack-plugin@git+https:/github.com/Creatiwity/favicons-webpack-plugin.git#f262255febeeca348bf7ae5cc140e0386c074e2c" as it does not contain a package.json file.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/user/.npm/_logs/2019-03-14T20_10_48_197Z-debug.log
  "dependencies": {
   ....
    "gatsby-plugin-favicon": "^3.1.4",
   ...
   }

Paths are prefixed even when --prefix-paths is not set

If I run gatsby build without --prefix-paths, the paths in the HTML still refer to /[prefix]/favicons. Not a big deal, since the production builds require --prefix-paths, but it would be nice if this could be fixed.

Thank you!

This is not an issue. I just want to say this was super easy to use and worked like a charm. Thank you for sharing this amazing work!

Allow all configuration supported by FaviconsWebpackPlugin

Hey folks, real happy with the plugin. Y'all made my site much easier to deploy yesterday. 👍

One thing I'd like to see is being able to pass through all options supported by FaviconsWebpackPlugin, rather than just the icons object and logo path. It'd be really great to get the full swath of features that plugin makes available.

html-react-parser dependency pulling old React version

Hi there,

I'm using this plugin on a project, but I'm having this weird issue.
You'll see, this plugin depends on html-react-parser on its 0.x.x version; this package in turn depends on [email protected] which in turn pulls React version 15.6.2. My project uses the latest React version, so this causes a duplicate module error; with my project failing to run.

Here's the output of yarn why illustrating the problem:

yarn why v1.15.2
[1/4] Why do we have the module "react"...?
[2/4] Initialising dependency graph...
[3/4] Finding dependency...
[4/4] Calculating file sizes...
=> Found "[email protected]"
info Has been hoisted to "react"
info Reasons this module exists
   - Specified in "dependencies"
   - Hoisted from "netlify-cms#react"
   - Hoisted from "background-image-on-load#react"
   - Hoisted from "gatsby#gatsby-cli#react"
   - Hoisted from "netlify-cms#netlify-cms-app#netlify-cms-core#react"
=> Found "gatsby-plugin-favicon#[email protected]"
info Reasons this module exists
   - "gatsby-plugin-favicon#html-react-parser#react-dom-core" depends on it
   - Hoisted from "gatsby-plugin-favicon#html-react-parser#react-dom-core#react"

favicons not shown

I've followed the instructions, and the HTML is injected correctly, but it points to the /favicons folder which is not generated when I run gatsby develop. I've found that favicons folder, but it's in the public folder, instead of the root directory.
I'm using https://github.com/gatsbyjs/gatsby-starter-blog and this was added to my config file:

    {
      resolve: `gatsby-plugin-favicon`,
      options: {
        logo: './src/favicon.png',
        injectHTML: true,
        icons: {
          android: true,
          appleIcon: true,
          appleStartup: true,
          coast: false,
          favicons: true,
          firefox: true,
          twitter: false,
          yandex: false,
          windows: false
        }
      }
    },

Option to convert favicon.png to favicon.webp?

Any chance of an option to convert favicon.png to favicon.webp?

A Lighthouse performance audit of a site using gatsby-plugin-favicon includes the following recommendation:

Serve images as WebP: 

WebP provides better lossy and lossless compression than PNG or JPEG, 
which means faster downloads and less data consumption.

Potential savings: 8 KB (70%)

Normally, I can use ...GatsbyImageSharpSizes_withWebp when querying images, but obviously that isn't available here.

Any help would be appreciated! I imagine most Gatsby users are as performance-obsessed as I am. 😉

(v2.1.1) WebpackError: Cannot read property 'android' of undefined

  • gatsby-ssr.js:16 Object.exports.onRenderBody
    ~/gatsby-plugin-favicon/gatsby-ssr.js:16:1

    • api-runner-ssr.js:31
      .cache/api-runner-ssr.js:31:41

    • api-runner-ssr.js:29 module.exports
      .cache/api-runner-ssr.js:29:25

    • develop-static-entry.js:52 module.exports
      .cache/develop-static-entry.js:52:3

    • react.development.js:19 Function.Promise.fromNode.Promise.fromCallback
      ~/react/cjs/react.development.js:19:1

Twitter and OpenGraph don't work

I've been trying to use the the Twitter & OpenGraph flags, but after tracing back through the dependencies of this repo, it turns out that the code that actually generates the favicons (from itgalaxy/favicons) doesn't generate Twitter or OpenGraph tags.

Please explain why favicon is not showing

Here is my configuration:
gatsby-config.js

module.exports = {
  pathPrefix: '',
  siteMetadata: {
    title: '',
  },
  plugins: [
    `gatsby-plugin-react-helmet`,
    `gatsby-plugin-styled-components`,
    `gatsby-plugin-resolve-src`,
    `gatsby-plugin-react-next`,
    `gatsby-transformer-sharp`,
    `gatsby-plugin-sharp`,
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        path: `${__dirname}/src/pages`,
        name: 'pages',
      },
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        path: `${__dirname}/src/images`,
        name: 'images',
      },
    },
    {
      resolve: `gatsby-plugin-favicon`,
      options: {
        logo: `./src/images/favicon.png`,
        injectHTML: true,
        icons: {
          android: true,
          appleIcon: true,
          appleStartup: true,
          coast: false,
          favicons: true,
          firefox: true,
          twitter: false,
          yandex: false,
          windows: false
        }
      },
    },
  ],
}

I did exactly what the documentation says.

And I started this project with "gatsby-starter-default".
Why is it not working?

About lock files: Yarn or vanilla-NPM

Hello contributors and developers using this plugin! @mperkh @maddijoyce

While I was publishing the 2.1.0 update I noticed that the package-lock.json generated by NPM was added to the .gitignore file. In fact, when you publish an update using npm version <update_type>, if a package-lock.json exists in the root folder, npm will try to add it to git, causing an error while publishing the update.

I was about to remove the file from .gitignore because it's a good practice to keep a lock file pushed in your project to improve build reproducibility. But I didn't do that because Gatsby uses yarn by default, which is not my case (the README is not up-to-date on this point ^^), and I didn't want to cause any lock files conflicts.

The question is: have you any suggestion to make on this point?

Thank you!

Change apple status bar style

This plugin is automatically setting the apple-mobile-web-app-status-bar-style to black-translucent and there appears to be no option to change it.

Not working with gatsby v1

2.1.1 is working though (with "gatsby": "^1.9.278")
Am I have to use older version of the plugin to make it work?

Plugin Causes Failed Netlify Deploy Due To Vast Memory Use

Using this plugin when deploying to Netlify results in the build failing due to the plugin using a huge amount of memory.

In Netlify's deploy logs you will see:

11:41:18 AM: success Building production JavaScript bundles — 5.091 s
11:41:56 AM: /usr/local/bin/build: line 32:  1737 Killed                  gatsby build

After working through this problem with Netlify's support who explained the app is being killed due to one of the plugins using vast amounts of memory, I've removed everything from my Gatsby project bit by bit until only this plugin is left.

I've created a minimum example which you can find here. As you will see there is literally nothing else in the project other than a layout, a simple page and this plugin. .

Just add the repo to Netlify and push. You will see the build fail.

  • gatsby-plugin-favicon 2.1.1
  • gatsby 1.9.128

Incorrect URLs generated when pathPrefix value is set

Overview

Using gatsby v2, I have a site with a value set for the pathPrefix parameter.
Before I added this parameter, Both gatsby develop and gatsby build --prefix-paths worked correctly. Now I am seeing 404 errors trying to load icons in both development and when running the site after a build.

Here are example URLs that are trying to be loaded:

http://sites/somename/icons-e09e4c81dabea7f47e8e80e2478342f9/favicon-32x32.png
http://sites/somename/icons-e09e4c81dabea7f47e8e80e2478342f9/favicon-16x16.png

Here are examples within the built HTML files:

<link rel="apple-touch-icon" sizes="32x32" href="//sites/somename/icons-e09e4c81dabea7f47e8e80e2478342f9/favicon-32x32.png" />
<link rel="apple-touch-icon" sizes="16x16" href="//sites/somename/icons-e09e4c81dabea7f47e8e80e2478342f9/favicon-16x16.png" />

You can see this is missing the hostname (and port when I was testing on port 8080 locally).

Initial install gives 'WebpackError: ENOENT: no such file or directory, open '/apps/foundrs/public/.iconstats.json'

I've just added this to a project using the default config, but I initially get the following in logs:

success write out page data — 0.003 s
success write out redirect data — 0.001 s
success onPostBootstrap — 0.000 s

info bootstrap finished - 2.943 s

error There was an error compiling the html.js component for the development server.

See our docs page on debugging HTML builds for help https://goo.gl/yL9lND

  274 |  * Forces an update. This should only be invoked when it is known with
  275 |  * certainty that we are **not** in a DOM transaction.
> 276 |  *
      | ^
  277 |  * You may want to call this when you know that some deeper aspect of the
  278 |  * component's state has changed but `setState` was not called.
  279 |  *


  WebpackError: ENOENT: no such file or directory, open '/apps/foundrs/public/.iconstats.json'

error compiling with default settings

Hi,

This is a really useful plugin, however I'm running into the following issue when running gatsby develop

error There was an error compiling the html.js component for the development server.

See our docs page on debugging HTML builds for help https://goo.gl/yL9lND

  71 |    * @internal
  72 |    */
> 73 |   enqueueReplaceState: function (publicInstance, completeState) {
     | ^
  74 |     warnNoop(publicInstance, 'replaceState');
  75 |   },
  76 |


  WebpackError: ENOENT: no such file or directory, open '/Users/ben.read/Sites/Shopfront/public/.iconstats.json'

I see a similar issue on running gatsby build

WebpackError: ENOENT: no such file or directory, open /public/.iconstats.json'

  • react.development.js:485 Object.fs.openSync
    ~/react/cjs/react.development.js:485:1

  • react.development.js:390 Object.fs.readFileSync
    ~/react/cjs/react.development.js:390:1

  • gatsby-ssr.js:8 Object.module.exports.onRenderBody
    ~/gatsby-plugin-favicon/gatsby-ssr.js:8:1

  • api-runner-ssr.js:31
    .cache/api-runner-ssr.js:31:41

  • api-runner-ssr.js:29 module.exports
    .cache/api-runner-ssr.js:29:25

  • develop-static-entry.js:52 module.exports
    .cache/develop-static-entry.js:52:3

  • react.development.js:19 Function.Promise.fromNode.Promise.fromCallback
    ~/react/cjs/react.development.js:19:1

  • react.development.js:411 Compilation.
    ~/react/cjs/react.development.js:411:1

  • react.development.js:406 Compilation.
    ~/react/cjs/react.development.js:406:1

  • develop-static-entry.js:3 Compilation.next
    .cache/develop-static-entry.js:3:1

  • react.development.js:148 ExtractTextPlugin.
    ~/react/cjs/react.development.js:148:1

  • react.development.js:402 Compilation.
    ~/react/cjs/react.development.js:402:1

  • develop-static-entry.js:3 Compilation.next
    .cache/develop-static-entry.js:3:1

favicon disapears

chrome latest (66), to reproduce:
enter /page.html
click any external link
click on browser's back button
click on anotherPage.html
click on /page.html
At this point the favicon dissapears from the window

IE11, to reproduce:
enter index.html
as soon as you change page the favicon will disapear
unless you're at index.html

This doesn't happen when "manual" favicon.ico insertion takes place.
I haven't tested other sites since I'm not aware of sites using this plugin, but you can check my profile link for a live implementation.

Compress generated PNGs

The generated PNG output is not using a compression e.g. TinyPNG, would be cool if it would do so automagically!

Error with the ES6 spread operator

Hi, thanks for your effort with this plugin.

I've installed the plugin and after a 'gatsby develop' I found that there's no support for the spread operator, the error:

Error: /Users/emilio/Desktop/blog/node_modules/gatsby-plugin-favicon/gatsby-node.js:58 ...icons, SyntaxError: Unexpected token ...
Some data: Macbook Pro, VSCODE

White background on Apple icons

I have a favicon source PNG image with a transparent background, but when this plugin generates the Apple icons, it adds a white background, which looks sloppy. (mine below) I'd imagine this is a problem on Android as well.

screen shot 2018-05-19 at 4 58 36 pm

module build failed v3.1.6

When upgrading from 3.1.5 to 3.1.6, I get this error:
Error: Module build failed (from ./node_modules/favicons-webpack-plugin/lib/fa vicons.js):
3:11:45 PM: TypeError: (config.html[platform] || []).map is not a function

Can't install

The plugin worked normally but today it causes this error:

yarn add gatsby-plugin-favicon
yarn add v1.12.3
[1/4] Resolving packages...
error Command failed.
Exit code: 128
Command: git
Arguments: ls-remote --tags --heads git://github.com/Creatiwity/favicons-webpack-plugin.git
Directory: C:\server\z-client
Output:
fatal: unable to look up github.com (port 9418) (Either the application has not called WSAStartup, or WSAStartup failed. )
info Visit https://yarnpkg.com/en/docs/cli/add for documentation about this command.

WebPackError: ENOENT: no such file or directory /public/.iconstats.json'

I've just installed the gatsby-plugin-favicon but I get this WebpackError: ENOENT: no such file or directory, open '/home/daniel/Projects/personal_blog/public/.iconstats.json' error when I try to build the project?

module.exports = {
	plugins: [
		{
			resolve: `gatsby-plugin-favicon`,
			options: {
				logo: "./src/images/rev4_cropped.png",

				// WebApp Manifest Configuration
				appName: 'Gatsby site',
				appDescription: null,
				developerName: null,
				developerURL: null,
				dir: 'auto',
				lang: 'en-US',
				background: '#fff',
				theme_color: '#fff',
				display: 'standalone',
				orientation: 'any',
				start_url: '/',
				version: '1.0',

				icons: {
					android: true,
					appleIcon: true,
					appleStartup: true,
					coast: false,
					favicons: true,
					firefox: true,
					opengraph: false,
					twitter: false,
					yandex: false,
					windows: false
				}
			}
		},
		'gatsby-plugin-robots-txt',
		'gatsby-remark-copy-linked-files',
		'gatsby-transformer-sharp',
		'gatsby-plugin-sharp',
		'gatsby-plugin-styled-components',
		{
			resolve: 'gatsby-transformer-remark',
			options: {
				plugins: [
					'gatsby-remark-katex',
					{
						resolve: 'gatsby-remark-images',
						options: {
							maxWidth: 1080 
						}
					},
					{
						resolve: 'gatsby-remark-prismjs',
						options: {
							// Class prefix for <pre> tags containing syntax highlighting;
							// defaults to 'language-' (eg <pre class="language-js">).
							// If your site loads Prism into the browser at runtime,
							// (eg for use with libraries like react-live),
							// you may use this to prevent Prism from re-processing syntax.
							// This is an uncommon use-case though;
							// If you're unsure, it's best to use the default value.
							classPrefix: "language-",
							// This is used to allow setting a language for inline code
							// (i.e. single backticks) by creating a separator.
							// This separator is a string and will do no white-space
							// stripping.
							// A suggested value for English speakers is the non-ascii
							// character '›'.
							inlineCodeMarker: null,
							// This lets you set up language aliases.  For example,
							// setting this to '{ sh: "bash" }' will let you use
							// the language "sh" which will highlight using the
							// bash highlighter.
							aliases: {sh: "bash"},
						}
					}
				]
			}
		},
		'gatsby-plugin-react-helmet',
		'gatsby-plugin-sass',
		{
			resolve: 'gatsby-source-filesystem',
			options: {
				path: `${__dirname}/src/pages`,
				name: 'pages'
			}
		},
		{
			resolve: 'gatsby-source-filesystem',
			options: {
				path: `${__dirname}/src/images`,
				name: 'images'
			}
		},
		{
			resolve: 'gatsby-plugin-eslint',
			options: {
				test: /\.js$|\.jsx$/,
				exclude: /(node_modules|cache|public)/,
				options: {
					emitWarning: true,
					failOnError: false
				}
			}
		},
		{
			resolve: `gatsby-plugin-google-analytics`,
			options: {
				trackingId: "UA-xxxxxxxxxxxxxxxxx-2",
				// Puts tracking script in the head instead of the body
				head: true,
				// Setting this parameter is optional
				anonymize: true,
				// Setting this parameter is also optional
				respectDNT: true,
				// Avoids sending pageview hits from custom paths
				exclude: ["/preview/**", "/do-not-track/me/too/"],
			},
		},
		{
			resolve: 'gatsby-plugin-sitemap'
		},
	],

	siteMetadata: {
		author: 'xxxxxxxxxxxxxxxxx',
		title: 'xxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxx',
		name:"google-site-verification",
		content:"Ji_Q-xxxxxxxxxxxxxxxxx-xxxxxxxxxxxxxxxxx",
		siteUrl: "https://xxxxxxxxxxxxxxxxx.xxxxxxxxxxxxxxxxx"
	},
	// pathPrefix: '/personal_blog'
};

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.