Inline Everything

Because why not? Well... Also...

Find examples below for inlining different file types.
They all follow the common format:
data:[<mime type>][;charset=<charset>][;base64],

Bitmaps

data:image/png;base64,
data:image/gif;base64,
data:image/jpeg;base64,

SVG

data:image/svg+xml;base64,
data:image/svg+xml;utf8,<svg>

MP3

data:audio/mpeg;base64,

MP4

data:video/mp4;base64,

Favicon

data:image/png;base64, 
<link rel="shortcut icon" type="image/x-icon" href="data:image/png;base64,iVBORw0KGgoA">

Fonts

data:font/opentype;base64, 
@font-face {
  font-family: "Example-Font";
  src: url("data:font/opentype;base64,AAEAAAANAIAAAwBQR...") format("opentype");
}
data:font/truetype;base64, 
@font-face {
  font-family: "Example-Font";
  src: url("data:font/truetype;base64,AAEAAAANAIAAAwBQR...") format("truetype");
}

Stylesheets (what?)

data:text/css;base64, 
<link rel="stylesheet" media="all" href="data:text/css;base64,LyohIG5vcm1hbGl6ZS5...">

JavaScripts (whyyy?)

data:text/javascript;base64, 
<script type="text/javascript" href="data:text/javascript;base64,dmFyIHNjT2J...>