{
    "componentChunkName": "component---src-templates-article-page-template-js",
    "path": "/tutorial/change-images/",
    "result": {"data":{"markdownRemark":{"frontmatter":{"title":"Change template images","slug":"change-images","updated":"2022-07-11T00:00:00.000Z","category":"tutorial-branding","ingress":"Learn how to update template images such as the default background image, favicon and app icons.","skills":null},"htmlAst":{"type":"root","children":[{"type":"element","tagName":"h2","properties":{"id":"default-background-image","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#default-background-image","ariaLabel":"default background image permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","height":"16","version":"1.1","viewBox":"0 0 16 16","width":"16"},"children":[{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","d":"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"},"children":[]}]}]},{"type":"text","value":"Default background image"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"In the "},{"type":"element","tagName":"a","properties":{"href":"/docs/legacy/tutorial/first-edit/"},"children":[{"type":"text","value":"previous step"}]},{"type":"text","value":", you made changes to the\nCSS Properties on marketplaceDefaults.css file. This time you make\nchanges to global CSS classes. "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":".defaultBackgroundImage"}]}]},{"type":"text","value":" class can\nbe found in there too. It is used to provide a background image for\npages such as Authentication Page for sign-up and login."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["gatsby-highlight"],"dataLanguage":"shell"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-shell"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-shell"]},"children":[{"type":"text","value":"└── src\n    └── styles\n        └── marketplaceDefaults.css"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["gatsby-highlight"],"dataLanguage":"css"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-css"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-css"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"/* ================ Plain global CSS glasses ================ */"}]},{"type":"text","value":"\n\n"},{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"/* Full screen Background image located in root-folder/src/assets */"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","selector"]},"children":[{"type":"text","value":".defaultBackgroundImage"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n  "},{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"/* Gradient direction and overlaying the black color on top of the image for better readability */"}]},{"type":"text","value":"\n  "},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"background"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"linear-gradient"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"\n      -45deg"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n      "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"rgba"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"0"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" 0"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" 0"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" 0.3"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n      "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"rgba"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"0"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" 0"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" 0"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" 0.6"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","url"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"url"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","string","url"]},"children":[{"type":"text","value":"'../assets/background-1440.jpg'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n\n  "},{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"/* Add loading color for the div */"}]},{"type":"text","value":"\n  "},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"background-color"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"var"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"--matterColor"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n\n  "},{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"/* Cover the whole screen with the background image */"}]},{"type":"text","value":"\n  "},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"background-size"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" cover"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n\n  "},{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"/* Align the image within the container */"}]},{"type":"text","value":"\n  "},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"background-position"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" center center"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n\n  "},{"type":"element","tagName":"span","properties":{"className":["token","atrule"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","rule"]},"children":[{"type":"text","value":"@media"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"--viewportLarge"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"border-radius"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" 40px"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"border"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" solid 36px "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"var"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"--matterColorBright"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n  "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"extrainfo","properties":{"title":"I can't find it, but I have something similar in a file called propertySets.css. What is that?"},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["gatsby-highlight"],"dataLanguage":"shell"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-shell"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-shell"]},"children":[{"type":"text","value":"└── src\n    └── styles\n        └── propertySets.css"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"There you might find something like:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["gatsby-highlight"],"dataLanguage":"css"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-css"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-css"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"/* Full screen Background image located in root-folder/src/assets */"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","selector"]},"children":[{"type":"text","value":"--backgroundImage:"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n  "},{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"/* Gradient direction and overlaying the black color on top of the image for better readability */"}]},{"type":"text","value":"\n  "},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"background"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"linear-gradient"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"\n      -45deg"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n      "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"rgba"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"0"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" 0"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" 0"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" 0.3"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n      "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"rgba"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"0"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" 0"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" 0"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" 0.6"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","url"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"url"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","string","url"]},"children":[{"type":"text","value":"'../../assets/background-1440.jpg'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n\n  "},{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"/* Add loading color for the div */"}]},{"type":"text","value":"\n  "},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"background-color"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"var"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"--matterColor"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n\n  "},{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"/* Cover the whole screen with the background image */"}]},{"type":"text","value":"\n  "},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"background-size"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" cover"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n\n  "},{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"/* Align the image within the container */"}]},{"type":"text","value":"\n  "},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"background-position"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" center center"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n\n  "},{"type":"element","tagName":"span","properties":{"className":["token","atrule"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","rule"]},"children":[{"type":"text","value":"@media"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"--viewportLarge"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"border-radius"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" 40px"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"border"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" solid 36px "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"var"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"--matterColorBright"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n  "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"In previous versions of FTW, there has been a third CSS file:\npropertySets.css. This file contains\n"},{"type":"element","tagName":"a","properties":{"href":"https://chromestatus.com/feature/5753701012602880","target":"_blank","rel":["noopener","noreferrer"]},"children":[{"type":"text","value":"CSS Property Sets"}]},{"type":"text","value":"\nthat can be applied to component styles using the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"@apply"}]},{"type":"text","value":"syntax.\nHowever, W3C decided not to include that feature in future CSS syntax,\nand the\n"},{"type":"element","tagName":"a","properties":{"href":"https://github.com/pascalduez/postcss-apply","target":"_blank","rel":["noopener","noreferrer"]},"children":[{"type":"text","value":"postcss-apply plugin"}]},{"type":"text","value":" got\ndeprecated in the process."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"If you have an older FTW template (earlier than FTW-daily v9, FTW-hourly\nv11 or FTW-product v10), you might have this file in your codebase. If\nyou start using sharetribe-scripts v6.0.0, you need to consider\nmigrating away from that since it contains code that is deprecated in\nv6.0.0 of sharetribe-scripts."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Read more from\n"},{"type":"element","tagName":"a","properties":{"href":"https://github.com/sharetribe/ftw-daily/pull/1531","target":"_blank","rel":["noopener","noreferrer"]},"children":[{"type":"text","value":"this pull request"}]},{"type":"text","value":"\nin FTW-Daily."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"That "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"background"}]},{"type":"text","value":" styling-rule refers to "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"background-1440.jpg"}]},{"type":"text","value":" image\nin the "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"assets"}]},{"type":"text","value":" directory:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["gatsby-highlight"],"dataLanguage":"shell"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-shell"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-shell"]},"children":[{"type":"text","value":"└── src\n    └── assets\n        └── background-1440.jpg"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"So, to change it, we could just save a different image as\n'background-1440.jpg' to replace the default background image (or you\ncan add a new image and then change the filename in\n"},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":".defaultBackgroundImage"}]},{"type":"text","value":" class). The image should be 1440 pixels wide\nso that it doesn't look bad on retina displays."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Here's an image, we used in this tutorial:"},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\n"},{"type":"element","tagName":"a","properties":{"href":"/docs/legacy/tutorial-assets/markus-spiske-summer-house-unsplash.jpg"},"children":[{"type":"text","value":"Summer house by Markus Spiske (cropped)"}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"span","properties":{"className":["gatsby-resp-image-wrapper"],"style":"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 635px; "},"children":[{"type":"text","value":"\n      "},{"type":"element","tagName":"a","properties":{"className":["gatsby-resp-image-link"],"href":"/docs/legacy/static/b1802cf0853761befa23ec08c255b3e4/69acb/cottagedays-background-image.png","style":"display: block","target":"_blank","rel":["noopener"]},"children":[{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["gatsby-resp-image-background-image"],"style":"padding-bottom: 57.861635220125784%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAMCAYAAABiDJ37AAAACXBIWXMAABYlAAAWJQFJUiTwAAAC8ElEQVQoz5WQbU9aBxiGz/9YtqxZt6WBaiEIUXwBtBUE7WTqprW6xcVlUVHgCJxzgAMIHCBaa7dWrE7/2D5sGV2yzQ8yqbxzLZz9gj3JnSvPh+dK7keo3dzQ7bRpd9p0u116/P9pdhp0Oh39XiiUChQONY5Pjii9KJEr5siVsmS0DIoaR0oqiHKMZE4lW8yTKxU5v7zi1ekbzi4vkMQguWyalBrnvPwawfHYyvziDP6lGeaXPCws+1hY9vD0KzeyGiZ5ICEnRSLxIImMjBgJEwyFCYsiYTGM6fOPeTRo4LN7HxAKbCM4py0sPvOxsOrGvzrJ1+s+/CvTyOkQ19fXVCoVqtUqzWaTXq/HxcUFiiyjaQWUWASb8T7LK08xfPIh6YMDhPm5JzjcZixOAyNTD/H67bjmH7EVfU7t9pZq9YZWswm9ni4sn5WJRqNohQLfra0wbn7AxjM/hvsfcXhYQnA57Uy4hhiymxhz2vB4x3k8N8JOdJNGvUandUejfgvdBt1Oi5+vrlAUhWKpxNwTB7NjJqasRkYtAxQycYS19XUCu7vs7QURxX1iMUnn6WmZ+l2Npi6tQ7dJr9ui/ONLEvE4+VwWu2WQJa+LYcsgQ6YB5Og+wtb2NpFIVK8hSTKJRIKYJPHmtEyr1dBl3U6TXj/dDj8damw+X+TLWY8u9DjtOodNBjKqghDY2UGSJGRZJh6Pk0qldPaf3261uXtfp3b7nmr1H1qtNpfnZaTQFt4JGx67GfeohTHLQyyGT8mpMkK/al/Qj6qqZDIZXfr27Rnv/vqdXyu/8MffFSp//qbvL4tplOAPfDFlZ841wvSIGe+ElVHTA7SUghAMhkgmk3rS6QzZbJZ8Po+m5Tl6dcTe1jpLvgk2l91IwQ2SkV2kwPdMWQeYGbcyaRtg1mFl1HiPfCKCEAqLJJJJVDVFOp3+T6hpFAoFjo9PCGyssub3oeyLpCIBlO1v+HZxlnGzAeeQEafFyKRtkBnHMK9PXvAvEoxtXDx1pCUAAAAASUVORK5CYII='); background-size: cover; display: block;"},"children":[]},{"type":"text","value":"\n  "},{"type":"element","tagName":"picture","properties":{},"children":[{"type":"text","value":"\n          "},{"type":"element","tagName":"source","properties":{"srcSet":["/docs/legacy/static/b1802cf0853761befa23ec08c255b3e4/82e29/cottagedays-background-image.webp 159w","/docs/legacy/static/b1802cf0853761befa23ec08c255b3e4/ef33f/cottagedays-background-image.webp 318w","/docs/legacy/static/b1802cf0853761befa23ec08c255b3e4/f1837/cottagedays-background-image.webp 635w","/docs/legacy/static/b1802cf0853761befa23ec08c255b3e4/29549/cottagedays-background-image.webp 953w","/docs/legacy/static/b1802cf0853761befa23ec08c255b3e4/c5420/cottagedays-background-image.webp 1270w","/docs/legacy/static/b1802cf0853761befa23ec08c255b3e4/91ee6/cottagedays-background-image.webp 2966w"],"sizes":"(max-width: 635px) 100vw, 635px","type":"image/webp"},"children":[]},{"type":"text","value":"\n          "},{"type":"element","tagName":"source","properties":{"srcSet":["/docs/legacy/static/b1802cf0853761befa23ec08c255b3e4/8b9b5/cottagedays-background-image.png 159w","/docs/legacy/static/b1802cf0853761befa23ec08c255b3e4/fa108/cottagedays-background-image.png 318w","/docs/legacy/static/b1802cf0853761befa23ec08c255b3e4/53fb6/cottagedays-background-image.png 635w","/docs/legacy/static/b1802cf0853761befa23ec08c255b3e4/5a426/cottagedays-background-image.png 953w","/docs/legacy/static/b1802cf0853761befa23ec08c255b3e4/91155/cottagedays-background-image.png 1270w","/docs/legacy/static/b1802cf0853761befa23ec08c255b3e4/69acb/cottagedays-background-image.png 2966w"],"sizes":"(max-width: 635px) 100vw, 635px","type":"image/png"},"children":[]},{"type":"text","value":"\n          "},{"type":"element","tagName":"img","properties":{"className":["gatsby-resp-image-image"],"src":"/docs/legacy/static/b1802cf0853761befa23ec08c255b3e4/53fb6/cottagedays-background-image.png","alt":"CottageDays example with updated background image","title":"CottageDays example with updated background image","loading":"lazy","decoding":"async","style":"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;"},"children":[]},{"type":"text","value":"\n        "}]},{"type":"text","value":"\n  "}]},{"type":"text","value":"\n    "}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"images-in-assets-or-image-assets","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#images-in-assets-or-image-assets","ariaLabel":"images in assets or image assets permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","height":"16","version":"1.1","viewBox":"0 0 16 16","width":"16"},"children":[{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","d":"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"},"children":[]}]}]},{"type":"text","value":"Images in 'assets' or Image Assets?"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The FTW templates use two types of assets:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"bundled assets and"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"hosted assets"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Bundled assets are a part of the client application. For images, they\nlive in the "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"src/assets"}]},{"type":"text","value":" folder of the client codebase. Hosted assets,\non the other hand, are fetched from the\n"},{"type":"element","tagName":"a","properties":{"href":"https://www.sharetribe.com/api-reference/asset-delivery-api.html","target":"_blank","rel":["noopener","noreferrer"]},"children":[{"type":"text","value":"Asset Delivery API"}]},{"type":"text","value":".\nThis tutorial only focuses on bundled assets. You can\n"},{"type":"element","tagName":"a","properties":{"href":"/docs/legacy/references/assets/"},"children":[{"type":"text","value":"read more about hosted assets"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n\n"},{"type":"element","tagName":"h2","properties":{"id":"images-for-social-media","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#images-for-social-media","ariaLabel":"images for social media permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","height":"16","version":"1.1","viewBox":"0 0 16 16","width":"16"},"children":[{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","d":"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"},"children":[]}]}]},{"type":"text","value":"Images for social media"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"In the same "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"assets"}]},{"type":"text","value":" directory, there are a couple of other images that\nyou should also pay attention to:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["gatsby-highlight"],"dataLanguage":"shell"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-shell"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-shell"]},"children":[{"type":"text","value":"└── src\n    └── assets\n        ├── background-1440.jpg\n        ├── saunatimeFacebook-1200x630.jpg\n        └── saunatimeTwitter-600x314.jpg"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"These images ("},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"saunatimeFacebook-1200x630.jpg"}]},{"type":"text","value":" and\n"},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"saunatimeTwitter-600x314.jpg"}]},{"type":"text","value":") are used by social media sites to\ngenerate previews when your marketplace is shared in their platforms."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The default content is Saunatime branded so these images should be\nchanged too:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"span","properties":{"className":["gatsby-resp-image-wrapper"],"style":"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 600px; "},"children":[{"type":"text","value":"\n      "},{"type":"element","tagName":"a","properties":{"className":["gatsby-resp-image-link"],"href":"/docs/legacy/static/509c5aa7c7132e7f2cba37049a343e4a/d6a7a/saunatimeTwitter-600x314.jpg","style":"display: block","target":"_blank","rel":["noopener"]},"children":[{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["gatsby-resp-image-background-image"],"style":"padding-bottom: 52.20125786163522%; position: relative; bottom: 0; left: 0; background-image: url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAKABQDASIAAhEBAxEB/8QAGAAAAgMAAAAAAAAAAAAAAAAAAAQBAgX/xAAWAQEBAQAAAAAAAAAAAAAAAAADAAH/2gAMAwEAAhADEAAAAc+UnzRYqW//xAAZEAADAQEBAAAAAAAAAAAAAAAAAQIRAzH/2gAIAQEAAQUCXSMtavBMoZ//xAAVEQEBAAAAAAAAAAAAAAAAAAABEP/aAAgBAwEBPwEn/8QAFREBAQAAAAAAAAAAAAAAAAAAARD/2gAIAQIBAT8BZ//EABkQAAEFAAAAAAAAAAAAAAAAAAEAESAhMf/aAAgBAQAGPwLEC1R//8QAGhABAAMBAQEAAAAAAAAAAAAAAQARMSFBEP/aAAgBAQABPyEgu9HnsTgqYbEXTyJevxqf/9oADAMBAAIAAwAAABB4z//EABYRAQEBAAAAAAAAAAAAAAAAAAARIf/aAAgBAwEBPxDSv//EABYRAQEBAAAAAAAAAAAAAAAAAAARIf/aAAgBAgEBPxDKP//EABsQAAMBAQADAAAAAAAAAAAAAAABESExQVFx/9oACAEBAAE/EEDZpHX0TVGe1okOuwdROWKXwO1Y3iNvdP/Z'); background-size: cover; display: block;"},"children":[]},{"type":"text","value":"\n  "},{"type":"element","tagName":"picture","properties":{},"children":[{"type":"text","value":"\n          "},{"type":"element","tagName":"source","properties":{"srcSet":["/docs/legacy/static/509c5aa7c7132e7f2cba37049a343e4a/82e29/saunatimeTwitter-600x314.webp 159w","/docs/legacy/static/509c5aa7c7132e7f2cba37049a343e4a/ef33f/saunatimeTwitter-600x314.webp 318w","/docs/legacy/static/509c5aa7c7132e7f2cba37049a343e4a/e14a1/saunatimeTwitter-600x314.webp 600w"],"sizes":"(max-width: 600px) 100vw, 600px","type":"image/webp"},"children":[]},{"type":"text","value":"\n          "},{"type":"element","tagName":"source","properties":{"srcSet":["/docs/legacy/static/509c5aa7c7132e7f2cba37049a343e4a/ceb44/saunatimeTwitter-600x314.jpg 159w","/docs/legacy/static/509c5aa7c7132e7f2cba37049a343e4a/0bf1b/saunatimeTwitter-600x314.jpg 318w","/docs/legacy/static/509c5aa7c7132e7f2cba37049a343e4a/d6a7a/saunatimeTwitter-600x314.jpg 600w"],"sizes":"(max-width: 600px) 100vw, 600px","type":"image/jpeg"},"children":[]},{"type":"text","value":"\n          "},{"type":"element","tagName":"img","properties":{"className":["gatsby-resp-image-image"],"src":"/docs/legacy/static/509c5aa7c7132e7f2cba37049a343e4a/d6a7a/saunatimeTwitter-600x314.jpg","alt":"Preview image for Twitter","title":"Preview image for Twitter","loading":"lazy","decoding":"async","style":"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;"},"children":[]},{"type":"text","value":"\n        "}]},{"type":"text","value":"\n  "}]},{"type":"text","value":"\n    "}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Here are two image files you could use in the context of this tutorial:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"a","properties":{"href":"/docs/legacy/tutorial-assets/cottagedays-facebook-1200x630-by-markus-spiske.jpg"},"children":[{"type":"text","value":"Facebook sharing preview graphics"}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"a","properties":{"href":"/docs/legacy/tutorial-assets/cottagedays-twitter-600x314-by-markus-spiske.jpg"},"children":[{"type":"text","value":"Twitter sharing preview graphics"}]}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Steps to follow"}]},{"type":"text","value":":"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"ol","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Save those files to the assets directory"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Find all the modules where "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"saunatimeFacebook-1200x630.jpg"}]},{"type":"text","value":" and\n"},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"saunatimeTwitter-600x314.jpg"}]},{"type":"text","value":" are imported. There should be 2 files:\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"src/components/Page/Page.js"}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"src/containers/LandingPage/LandingPage.js"}]},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":" (This is an\nexample of how to overwrite default sharing images per page.)"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Change the imported asset files"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"extrainfo","properties":{"title":"Extra: how to test social media sharing?"},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"You can use online debuggers to check how your social media sharing\npreviews look like. However, the app needs to be available from the\npublic internet before you can use these tools:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"a","properties":{"href":"https://developers.facebook.com/tools/debug/","target":"_blank","rel":["noopener","noreferrer"]},"children":[{"type":"text","value":"Facebook sharing debugger"}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"a","properties":{"href":"https://cards-dev.twitter.com/validator","target":"_blank","rel":["noopener","noreferrer"]},"children":[{"type":"text","value":"Twitter card validator"}]}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"blockquote","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Note"}]},{"type":"text","value":": You could deploy the app to Render to test these tools. We\nwill cover "},{"type":"element","tagName":"a","properties":{"href":"/docs/legacy/tutorial/deploy-to-render/"},"children":[{"type":"text","value":"Render deploys"}]},{"type":"text","value":" later in this\ntutorial."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"favicon-and-app-icons","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#favicon-and-app-icons","ariaLabel":"favicon and app icons permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","height":"16","version":"1.1","viewBox":"0 0 16 16","width":"16"},"children":[{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","d":"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"},"children":[]}]}]},{"type":"text","value":"Favicon and app icons"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"There's also a second type of generic image assets: favicon and other\napp icons:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["gatsby-highlight"],"dataLanguage":"shell"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-shell"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-shell"]},"children":[{"type":"text","value":"└── public\n    └── static\n        └── icons\n            ├── android-chrome-192x192.png\n            ├── android-chrome-512x512.png\n            ├── apple-touch-icon.png\n            ├── browserconfig.xml\n            ├── favicon-16x16.png\n            ├── favicon-32x32.png\n            ├── favicon.ico\n            ├── map-marker-32x32.png\n            ├── mstile-150x150.png\n            └── safari-pinned-tab.svg\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The default favicon of FTW-daily template, Saunatime, is a flame icon:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"span","properties":{"className":["gatsby-resp-image-wrapper"],"style":"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 319px; "},"children":[{"type":"text","value":"\n      "},{"type":"element","tagName":"a","properties":{"className":["gatsby-resp-image-link"],"href":"/docs/legacy/static/5cea4dab149702c351280cc013072ba2/02677/saunatime-favicon.png","style":"display: block","target":"_blank","rel":["noopener"]},"children":[{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["gatsby-resp-image-background-image"],"style":"padding-bottom: 23.270440251572328%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAFCAYAAABFA8wzAAAACXBIWXMAAAsTAAALEwEAmpwYAAABLklEQVQY01WPWU/CQACE+0M8iFobytFrd7vbroAo5SjiQZSIElCO6IP///EzaeKDD5PJfJmHGWfcaDK2Ln63zonw8L02OkoQQqONRUiDkBqpMhKhqyyVIdU5Ms0QylQsiETlzjoMWJcXBA8NjjseUUOwVwnzccnh+4fFYslqtWG3O/C2XPH5sWP7ua/yfv/FfP5SdXq9G6bTe5zTS5+a2+a8VqfuNgljhZSGOEmJYkWiclpJRjM2+GH6T3+8LXJCZQmkxRkOJ0ipWby+k9ku682W8WRGOX3g/vEZLzLcju7oXBdMZk/MF288vSwpJjMSbck6N9RbMUc1l5MzDye3ver77WBEqi3X/QHaXFGMSophWa2Qtk+UXmG6A7JeUUnZPq3EEMgcP1S4jYjLZswvllWrwyRqRQ8AAAAASUVORK5CYII='); background-size: cover; display: block;"},"children":[]},{"type":"text","value":"\n  "},{"type":"element","tagName":"picture","properties":{},"children":[{"type":"text","value":"\n          "},{"type":"element","tagName":"source","properties":{"srcSet":["/docs/legacy/static/5cea4dab149702c351280cc013072ba2/82e29/saunatime-favicon.webp 159w","/docs/legacy/static/5cea4dab149702c351280cc013072ba2/ef33f/saunatime-favicon.webp 318w","/docs/legacy/static/5cea4dab149702c351280cc013072ba2/172f8/saunatime-favicon.webp 319w"],"sizes":"(max-width: 319px) 100vw, 319px","type":"image/webp"},"children":[]},{"type":"text","value":"\n          "},{"type":"element","tagName":"source","properties":{"srcSet":["/docs/legacy/static/5cea4dab149702c351280cc013072ba2/8b9b5/saunatime-favicon.png 159w","/docs/legacy/static/5cea4dab149702c351280cc013072ba2/fa108/saunatime-favicon.png 318w","/docs/legacy/static/5cea4dab149702c351280cc013072ba2/02677/saunatime-favicon.png 319w"],"sizes":"(max-width: 319px) 100vw, 319px","type":"image/png"},"children":[]},{"type":"text","value":"\n          "},{"type":"element","tagName":"img","properties":{"className":["gatsby-resp-image-image"],"src":"/docs/legacy/static/5cea4dab149702c351280cc013072ba2/02677/saunatime-favicon.png","alt":"Favicon for Saunatime","title":"Favicon for Saunatime","loading":"lazy","decoding":"async","style":"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;"},"children":[]},{"type":"text","value":"\n        "}]},{"type":"text","value":"\n  "}]},{"type":"text","value":"\n    "}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"To change it, we need to have favicon files - or if you have a square\nlogo available, you can follow\n"},{"type":"element","tagName":"a","properties":{"href":"/docs/legacy/ftw/how-to-change-ftw-icons/"},"children":[{"type":"text","value":"this guide article"}]},{"type":"text","value":" to generate those\nicons."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"In the context of this tutorial, we just show how to change the\nfavicons. You can use these files:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"a","properties":{"href":"/docs/legacy/tutorial-assets/favicon.ico"},"children":[{"type":"text","value":"favicon.ico"}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"a","properties":{"href":"/docs/legacy/tutorial-assets/favicon-16x16.png"},"children":[{"type":"text","value":"favicon-16x16.png"}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"a","properties":{"href":"/docs/legacy/tutorial-assets/favicon-32x32.png"},"children":[{"type":"text","value":"favicon-32x32.png"}]}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Then go to "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"public/static/icons/"}]},{"type":"text","value":" directory and replace the current\n"},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"favicon*"}]},{"type":"text","value":" files with the new ones. After those files have been saved,\nyou should see a new favicon in the browser's tab:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"span","properties":{"className":["gatsby-resp-image-wrapper"],"style":"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 318px; "},"children":[{"type":"text","value":"\n      "},{"type":"element","tagName":"a","properties":{"className":["gatsby-resp-image-link"],"href":"/docs/legacy/static/11f559310bc472759acc0dc070308dfe/fa108/cottagedays-favicon.png","style":"display: block","target":"_blank","rel":["noopener"]},"children":[{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["gatsby-resp-image-background-image"],"style":"padding-bottom: 23.89937106918239%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAFCAYAAABFA8wzAAAACXBIWXMAAAsTAAALEwEAmpwYAAABLUlEQVQY0z3LbU+CcBjFYT5JzMTkQUCe/kKAioShpdGyslyzZc6i1vd/92uy1YtrZ/fOuSXRVRF9BcXtImsdNNWk17cxLRfdsBuabv1TdRPNsNANq8njzuj1G3rPRvryXeo7BXNjcpKqeE6Ac6Nx9/hIXf+wXm/Y7fbs9x+8vGw5HD55fz9Q19+8bt+4v1+zWFRMpzMmkwJJVlRaisGpfEa3Y+B4AV4ocP0BQpwTREPccERfpPTcCMuPG8fbi8ZNHvs/0kVRNo+rhyeieMjzZstoXFDdrpgUc3QvJrsoiUc50/mSRbWivK4YxGP8MGm0FA253UVuq0hJmuEHEdPLKwZhwmy+5DwZsVjekuUlZpAQDgtEmpPPKrJyST6v8OMMW6TYIqFjuCi6g2I4/AIQGKosNillwAAAAABJRU5ErkJggg=='); background-size: cover; display: block;"},"children":[]},{"type":"text","value":"\n  "},{"type":"element","tagName":"picture","properties":{},"children":[{"type":"text","value":"\n          "},{"type":"element","tagName":"source","properties":{"srcSet":["/docs/legacy/static/11f559310bc472759acc0dc070308dfe/82e29/cottagedays-favicon.webp 159w","/docs/legacy/static/11f559310bc472759acc0dc070308dfe/ef33f/cottagedays-favicon.webp 318w","/docs/legacy/static/11f559310bc472759acc0dc070308dfe/ef33f/cottagedays-favicon.webp 318w"],"sizes":"(max-width: 318px) 100vw, 318px","type":"image/webp"},"children":[]},{"type":"text","value":"\n          "},{"type":"element","tagName":"source","properties":{"srcSet":["/docs/legacy/static/11f559310bc472759acc0dc070308dfe/8b9b5/cottagedays-favicon.png 159w","/docs/legacy/static/11f559310bc472759acc0dc070308dfe/fa108/cottagedays-favicon.png 318w","/docs/legacy/static/11f559310bc472759acc0dc070308dfe/fa108/cottagedays-favicon.png 318w"],"sizes":"(max-width: 318px) 100vw, 318px","type":"image/png"},"children":[]},{"type":"text","value":"\n          "},{"type":"element","tagName":"img","properties":{"className":["gatsby-resp-image-image"],"src":"/docs/legacy/static/11f559310bc472759acc0dc070308dfe/fa108/cottagedays-favicon.png","alt":"Favicon for CottageDays","title":"Favicon for CottageDays","loading":"lazy","decoding":"async","style":"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;"},"children":[]},{"type":"text","value":"\n        "}]},{"type":"text","value":"\n  "}]},{"type":"text","value":"\n    "}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"We also want to modify the landing page to use the cottage theme. We\nwill do that next."},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\n"},{"type":"element","tagName":"a","properties":{"href":"/docs/legacy/tutorial/modify-landing-page/"},"children":[{"type":"text","value":"› Go to the next article"}]}]}],"data":{"quirksMode":false}},"headings":[{"value":"Default background image","depth":2},{"value":"Images in 'assets' or Image Assets?","depth":3},{"value":"Images for social media","depth":2},{"value":"Favicon and app icons","depth":2}]}},"pageContext":{"slug":"change-images","category":"tutorial-branding"}},
    "staticQueryHashes": ["3794076007","439097193","717698143"]}