Return an optimized avatar image from a domain name input.

Overview

IndieWeb Avatar API

A runtime service to extract avatar images from:

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

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

Usage

URLs have the formats:

/:url/
  • url must be URI encoded.

Deploy your own

Deploy to Netlify

Comments
  • Additional support for Apple’s `precomposed` icon options

    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 by zachleat 1
  • Error: img/XXX.png: unable to open for write

    Error: img/XXX.png: unable to open for write

    Wanting to use this project, I tested to deploy on Netlify by hand or via the quick deployment button available on the readme. Each time the generation does not work CleanShot 2022-08-28 at 14 38 07@2x

    
    Aug 28, 02:35:28 PM: 0fd32e94 INFO   Fetching undefined
    Aug 28, 02:35:28 PM: 0fd32e94 INFO   Error Error: Invalid `url`: undefined
        at new AvatarHtml (/var/task/functions/avatar/avatarHtml.js:12:13)
        at handler (/var/task/functions/avatar/index.js:19:18)
        at Runtime.handler (/var/task/node_modules/@netlify/functions/src/lib/builder.js:34:21)
        at Runtime.handleOnce (file:///var/runtime/index.mjs:548:29)
    Aug 28, 02:35:28 PM: 0fd32e94 Duration: 5.03 ms	Memory Usage: 99 MB	Init Duration: 495.46 ms	Aug 28, 02:35:28 PM: 1b4790ed INFO   Fetching undefined
    Aug 28, 02:35:28 PM: 1b4790ed INFO   Error Error: Invalid `url`: undefined
        at new AvatarHtml (/var/task/functions/avatar/avatarHtml.js:12:13)
        at handler (/var/task/functions/avatar/index.js:19:18)
        at Runtime.handler (/var/task/node_modules/@netlify/functions/src/lib/builder.js:34:21)
        at Runtime.handleOnce (file:///var/runtime/index.mjs:548:29)
    Aug 28, 02:35:28 PM: 1b4790ed Duration: 4.52 ms	Memory Usage: 99 MB	Init Duration: 512.48 ms	Aug 28, 02:35:42 PM: f1b8c3c6 INFO   Fetching favicon.ico
    Aug 28, 02:35:42 PM: f1b8c3c6 INFO   Error Error: Invalid `url`: favicon.ico
        at new AvatarHtml (/var/task/functions/avatar/avatarHtml.js:12:13)
        at handler (/var/task/functions/avatar/index.js:19:18)
        at Runtime.handler (/var/task/node_modules/@netlify/functions/src/lib/builder.js:34:21)
        at Runtime.handleOnce (file:///var/runtime/index.mjs:548:29)
    Aug 28, 02:35:42 PM: f1b8c3c6 Duration: 2.58 ms	Memory Usage: 100 MB	Aug 28, 02:35:47 PM: 737861be INFO   Fetching https://netlify.com
    Aug 28, 02:35:48 PM: 737861be INFO   Fetching: https://netlify.com/v3/static/favicon/apple-touch-icon.png
    Aug 28, 02:35:48 PM: 737861be INFO   Error [Error: img/J9xtjeg7gv-60.png: unable to open for write
    unix error: No such file or directory
    ]
    Aug 28, 02:35:48 PM: 737861be Duration: 896.07 ms	Memory Usage: 116 MB	
    

    Is there any manual configuration to do on the Netlify side? I haven't found anything like that.

    Endpoint: https://cheery-scone-f3ef16.netlify.app Endpoint exemple: https://cheery-scone-f3ef16.netlify.app/https%3A%2F%2Fnetlify.com

    Thanks

    opened by duboiss 0
  • sizes=

    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 by JKC-Codes 0
  • Add data URI favicon support

    Add data URI favicon support

    If your site uses an SVG as its favicon, the leaderboard doesn't display it. You should add support for it. Example entry in the html head: <link rel="icon" type="image/svg+xml" href="data:image/svg+xml,blah">

    enhancement 
    opened by EatonZ 3
  • Option to set a backup image instead of the default 11ty image

    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

    enhancement 
    opened by kuwts 0
  • option to use photo from hcard

    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.

    enhancement 
    opened by npdoty 1
  • Add BIMI Support

    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 by kingkool68 2
use this to replace redux,you can use useActions to change context value and useActions return a mutable function collection

English | 中文 NOTE react-context-mutation is a lighter and more convenient state manager designed for react applications. It aims to replace the Redux

null 19 Feb 22, 2022
Full Application was developed on Next Level Week Return (#8) event by @Rocketseat

Layout • Technologies • Getting started • License ?? Layout You can view the project layout through the link below: Feedback Widget - Figma Rememberin

Elias Gabriel 14 Nov 1, 2022
A desktop app optimized for people to play web-based incremental game

plaza-app A desktop app optimized for people to play web-based incremental game Setup yarn to install dependencies Local testing yarn start to open lo

null 2 Dec 24, 2022
A web application to search all the different countries in the world and get details about them which can include languages, currencies, population, domain e.t.c This application is built with CSS, React, Redux-Toolkit and React-Router.

A web application to search all the different countries in the world and get details about them which can include languages, currencies, population, domain e.t.c This application is built with CSS, React, Redux-Toolkit and React-Router. It also includes a theme switcher from light to dark mode.

Franklin Okolie 4 Jun 5, 2022
Check Your Nearest Vaccination Center And Slots Availability using pincode and district name.

Vaccine Tracker Application - Pan India ?? Website • Playstore made with ♥ for the people of India DevIncept is an 30 day open source program helping

sameer srivastava 67 Nov 3, 2022
This is a Pokemon cards website. There are 800+ pokemon sprites with their name, moves height, weight, and picture

Hi ?? , I'm Rayan Hossain A passionate Full Stack developer with expertise in WordPress ?? I’m currently working on codes_tips ?? I regularly write ar

Rayan Hossain 2 Oct 5, 2022
Edvora App is a web application based on an external API, showing data about different types of products and the user can filter these data by choosing a specific state, city or product name. Build with React.js

Edvora App is a web application based on an external API, showing data about different types of products and the user can filter these data by choosing a specific state, city or product name. Build with React.js

Kyrillos Hany 5 Mar 11, 2022
JAVASCRIPT library recognition of signs input from the smartphone display

Recosigns Demo: https://gaidadei.ru/recosigns/demo/ Documentation: https://gaidadei.ru/recosigns/ Download: https://gaidadei.ru/recosigns/recosigns.zi

null 23 Nov 12, 2022
TV Show App is an application that allows to searh tv shows based on user input. Each tv show is displayed in a Bulma Card component and when clicked, heads you to the official tv show site

TV SHOW APP TV Show App is an application that allows to search tv shows based on user input. Each tv show is displayed in a Bulma* Card component and

HENDEL SAMY 1 Dec 19, 2021
Phonemask - Library for processing the phone input field in the web form. Only native javascript is used

phonemask Library for processing the phone input field in the web form. Only native javascript is used Usage: Adding a library to HTML <script type="a

Neovav 2 Sep 20, 2022
Super tiny color input ranges for React.

react-color-range · Tiny color input for React, made with native input ranges. react-color-range leverages the native input type="range" and CSS linea

Javier Bórquez 3 Jan 16, 2022
📌 A chips input designed for MUI (Material ui) V5

MUI chips input A chips input designed for the React library MUI Installation // with npm npm install mui-chips-input // with yarn yarn add mui-chips

Victor de la Fouchardière 21 Dec 23, 2022
İnstagram Clone.You can sign in, sign up, upload image, make comment 📷 Used ReactJS, Material UI, Firebase, Firestore Database

?? instagram-clone This is a instagram clone. You can sign in, sign up, upload image, make comment ?? ⚡ LIVE To check out the live demo of this app AB

null 22 Apr 20, 2022
Open-source project which generates the Fortnite Item Shop in an image similar to the in-game design.

Fort-Shop Fort-Shop is a unique project which generates the current Fortnite Item Shop into a stylized image, similar to the new In-Game design (refer

im2rnado 25 Jan 5, 2023
Annotation-Wizard - a web-based image annotation platform that allows authors to create annotation tasks and annotators to take tasks and annotate images.

Annotation Wizard Annotation Wizard is a web-based image annotation platform. Functionalies User login and register create your own image annotation t

null 2 Aug 12, 2022
💸 Use case style digital image marketplace like nft. I developed this system by gathering a lot of my frontend/backend knowledge

❗ WARNING This project is just an educational system, NOT a system made to carry out large transactions and with the same focus as nft. I developed th

Gabriel David 53 Aug 30, 2022
JQuery avatar plugin to create colorful text avatar and image avatar.

Gravatar Live Demo Pre Requirement jQuery.js initialization Its very easy to initialize the plug-in Step 1: In HTML <div data-avatar="text" class="ava

Sachin Jain 2 Oct 28, 2022
Seamlessly connect your web server to Rebrandly so that you can re-use your domain name for both your app and your short links

rebrandly-express Seamlessly connect your web server to Rebrandly so that you can re-use your domain name for both your app and your short links Rebra

null 3 Dec 13, 2022
generate a map server side and save/return it as png image

NFT map generator Request a new map to be generated with latitude and longitude params, for example http://localhost:3000/maps?lat=45.3579&lng=9.4427

Mattia Asti 3 Jul 12, 2022
This project is created to store the name of the book and the name of its author, build with JavaScript.

awesome-books A plain javascript project that can keep track of a list of books utilizing localStorage. See live demo Built With HTML CSS Javascript T

Shaqayq Darwazi 3 Jul 19, 2022