&

🎁

Putting a (link/meta) bow on it

Beyond rendering directly in browsers themselves, web pages also exist in the contexts of search engines, social media, messaging, and other sharing—and we should give attention to how they appear in these environments, too.

We’ve gathered a handful of practices here which adjust and optimize how your site appears through these lenses, via special <link> and <meta> elements that live in your page’s <head>. No site is truly complete without considering these.

Favicons and touch images

Chrome.
iOS/Mobile Safari.

The first of these is the favicon (for favorite icon)—which appears in the browser’s tabs/address bar, bookmarks, history, and also on search engine entries. This is often a logo—though they don’t always translate down well in size. Sometimes it is its own thing. But it is always an important part of the initial impression of your site, and should be carefully considered and constructed.

The humble favicon.ico (Safari)

The base favicon format is .ico—from ancient, bitmapped Windows icons. It is a package/directory/container format, meaning it can contain several, discrete, raster icon sizes: 16×16px, 32×32px, 64×64px, etc. (We’ll use different elements for our other/larger needs.)

These are (unfortunately) still needed today because of several, long-standing browser quirks:

You should draw each size individually, if necessary—pixel-tuning each version to land nicely on the pixel grid, so it is legible and crisp at its dimension. You can use Figma’s pixel preview (set at 1x), toggled with   P.

Note that these can have transparent backgrounds, and that HiDPI (2x/retina) displays will render their device-native size—so most folks are seeing your 32px version, these days. Export PNG for each dimension, from Figma, into your project folder.

Draw an artboard/frame for each size.

These can be combined together in an .ico with ImageMagick—the appropriately named Dark Arts tool at the bottom of every imaging pipeline. (If you’re on a Mac, some version of this is likely already installed; PCs might need to download it). You’ll run this terminal command, in your project folder:

convert 16.png 32.png 64.png -compress zip favicon.ico

