Skip to navigation Skip to main content
11ty Logo Sustainability Fundraising
Eleventy
Eleventy Documentation
Stable
2.0.1
Canary
3.0.0-alpha.10
Toggle Menu
Eleventy 5.81s
Astro 12.52s

IndieWeb Avatar

Contents

Feed this runtime service a URL and it will extract an avatar image using these sources:

  1. <link rel="apple-touch-icon">
  2. <link rel="apple-touch-icon-precomposed">
  3. <link rel="icon">
  4. favicon.ico
  5. favicon.ico that isn’t an .ico file
  6. First <img> in <header>

All rel lookups match against attribute values that are space separated lists.

Open Source Jump to heading

Deploy to Netlify

Usage Jump to heading

Try it out on the Eleventy API Explorer.

Image URLs have the format:

https://v1.indieweb-avatar.11ty.dev/:url/

Samples Jump to heading

IndieWeb Avatar for 11ty.dev/ IndieWeb Avatar for a11yproject.com/ IndieWeb Avatar for netlify.com/
<img
src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fwww.11ty.dev%2F/"
alt="IndieWeb Avatar for 11ty.dev/"
loading="lazy"
decoding="async"
width="50"
height="50"
/>

<img
src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fwww.a11yproject.com%2F/"
alt="IndieWeb Avatar for a11yproject.com/"
loading="lazy"
decoding="async"
width="50"
height="50"
/>

<img
src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fwww.netlify.com%2F/"
alt="IndieWeb Avatar for netlify.com/"
loading="lazy"
decoding="async"
width="50"
height="50"
/>

Other pages in API Services: