Home / JavaScript / Image Processing

Return an optimized avatar image from a domain name input.

IndieWeb Avatar API A runtime service to extract avatar images from: <link rel="apple-touch-icon"> <link rel="icon"> favicon.ico (added September 20,
Information
Category: JavaScript / Image Processing
Watchers: 2
Star: 13
Fork: 1
Last update: Sep 21, 2021
Resource links
https://v1.indieweb-avatar.11ty.dev/
https://github.com/11ty/api-indieweb-avatar

IndieWeb Avatar API

A runtime service to extract avatar images from:

  1. <link rel="apple-touch-icon">
  2. <link rel="icon">
  3. favicon.ico (added September 20, 2021)
  4. TODO: <link rel="mask-icon">
  5. TODO: Support Data URIs in attribute values. (e.g. https://joshcrain.io)
  6. TODO (maybe): <link rel="manifest">
  7. TODO (maybe): <meta name="msapplication-config">

Note: <link rel="shortcut icon"> is purposefully not supported per https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types#icon

Usage

URLs have the formats:

/:url/
  • url must be URI encoded.

Deploy your own

Deploy to Netlify

2 Open More issues
Closed

Fixes sizes="any" not being ordered

Fixes #1

opened Sep 20, 2021 by JKC-Codes 2
Closed

Additional support for Apple’s `precomposed` icon options

via https://mathiasbynens.be/notes/touch-icons and @nhoizey

also optionally support root directory lookups for:


    apple-touch-icon-57x57-precomposed.png
    apple-touch-icon-57x57.png
    apple-touch-icon-precomposed.png
    apple-touch-icon.png

though that seems unlikely as additional HTTP requests here are not ideal

enhancement 
opened Sep 21, 2021 by zachleat 1
Closed

Add support for favicon.ico

null

enhancement 
opened Sep 20, 2021 by zachleat 1
Closed

Support `rel="icon" type="image/x-icon"` for .ico

e.g. https://sarah.dev/

enhancement 
opened Sep 22, 2021 by zachleat 0
Closed

sizes="any" not sorted

When declaring a sizes attribute with "any" rather than "1x1" the largest icon isn't returned.

The example below from https://jkc.codes/ returns the 32x32 icon rather than the SVG

<link rel="icon" href="/img/site/icon-site-16x16.png" type="image/png" sizes="16x16">
<link rel="icon" href="/img/site/icon-site-32x32.png" type="image/png" sizes="32x32">
<link rel="icon" href="/img/site/icon-site.svg" type="image/svg+xml" sizes="any">

And if you do this it returns the 16x16 icon (don't ask me why)

<link rel="icon" href="/img/site/icon-site-16x16.png" type="image/png" sizes="16x16">
<link rel="icon" href="/img/site/icon-site.svg" type="image/svg+xml" sizes="any">
<link rel="icon" href="/img/site/icon-site-32x32.png" type="image/png" sizes="32x32">
<link rel="icon" href="/img/site/icon-site.svg" type="image/svg+xml" sizes="any">
opened Sep 20, 2021 by JKC-Codes 0
Open

Option to set a backup image instead of the default 11ty image

I think this would be a useful feature to have, so people could add the own backup images if the Indie Avatar is not found, could potentially be a local image or external

opened Mar 30, 2022 by kuwts 0
Open

option to use photo from hcard

A photo of the user can also be represented via a photo class on a tag within a .vcard entry in the content of the page, as described in hcard 1.0 microformat.

opened Jan 19, 2022 by npdoty 1
Open

Option to configure size of image

Right now the default is 60×60 but it might be nice to have some larger size options.

Similar to :size on https://github.com/11ty/api-screenshot/

enhancement 
opened Sep 22, 2021 by zachleat 0
Open

Add BIMI Support

The BIMI standard is specifically designed for this use case. It's a DNS text record pointing to an SVG avatar. I thought this was a really neat idea and went and added support for it. Later I realized big global corporate email clients will only show BIMI avatars that are verified with a VMC that you have to pay a yearly fee to DigiCert or Entrust for AND you need to have a registered service mark. This effectively limits the technology to big global corporations.

I would love to see this implemented in more indie applications.

See https://www.litmus.com/blog/what-is-bimi-and-why-should-email-marketers-care/

enhancement 
opened Sep 20, 2021 by kingkool68 2

Contents

    eliep An avatar component for vue.js
    akopkesheshyan A universal avatar component for Angular 2+ applications that generates truly unique colored letter avatar based on provided name.
    eliep vue-avatar - An avatar component for vue.js.
    aidewoode vue-letter-avatar - A simple and elegant letter avatar component for vue.js
    fpluquet vue-avatar-editor - Resize, rotate and crop your uploaded avatar using a clear user interface.
    11ty A service that returns an optimized OpenGraph Image from a domain name input.
    DropsOfSerenity Aiming to be a complete solution for avatar cropping in react.
    tobiaslins 💎 Beautiful avatars as a microservice
    trunda avatio-avatar Avatioavatio-avatar - Vue component for illustrated avatars - used by Avatio
    TangoAgency Avatar ImageView with user's name first letter Drawable placeholder
    faridnizam Domain Name Search untuk mencari ketersedian nama domain.
    mosch Small avatar & profile picture component. Resize and crop uploaded images using a intuitive user interface.
    ksz2k Ruby gem for creating letter avatar from user's name (or any other string :-) ).
    grahamhelton Spoofpoint is a domain monitoring tool that allows you to generate domains names one character off of your domain that could have been registered by an attacker attempting to get a domain that looks like yours
    disintegration Letter avatar generation for Go
    superhj1987 After look at several identicon implementation, no one can meet my need,so implement one with java, and the avatar look like the gravatar's
    florent37 Create fluent animations in a kotlin way
    benbalter Create a tiled montage of GitHub Avatar images for use in all hands and other "welcome" or "thank you" slides
    zNiGhTFuRyZNTT Change your discord avatar every min/hour/day based on a list of images
    ElemeFE A image cropper for cropping user avatar, no dependencies.
    felipebhz A tool created with Python to check if a domain's DNS is already pointing to an specific IP address.
    Share this repo

    Related Repos


    Image Processing
    4
    Generate hexagonal profile pictures client-side using HTML5 canvas.
    nathanhleung Hexooor Generate hexagonal profile pictures client-side using HTML5 canvas. This is a Next.js project bootstrapped with create-next-app. Getting Start
     
    Image Processing
    450
    Lightweight, interactive planning tool that visualizes a series of tasks using an HTML can...
    bvaughn Planner Lightweight, interactive planning tool that visualizes a series of tasks using an HTML canvas. Try it yourself at plannerjs.dev Plans created
     
    Image Processing
    1
    Clone of the Fallout hacking mini-game, rendered into a browser canvas.
    goobemaster kodenkel-fo-hacking Clone of the Fallout hacking mini-game, rendered into a browser canvas. You can try it out at: https://www.kodenkel.com/games/fo-h
     
    Image Processing
    18
    Zoom-in Like a Boss, How? Layout-Preserving Zoomer weighing in 🪶
    nyngwang NeoZoom.lua DEMO like_a_boss_demo.mov Intro. Are you still using <C-W>o to maximize a window split and DESTROY THE OTHER ONES under the same tab 😵 ?
     
    Image Processing
    129
    A WebGPU engine.
    dmnsgn A WebGPU engine.
     
    Image Processing
    3
    A minimalistic lightweight semi-automatic PDF gallery with lightbox
    eyaler projector A minimalistic lightweight semi-automatic PDF gallery with lightbox By Eyal Gruss Demo: https://ml4des.com Instructions: Add PDFs to the por
     
    Image Processing
    3.4k
    Graph drawing library for JavaScript
    anvaka VivaGraph VivaGraphJS is designed to be extensible and to support different rendering engines and layout algorithms. Underlying algorithms have been b
     
    Image Processing
    2.8k
    An image effects library for JavaScript using WebGL
    evanw glfx.js Adjust photos in your browser in realtime with glfx.js, an image effects library powered by WebGL. It uses your graphics card for image effect
     
    Image Processing
    2.6k
    bLazy is a lightweight script for lazy loading and multi-serving images, iframes, videos a...
    dinbror #hey, be lazy bLazy is a lightweight script for lazy loading and multi-serving images, iframes, videos and more (less than 1.4KB minified and gzipped)
     
    Image Processing
    2.6k
    Pure React Carousel Component
    FormidableLabs nuka-carousel A Pure ReactJS Carousel Component Install To add nuka-carousel to your project run the following command in your project folder. $ yarn
     
    Image Processing
    2.2k
    Replicating and improving the lightbox module seen on Medium with fluid transitions.
    terrymun Fluidbox If you're using Fluidbox for production, use the latest stable release and not the edge release (latest commit). Replicating and improving th
     
    Image Processing
    5
    Display an image and update it when the file changes
    gelisam image-watcher Display an image and update it when the file changes. $ image-watcher --help Usage: image-watcher FILE Display an image and update it
     
    Image Processing
    4.9k
    [Unmaintained] Minify images seamlessly
    imagemin imagemin Minify images seamlessly Sindre Sorhus' open source work is supported by the community Special thanks to: All your environment variables, in
     
    Image Processing
    14
    Dither pattern sandbox with canvas
    simulacroix dithering makes a cool pixel grid using dithering! it's a browser page: https://simulacroix.github.io/dithering/ why i found a cool dither algorithm s
     
    Image Processing
    7
    A simple module to add effects to your pictures
    hadiazt effects-image.js 🎨 A nice and easy to use module to add effects to your images ⚡️ Available filters blur brightness circle fhisheye flip greyscale in