<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="row">
<img src="http://maps-api-presentations.appspot.com/io2012-spatial/images/google_developers_icon_128.png" alt="google api">
<h2>A simple way to add a favicon to links in Bootstrap</h2>
<h4>Let Google API do all the heavy lifting.</h4>
<p>
You can use Google S2 FavIcon Converter API which returns a 16px X 16px PNG image for any website.
<br><strong>Note:</strong> The file type and location of a favicon is not always the same, so using Google API will make it easy.
<br>
<strong>TIP:</strong> The target="blank" just opens a new window, nothing to do with favicon api.
</p>
<p>Link without favicon - just a normal link:<br>
<a href="http://phaser.io/" target="_blank">See imagination bloom on Phaser.io</a>
</p>
<p>Link with favicon:<br>
<a href="http://phaser.io/" target="_blank"><img src="https://www.google.com/s2/favicons?domain=phaser.io" alt=""> See imagination bloom on Phaser.io</a>
</p>
<pre><code>
<a href="http://phaser.io/"><img src="https://www.google.com/s2/favicons?domain=phaser.io" alt=""> See imagination bloom on Phaser.io</a>
</code></pre>
<p>Links with favicons:<br>
<a href="https://www.thinkgeek.com/" target="_blank"><img src="https://www.google.com/s2/favicons?domain=thinkgeek.com" alt=""> Monkey Merch</a>
</p>
<pre><code>
<a href="https://www.thinkgeek.com/"><img src="https://www.google.com/s2/favicons?domain=thinkgeek.com" alt=""> Monkey Merch!</a>
</code></pre>
<p>Link with favicon:<br>
<a href="https://www.lootcrate.com/" target="_blank"><img src="https://www.google.com/s2/favicons?domain=lootcrate.com" alt=""> Geek Merch</a>
</p>
<pre><code>
<a href="https://www.lootcrate.com/"><img src="https://www.google.com/s2/favicons?domain=lootcrate.com" alt=""> Geek Merch!</a>
</code></pre>
<hr>
<h4>Alternate using api.statvoo.com - without Google API </h4>
<p>Link with LARGER favicon using :<br>
<a href="https://www.thinkgeek.com/" target="_blank"><img src="https://api.statvoo.com/favicon/?url=thinkgeek.com" alt=""> Get all your merch here!</a>
</p>
<pre><code>
<a href="https://www.thinkgeek.com/"><img src="https://api.statvoo.com/favicon/?url=thinkgeek.com" alt=""> ALL the merch!</a>
</code></pre>
<p class="text-right">
<a href="https://bootsnipp.com/fullscreen/M5NB9" target="_blank"> <small>Full Screen</small></a><br>
</p>
<p class="text-right">
<a href="https://validator.w3.org/nu/?doc=https%3A%2F%2Fbootsnipp.com%2Fsnippets%2FM5NB9" target="_blank"><small>This snippet is valid HTML</small><sup>5</sup></a>
</p>
</div>
</div>
