I like to use Font Awesome in the Header for the subtitle of the website. It works and looks okay on the Browser-Window, but then I have also the Font Awesome code in the Browser-Tab.
<title>Open TECH Academy – Wissen <i class="green fa
fa-circle-o"></i> Machen <i class="green fa
fa-circle-o"></i> Teilen</title>
Would be great to separate this, <title> and <header> in <body>.
Best to add your title in GP Hooks, and use a title without the icon in the Customizer (and hide it).
In GP Hooks, you can do this in the Before Header Content hook:
<div class="site-branding">
<p class="main-title" itemprop="headline"><a href="URL TO YOUR HOME PAGE" rel="home">YOUR SITE TITLE WITH ICON</a></p>
<p class="site-description">YOUR TAGLINE IF NECESSARY</p>
</div>