"TEST: Add favicons to any link using Google API"
Bootstrap 3.0.0 Snippet by moloy559

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

Related: See More


Questions / Comments: