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

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

Related: See More


Questions / Comments: