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 edge to edge screen iPhones.

Generating @2x and @3x assets makes the website look crisper at the expense of more images generated, but each site visitor will only download the images that are optimal for their device.

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 in widespread use and its use is recommended.

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.

For JPEG and WebP compression, Sparkle's "Better Compression" option uses perceptual optimization to find the optimal compression level. For PNG images, "Better Compression" uses relatively slow algorithms that find the best settings to reduce the image size. Size savings depend on the image, but are generally pretty good.


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.


From here you can authenticate Sparkle with your Instagram account, to enable the post sharing features in the Instagram element, the image element and the gallery element.

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:

Google Ads

This is where you enter the publisher ID for your Google Ads account.

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.


Each payment service requires an authentication key from your user account on their system. This is where you enter them, to make payment features work.


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.

Sparkle's general site settings
Sparkle's verification site settings
Sparkle's search engine metadata site settings
Sparkle's website icon site settings
Sparkle's image generation and compression site settings
Sparkle's social sharing metadata site settings
A preview of the Sparkle shared image card
Sparkle's page settings for social sharing
Sparkle's instagram setup site settings
Sparkle's Google Analytics site settings
Sparkle's Google Ads site settings
Sparkle's local business site settings
Sparkle's payment site settings
Sparkle's miscellaneous site settings

Updated for Sparkle 3.1

Auf Deutsch

En Français

In Italiano

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

Sparkle combines an all-in-one approach, an understandable interface and a focus on producing high performance and search engine optimized websites. 

All in a powerful native Mac app. 

Nothing else comes close.

Copyright ©2021 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.