Site Settings

The toolbar button “Settings” opens a dialog where you can control:

General site settings

This section contains the website address and the website language. The address is important information for search engines and for sharing.

The website language is also an aid to both search engines and other non-human visitors that can safely learn the website language without attempting to infer it from the contained text.

Search engines try to find pages that match the language of the searcher, so if you are translating the website to multiple languages, you can add each additional language here as well, which will then let you annotate each page of your site with its specific language and the corresponding pages in the other languages your site supports. For each added language you will need to indicate the base link, or common ancestor to all page addresses, which is used when the translated pages are on a different domain.

Site verification

The first step after you complete your website is to make it known to search engines, so that they can start indexing it. Here you can copy/paste the codes provided by the webmaster section of the major search engines.

Search engines

Search engines can make use of a so called “sitemap.xml”, a file that tells the search engine bot exactly what files are available in the website. This is paired with a “robots.txt” file, which tells the bot what it can and can’t see. This settings pane tells Sparkle to produce the files. The pages have further granular control over indexing (availability for search) and archiving (storing for later use) by search engines.

Website icon

The website icon, sometimes referred to as a favicon, is an image that is associated with the site and is displayed in different locations depending on the browser. For example Safari shows it in the address bar, next to the website address and in the history menu, next to the page title. Google Chrome shows it in the browser tab, next to the page title. Mobile Safari shows it in the recent website grid in the new tab page.

You can pick a single square image that will be scaled to all the required sizes, or control individual icons by selecting each one in the popup menu.

Additionally, Safari supports a specific icon for pinned tabs and for the MacBook Pro Touch Bar. This icon is used as a mask, and needs to be a vector file in SVG format. The settings page gives you a high fidelity preview of exactly how the SVG will look in a pinned tab and in a Touch Bar.

Web browsers generally assume the website icon won’t be changed often, so they hold on to (cache) the icon for a very long time. For this reason Sparkle’s preview service does not show the website icons. Once you change the website icon you will need to clear the browsers’ website icon cache. Return site visitors will see the new icon after their browser’s icon cache has expired, which can be many weeks or even months after you change it.


This settings pane lets you pick which screens the generated images should support: @2x is common in modern phones and tablets such as any iPhone 4 or later, @3x is a very high resolution available in phones such as the iPhone X and plus iPhones (8+, 7+, …).

Generating @2x and @3x assets makes the website look crisper at the expense of larger images and more network bandwidth used by visitors to transfer the images when viewing the site.

The webp option causes Sparkle to generate an additional image in the webp image compression format for each image on the site. It is currently supported by Chrome and mobile Chrome.

Sparkle generates the page code in a way that ensures that modern browsers only download the appropriate resolution images, so while on disk or on the web host the site might be very large, only a fraction of the images is used by any one visitor.

The additional image sizes and formats only affect the website publishing time and the size on disk of the website, they don’t affect the page download time for site visitors, in fact they improve image quality, speed, or both.


By enabling the main checkbox in this pane you enable the generation of the OpenGraph metadata that’s necessary for sharing on the major social networks, Facebook, Linkedin, Pinterest and in-app sharing in Telegram, Slack, etc. A few metatags are added to the page so your site is Twitter compatible as well.

After enabling this setting the page settings of each page can then optionally include an image that will become the cover image of the sharing “card”. For example here are the page settings and the corresponding Facebook card.

Google Analytics

If you have a Google Analytics account you can activate user tracking on your website by entering the identifier found on the Analytics control panel.

The visitor profiling  option lets you run GA in anonymous mode or in tracking mode, whereby visitor identification information is collected. The latter has an impact on the privacy consent/cookie laws. See the privacy section.

The “Add Privacy Policy Fragment” creates a text element with Google’s privacy policy, which Google Analytics users have agreed to add to the site.

Please refer to Google Analytics documentation for further information:

Local Business

The information entered in this panel won’t be visible to site visitors directly, rather it is stored as so called “structured data” that search engines read. This metadata improves the search ranking in local search results. In some cases search engines will show a “card” summary of your website, making it stand out in search results.


Text antialiasing affects how text is displayed. Subpixel antialiasing improves legibility at smaller font sizes, but looks fatter and bolder than grayscale-antialiased text. This effect is particularly visible with light text on dark backgrounds, for example white on black. Subpixel antialiasing is not supported on mobile browsers and is generally also not compatible with animation, so a page with animations will visibly change from bolder text with subpixel antialiasing to thinner text with grayscale animation, for the duration of the animation, and then back to bolder text. As this is undesirable, Sparkle defaults to grayscale text antialiasing.

Hiding text that extends beyond the text frame ensures Sparkle’s layout is always precise and as close as possible to the canvas editing.

Adding an always visible vertical scrollbar, even on pages that don’t require scrolling, is a way to prevent the page from jumping horizontally when switching between pages of mixed length. This option is only visible if your system is showing vertical scrollbars, which is not the case if you have a touch pointing device.

Please report any shortcoming in this documentation and we’ll fix it as soon as possible!

Copyright © 2019 River SRL 

IT06208340486 — REA FI-609716

This site uses cookies. Some are essential to make our site work; others help us improve the user experience and display third party content. By using the site, you agree to our site sending these cookies. Read our privacy policy to learn more or opt out.