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...>