Google favicons API

google-favicons-api.markdown

Google favicons API

A Pen by Matt Daniel Brown on CodePen.

License.

index.html

<!-- Google API -->
<div class="icons">
  <span>Google API</span>
<img src="https://s2.googleusercontent.com/s2/favicons?domain=twitter.com&sz=32" alt="Twitter Icon"/>
<img src="https://s2.googleusercontent.com/s2/favicons?domain=google.com&sz=32" alt="Goolgle Icon"/>
<img src="https://s2.googleusercontent.com/s2/favicons?domain=facebook.com&sz=32" alt="Facebook Icon"/>
<img src="https://s2.googleusercontent.com/s2/favicons?domain=mailbrew.com&sz=32" alt="Mailbrew Icon"/>
<img src="https://s2.googleusercontent.com/s2/favicons?domain=getmakerlog.com&sz=32" alt="Makerlog Icon"/>
<img src="https://s2.googleusercontent.com/s2/favicons?domain=leavemealone.app&sz=32" alt="Leave Me Alone Icon"/>
</div>
<br />

<!-- DDG API -->
<div class="icons">
  <span>DDG API</span>
<img src="https://icons.duckduckgo.com/ip3/twitter.com.ico" alt="Twitter Icon"/>
<img src="https://icons.duckduckgo.com/ip3/google.com.ico" alt="Goolgle Icon"/>
<img src="https://icons.duckduckgo.com/ip3/facebook.com.ico" alt="Facebook Icon"/>
<img src="https://icons.duckduckgo.com/ip3/mailbrew.com.ico" alt="Mailbrew Icon"/>
<img src="https://icons.duckduckgo.com/ip3/getmakerlog.com.ico" alt="Makerlog Icon"/>
<img src="https://icons.duckduckgo.com/ip3/leavemealone.app.ico" alt="Leave Me Alone Icon"/>
</div>
<br />

<!-- unavatar API -->

<div class="icons">
  <span>Unavatar API</span>
<img src="https://unavatar.now.sh/twitter.com" alt="Twitter Icon"/>
<img src="https://unavatar.now.sh/google.com" alt="Goolgle Icon"/>
<img src="https://unavatar.now.sh/facebook.com" alt="Facebook Icon"/>
<img src="https://unavatar.now.sh/mailbrew.com" alt="Mailbrew Icon"/>
<img src="https://unavatar.now.sh/getmakerlog.com" alt="Makerlog Icon"/>
<img src="https://unavatar.now.sh/leavemealone.app" alt="Leave Me Alone Icon"/>
</div>

style.scss

body, html {
  width: 100%;
  text-align: center;
}

img {
  margin: 1em auto;
  display: inline-block;  
  width: 32px;
}

.icons {
  width: 500px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  margin: 0 auto;
  
  span {
    width: 200px;
    text-align: right;
    padding-right: 50px;
  }
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/modern-normalize/1.0.0/modern-normalize.min.css" rel="stylesheet" />