Link Previews and Favicons

When you share a link to your content in Slack, Microsoft Teams, Discord, WhatsApp, Telegram, LinkedIn, X, Facebook, Bluesky, Mastodon, or Reddit, the service fetches the page and shows a preview card with a title, description, image, and icon.

What a preview shows

Connect Cloud adds Open Graph tags to your content’s pages so these services can build the preview. The tags come from your content’s settings:

Preview field	Source	When it isn’t set
Title	The content’s title	—
Description	The content’s description	“Interactive data applications and reports”
Image	The content’s automatically generated thumbnail	The Connect Cloud icon, in a smaller card
Icon	The content’s favicon (see Favicons)	The Connect Cloud icon

After you change the title, description, or thumbnail, Connect Cloud can take up to five minutes to update the tags. Some services, including Slack, also cache a preview for each URL, so a link that was already shared may keep its old preview.

Which content gets a preview

Only content with Public Access enabled gets a preview. Links to private content, including private share links, never reveal the content’s title, description, or thumbnail. The service shows a plain link instead.

Using your own Open Graph tags

If any page in your content sets its own Open Graph tag (a <meta property="og:..."> tag), Connect Cloud adds no tags to that page. Set the full group you want to appear, for example:

<meta property="og:title" content="Quarterly Sales Dashboard">
<meta property="og:description" content="Sales by region, updated daily.">
<meta property="og:image" content="https://example.com/preview.png">

Link previews and robots.txt

LinkedIn and X check robots.txt before fetching a page to build a preview. The default robots.txt allows their crawlers so that preview links work while still asking every other crawler, including search engines, to stay away. If you serve your own robots.txt and want previews on LinkedIn and X, allow LinkedInBot and Twitterbot.

Favicons

A favicon is the small icon shown in the browser tab and next to the link in a preview. Content that doesn’t provide its own favicon gets the Connect Cloud icon.

Static content

For static content, including rendered Quarto, R Markdown, and Jupyter documents, either:

Include a favicon.ico at the root of your published output, so it’s served at /favicon.ico.
Declare the icon in the page <head>:
```
<link rel="icon" type="image/png" href="logo.png">
```
For a Quarto website, set favicon under website in _quarto.yml, and Quarto adds this tag to every page.

Applications

For Shiny, Streamlit, Dash, Bokeh, and other applications, declare the icon in the page <head> at a path other than /favicon.ico.

Connect Cloud answers requests for /favicon.ico, /__favicon__, and any path ending in /__favicon__ before they reach your app, so serving a file at one of those paths doesn’t replace the default. A relative href="favicon.ico" on your app’s main page resolves to /favicon.ico and has the same problem. Give the file another name, such as logo.png.

Shiny for R, with the icon saved as www/logo.png:

ui <- fluidPage(
  tags$head(tags$link(rel = "icon", type = "image/png", href = "logo.png")),
  ...
)

Shiny for Python, with the icon saved as www/logo.png:

from pathlib import Path
from shiny import App, ui

app_ui = ui.page_fluid(
    ui.head_content(ui.tags.link(rel="icon", type="image/png", href="logo.png")),
    ...
)
app = App(app_ui, server, static_assets=Path(__file__).parent / "www")

Frameworks with their own favicon setting, such as Streamlit’s st.set_page_config(page_icon=...), should also work, as long as the URL they produce isn’t /favicon.ico.

When an application is asleep, the first page a visitor sees is a loading page that uses the Connect Cloud icon. A browser may keep showing that icon after your app starts; reloading the page shows yours. A preview that a service captures while the app is starting keeps the Connect Cloud icon.

Icon formats

Use a PNG or ICO file. SVG icons work in many browsers, but Slack ignores them, and some older browsers don’t support them.

Slack only reads the first icon a page declares. If you also provide an SVG, list the PNG first:

<link rel="icon" type="image/png" sizes="32x32" href="logo.png">
<link rel="icon" type="image/svg+xml" href="logo.svg">

To use a different icon in dark mode, add a second icon with a media attribute:

<link rel="icon" type="image/png" href="logo-dark.png" media="(prefers-color-scheme: dark)">

Changing your icon

Browsers keep favicons for a long time. After you publish a new icon, returning visitors may see the old one for an hour or more. A private browsing window shows the current icon.