<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://cnn.com" target="_blank">Read it on CNN.com</a>
</p>
<p>Link with favicon:<br>
<a href="http://cnn.com" target="_blank"><img src="https://www.google.com/s2/favicons?domain=cnn.com" alt=""> Read it on CNN.com</a>
</p>
<pre><code>
<a href="http://cnn.com"><img src="https://www.google.com/s2/favicons?domain=cnn.com" alt=""> Read it on CNN.com</a>
</code></pre>
<p>Link with favicon:<br>
<a href="http://youtube.com" target="_blank"><img src="https://www.google.com/s2/favicons?domain=youtube.com" alt=""> Watch on YouTube.com</a>
</p>
<pre><code>
<a href="http://youtube.com" target="_blank"><img src="https://www.google.com/s2/favicons?domain=youtube.com" alt=""> Watch on YouTube.com</a>
</code></pre>
<p>Link with favicon:<br>
<a href="https://twitter.com/" target="_blank"><img src="https://www.google.com/s2/favicons?domain=twitter.com" alt=""> Tweet on Twitter.com</a>
</p>
<pre><code>
<a href="https://twitter.com/" target="_blank"><img src="https://www.google.com/s2/favicons?domain=twitter.com" alt=""> Tweet on Twitter.com</a>
</code></pre>
<p>Link with favicon:<br>
<a href="https://www.w3schools.com/" target="_blank"><img src="https://www.google.com/s2/favicons?domain=w3schools.com" alt=""> Learn about it on W3schools.com</a>
</p>
<pre><code>
<a href="https://www.w3schools.com/" target="_blank"><img src="https://www.google.com/s2/favicons?domain=w3schools.com" alt=""> Learn about it on W3schools.com</a>
</code></pre>
<hr>
<h4>Alternate using api.statvoo.com - without Google API </h4>
<p>Link with LARGER favicon using :<br>
<a href="http://cnn.com" target="_blank"><img src="https://api.statvoo.com/favicon/?url=cnn.com" alt=""> Read it on CNN.com</a>
</p>
<pre><code>
<a href="http://cnn.com"><img src="https://api.statvoo.com/favicon/?url=cnn.com" alt=""> Read it on CNN.com</a>
</code></pre>
<a href="http://youtube.com" target="_blank"><img src="https://api.statvoo.com/favicon/?url=youtube.com" alt=""> Watch on YouTube.com</a>
<pre><code>
<a href="http://youtube.com" target="_blank"><img src="https://api.statvoo.com/favicon/?url=youtube.com" alt=""> Watch on YouTube.com</a>
</code></pre>
<a href="https://twitter.com/" target="_blank"><img src="https://api.statvoo.com/favicon/?url=twitter.com" alt=""> Talk about it on Twitter.com</a>
<pre><code>
<a href="https://twitter.com/" target="_blank"><img src="https://api.statvoo.com/favicon/?url=twitter.com" alt=""> Talk about it on Twitter.com</a>
</code></pre>
<a href="http://www.w3schools.com" target="_blank"><img src="https://api.statvoo.com/favicon/?url=w3schools.com" alt=""> Learn about it on W3schools.com</a>
<pre><code>
<a href="http://www.w3schools.com" target="_blank"><img src="https://api.statvoo.com/favicon/?url=w3schools.com" alt=""> Learn about it on W3schools.com</a>
</code></pre>
<p class="text-right">
<a href="http://validator.w3.org/check?uri=http%3A%2F%2Fbootsnipp.com%2Fiframe%2FZXNpz" target="_blank"><small>This snippet is valid HTML</small><sup>5</sup></a>
</p>
</div>
</div>