You can open a terminal in VS Code (or separately, from GitHub Desktop) with ` (control + backtick/tilde).

You should still specify/include the resulting favicon.ico in your <head>, allowing you to organize/move it out of the root:

<head>
	<title>Typography and Interaction</title>
	<link href="assets/favicon.ico" rel="icon" sizes="any">
	<!-- The rest of your head… -->
</head>

We’ve omitting the responsive viewport element here, for clarity. But your <head> should have this along with all your stylesheets and JS. Just the metadata, here.

A few other (Safari) concerns:

Safari adds this white!

Oh, Safari. I wish I knew how to quit you.

Modern SVGs (Chrome et al.)

Chrome is decidedly better, here. It supports SVGs for favicons, which gives us the benefit of the vector format—resolution independence. One file, no intermediate/terminal steps, for different display sizes and densities. It is still a good practice to draw these at 16×16px—so you can pixel-tune them—then export from Figma, now as an SVG.

You should add them to your <head> as a progressive enhancement for Chrome, after the previous <link>; Safari will just ignore them:

<head>
	<title>Typography and Interaction</title>
	<link href="assets/favicon.ico" rel="icon" sizes="any">
	<link href="assets/favicon.svg" rel="icon" type="image/svg+xml">
	<!-- The rest of your head… -->
</head>

SVGs have another benefit: since they can include self-contained, internal <style> elements—we can alter/adjust our favicon with prefers-color-scheme (light/dark mode) media queries!

<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
	<style>
		#ampersand { fill: #000000; }

		@media (prefers-color-scheme: dark) {
			#ampersand { fill: #ffffff; }
		}
	</style>
	<path id="ampersand" d="M6.3206 13.8169C5.28382 13.8169 4.36709 13.6368 3.5704 13.2767C2.77372 12.9056 2.15165 12.3982 1.7042 11.7543C1.25675 11.0995 1.03302 10.3464 1.03302 9.49518C1.03302 8.6985 1.1749 7.99458 1.45865 7.38342C1.75331 6.76135 2.14619 6.2757 2.6373 5.92647C3.13932 5.56633 3.69591 5.39171 4.30706 5.40263C4.85274 5.41354 5.28382 5.5445 5.60031 5.79551C5.92772 6.03561 6.09142 6.35756 6.09142 6.76135C6.09142 7.03419 6.02048 7.27974 5.8786 7.49801C5.73673 7.71628 5.54029 7.8909 5.28928 8.02186C5.04918 8.14191 4.77089 8.20193 4.4544 8.20193C3.96329 8.20193 3.53221 8.06006 3.16115 7.77631C2.79009 7.49256 2.49543 7.09967 2.27716 6.59765C2.0698 6.08472 1.96612 5.49539 1.96612 4.82967C1.96612 4.26217 2.11345 3.74923 2.40812 3.29087C2.70278 2.8325 3.09021 2.47236 3.5704 2.21043C4.0506 1.9376 4.56899 1.80663 5.12557 1.81755C5.60577 1.82846 5.98774 1.95397 6.27149 2.19406C6.55524 2.42325 6.69712 2.74519 6.69712 3.15991C6.69712 3.37817 6.63164 3.55825 6.50067 3.70012C6.36971 3.83108 6.1951 3.89657 5.97683 3.89657C5.85678 3.89657 5.73673 3.842 5.61668 3.73286C5.50755 3.62373 5.45298 3.51459 5.45298 3.40546C5.45298 3.21993 5.39295 3.0726 5.27291 2.96346C5.16377 2.85433 5.01644 2.79976 4.83091 2.79976C4.47077 2.79976 4.1379 2.89252 3.83233 3.07805C3.52675 3.26358 3.2812 3.52005 3.09567 3.84745C2.91014 4.17486 2.81737 4.55137 2.81737 4.977C2.81737 6.69042 3.35213 7.54712 4.42166 7.54712C4.71632 7.54712 4.95096 7.47073 5.12557 7.31794C5.30019 7.16515 5.3875 6.96325 5.3875 6.71224C5.3875 6.49397 5.28382 6.31936 5.07646 6.1884C4.86911 6.04652 4.59627 5.97558 4.25795 5.97558C3.54858 5.97558 2.98653 6.24296 2.57182 6.77772C2.15711 7.31248 1.94975 8.00003 1.94975 8.84037C1.94975 9.47335 2.09708 10.0681 2.39175 10.6247C2.68641 11.1704 3.17752 11.6124 3.86507 11.9507C4.56353 12.289 5.50755 12.4582 6.69712 12.4582C7.7339 12.4582 8.59606 12.2617 9.28361 11.8689C9.97116 11.476 10.4841 10.963 10.8224 10.3301C11.1607 9.68617 11.3299 9.00953 11.3299 8.30015C11.3299 7.64535 11.1826 7.11058 10.8879 6.69587C10.5932 6.28116 10.0639 6.0738 9.29998 6.0738C8.92892 6.0738 8.63972 6.17748 8.43236 6.38484C8.23592 6.59219 8.13769 6.85412 8.13769 7.17061C8.13769 7.37796 8.18681 7.56349 8.28503 7.7272C8.38325 7.87998 8.54695 7.95638 8.77613 7.95638C8.89618 7.95638 8.98349 7.9291 9.03806 7.87453C9.09262 7.80905 9.14174 7.73811 9.18539 7.66171C9.23996 7.57441 9.29998 7.4871 9.36546 7.39979C9.43094 7.31248 9.54008 7.26883 9.69286 7.26883C9.94388 7.26883 10.1239 7.33431 10.2331 7.46527C10.3531 7.59623 10.4077 7.75994 10.3968 7.95638C10.3859 8.19648 10.2876 8.41475 10.1021 8.61119C9.91659 8.80763 9.68195 8.90585 9.3982 8.90585C8.8307 8.90585 8.37233 8.74761 8.0231 8.43112C7.68479 8.11462 7.51563 7.69446 7.51563 7.17061C7.51563 6.76681 7.63022 6.40121 7.8594 6.0738C8.08858 5.73549 8.39416 5.46811 8.77613 5.27166C9.15811 5.06431 9.58373 4.96063 10.053 4.96063L11.4772 4.94426C12.2521 4.93335 12.8305 4.79147 13.2125 4.51863C13.5944 4.23488 13.7854 3.81471 13.7854 3.25813C13.7854 2.97438 13.7036 2.74519 13.5399 2.57058C13.3871 2.38505 13.1852 2.29228 12.9342 2.29228C12.8469 2.29228 12.7705 2.32502 12.705 2.39051C12.6504 2.44507 12.6231 2.51055 12.6231 2.58695C12.6231 2.66334 12.6395 2.73428 12.6722 2.79976C12.7159 2.86524 12.7814 2.9089 12.8687 2.93072C12.956 2.95255 13.016 3.00166 13.0488 3.07805C13.0924 3.15445 13.1142 3.23084 13.1142 3.30724C13.1142 3.46003 13.0488 3.59099 12.9178 3.70012C12.7868 3.80926 12.6286 3.86382 12.4431 3.86382C12.1811 3.86382 11.9683 3.78197 11.8046 3.61827C11.6409 3.45457 11.5591 3.24176 11.5591 2.97983C11.5591 2.76156 11.6191 2.57058 11.7391 2.40688C11.8701 2.23226 12.0447 2.09584 12.263 1.99762C12.4922 1.8994 12.7432 1.85029 13.016 1.85029C13.4526 1.85029 13.8018 2.01399 14.0637 2.34139C14.3256 2.65789 14.4566 3.08897 14.4566 3.63464C14.4566 4.12575 14.3365 4.55683 14.0965 4.92789C13.8564 5.28803 13.518 5.56633 13.0815 5.76277C12.6559 5.95921 12.1429 6.05743 11.5427 6.05743C11.4554 6.05743 11.3954 6.07926 11.3626 6.12292C11.3299 6.15566 11.3353 6.20477 11.379 6.27025C11.5973 6.6413 11.7446 7.00691 11.821 7.36705C11.9083 7.7272 11.952 8.15828 11.952 8.6603C11.952 9.66434 11.7119 10.5592 11.2317 11.345C10.7515 12.1199 10.0858 12.7256 9.2345 13.1621C8.39416 13.5986 7.42286 13.8169 6.3206 13.8169Z" />
</svg>

You would export your SVG from Figma, then manually add the <style> and id, in VS Code.

Light mode.
If we had a dark mode.

You may or many not want to do this! It entirely depends on how you are using your favicon. We thought black-text-on-white was our real brand—not the ampersand form itself—and so didn’t use this method.

And apple-touch-icon

When the iPhone (with Mobile Safari) came on the scene in 2007, it added its own tag for webpage icons—now commonly known as touch or share icons—visible when adding pages to your home screen and in bookmarks, frequently-visited lists, and messages.

As everyone rushed to… respond to the iPhone, this syntax stuck and became the de facto standard—Android and Chrome use the same rel="apple-touch-icon" syntax, and for similar uses. In lieu of larger/specific images (more on that below), you should think of this as your default share image.

Safari bookmarks/favorites.

This should be an opaque (no transparency) PNG, at around 256×256px. Again, add it in your <head>, below the others:

<head>
	<title>Typography and Interaction</title>
	<link href="assets/favicon.ico" rel="icon" sizes="any">
	<link href="assets/favicon.svg" rel="icon" type="image/svg+xml">
	<link href="assets/touch.png"  rel="apple-touch-icon">
	<!-- The rest of your head… -->
</head>

We used the same image content as our favicon, here—but with the larger sizes, you might want to use this form more distinctly. Think of how these are used/shown differently, and interpret this for your work!

Open Graph, structured data, metadata

As sharing contexts became more and more prevalent, other approaches were developed to add additional information around pages in these scenarios—using special <meta> tags in the <head>.

Here, (ironically, pre-Meta) Facebook led the charge—what the iPhone was for the mobile web, Facebook was for sharing. They developed the Open Graph protocol, which became the standard and is used now in many (usually, non-Facebook) contexts. (Graph here is used with the maths meaning.)

This type of added info, broadly, can be referred to as structured data or metadata—hence Facebook’s name change!

Image

So beyond your favicon and touch images, you can also specify an og:image (OG for… Open Graph) in your <head>. This is often used for more page-specific images: the main photo for a news article, the product shot in e-commerce, and so on. These are generally made visible when sharing a link on Facebook, LinkedIn, Slack, Messages, etc.—where these sites/apps generate a share card or preview (also sometimes called an unfurl) for the URL.

Slack shows the whole image.
LinkedIn crops in to 16:9.

These can now be JPGs (for more photographic content), or PNGs (again, opaque). Tradition (inertia) suggests Facebook’s original 1200x630px dimension—but every context/app handles these differently. A better, modern rule-of-thumb is an image around 1200px on the long edge, at its original/best aspect-ratio.

These are again specified in your <head>, now with <meta> elements—importantly, with the full, absolute URL for the file:

<head>
	<title>Week 24</title>
	<link href="assets/favicon.ico" rel="icon" sizes="any">
	<link href="assets/favicon.svg" rel="icon" type="image/svg+xml">
	<link href="assets/touch.png"  rel="apple-touch-icon">
	<meta content="https://typography-interaction-2324.github.io/assets/meta/link-meta.png" property="og:image">
	<meta content="A grid of emoji gift-wrapped boxes with red bows." property="og:image:alt">
	<!-- The rest of your head… -->
</head>

Note these allow an alt text for accessibility, in a separate tag.

Title and description

Open Graph also specifies og:title and og:description properties. However, we already have a <title> element—and there was an existing convention around descriptions—which browsers, apps, and search engines continue to use.

So we think including redundant og: versions for title/description is often unnecessary. (SEO/snake-oil folks might disagree.) If you are worried—or your boss tells you to—you could duplicate the tags. One reason might be to tailor different content (like your description length), for different platforms. But we don’t think it is worth it, most of the time.

Again, different apps are going to display and use this information in their own way—so there are no hard rules on length, and you’ll want to check the contexts you care about. Generally, tweet (toot?) length works well—so somewhere around 140 characters. And titles and descriptions should always be plain text—no HTML. You can usually use entities or encoded non-breaking spaces, though!

We’ll add in a description, to our <head> stack:

<head>
	<title>Typography and Interaction</title>
	<meta property="description" content="Typography & Interaction is a year-long, two-semester course in the MPS Communication Design program at Parsons / The New School. The class will provide a rigorous foundation of typographic and interaction principles in the context of digital design.">
	<link href="assets/favicon.ico" rel="icon" sizes="any">
	<link href="assets/favicon.svg" rel="icon" type="image/svg+xml">
	<link href="assets/touch.png"  rel="apple-touch-icon">
	<!-- The rest of your head… -->
</head>

Google makes its snippet from your description—but it might also show other text there, based on your search. It also might decide to show your images, or not! Ultimately, you can only suggest these things.

Audio and video

Some sharing contexts even let you play audio or video directly, in situ, from a share card. This might be useful for sites oriented around media, like Spotify or YouTube—but keep in mind the user is then not visiting the pages themselves, which you might prefer.

These are specified much like images, with the og:audio and og:video properties. There are extra metadata properties associated with the different types.

Conceptually, do you want your shared URL to function only as a link? Or somewhat as the thing itself?

Messages allows inline media.

Schema and web app manifests

Beyond this, there is a (very, very) long tail of metadata/structured-data uses. Much of it will depend on the nature of your project/work, and there will be sub-conventions within conventions.

After Open Graph, the most common structures you might encounter next are probably Schema.org, oriented around search engine (Google) snippets—and Web app manifests (manifest.json), used by progressive web apps. Whether these are necessary will depend on your project!

Other things for your <head>

charset

This usually isn’t explicitly needed these days—because browsers assume/default to it—but you might have seen it in our examples and on other sites:

<head>
	<meta charset="utf-8">
	<!-- The rest of your head… -->
</head>

This specifies your document’s character encoding as UTF-8, a superset of basic ASCII. Long story (very) short—this allows you to use encoded non-latin characters (and emoji 👋) directly in your HTML! To be thorough/explicit (or if you are seeing weird character junk), you can include this tag.

theme-color

Finally, another recent <head> quirk: you can specify a theme-color, which is used by (some) browsers to tint/color their own UI around/outside of the page:

<head>
	<meta content="white" name="theme-color">
	<!-- The rest of your head… -->
</head>

This changes with pretty much every OS release—but as of writing, usually only shows up on Mobile Safari and Mobile Chrome. (Desktop Safari default settings have it turned off; Desktop Chrome has never shown it.)

Safari tries to infer this color from your <body> background (and choses a contrasting UI text color)—but with complicated pages it might guess these wrong. You might also just want to adjust it, based on your design.

Safari correctly guessed white.
But maybe we’d rather hide that dynamic island.