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.
-
What’s in the head? | MDN
A general overview from our friends at MDN. -
Metadata | web.dev
And the folks at Google.
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
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.
- How to Favicon in 2024
Pretty good, modern walkthrough.
The humble favicon.ico (Safari)
The base favicon format is .ico—from ancient, bitmapped Windows icons. It is a package/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:
- Browsers still look for a
favicon.icoat the root of a domain. - These are used, as a default/fallback, if none are specified in your
<head>. - Safari (so namely iOS) needs them—it doesn’t support SVG favicons (below).
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 a PNG for each dimension, from Figma, into your project folder.
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/
<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 caches these dramatically—meaning any changes are not reflected/updated for a very long time. It’s extremely annoying.
- Safari also doesn’t facilitate detecting light/dark mode, so your icon needs to be visible on both a light and dark toolbar/background.
- Safari still occasionally decides to mat icons onto white that it doesn’t think have enough contrast. You can’t prevent or control this! Cool.
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/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 <style> 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.
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/
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>.
-
The Open Graph protocol
The original spec. -
Sharing Debugger - Meta for Developers
Check your cards without sharing. -
Hey Meta
A simple, decent, non-Meta version. -
Iframely URL Debugger
This one will show you everything.
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
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?
Schema and web app manifests
Beyond this, there is a (very, very) long tail of metadata/
-
Schema.org
Another common structured-data format/collection. -
Web app manifests | MDN
Metadata for apps. -
Intro to How Structured Data Markup Works
How Google uses these.
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
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/
- Meta Theme Color and Trickery | CSS-Tricks
A really deep dive.
<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.