Eleventy shortcodes and filters to add an inline favicon image to a link.

Live Demo | Blog Demo

npm install eleventy-plugin-inline-link-favicon

Add the plugin to your .eleventy.js config file:

const pluginInlineLinkFavicon = require("eleventy-plugin-inline-link-favicon")

module.exports = (eleventyConfig) => {
	eleventyConfig.addPlugin(pluginInlineLinkFavicon)
}

This plugin comes with two mechanisms to create an inline link favicon. You can use a paired shortcode or a filter, both referenced as ai. ai is short for anchor-image.

{% ai "https://front-end.social/@brian" %}@brian{% endai %}

returns

<a href="https://front-end.social/@brian"
	><img
		alt="favicon for https://front-end.social/@brian"
		loading="lazy"
		style="max-height: 1em; position: relative; top: 0.2em; margin-right: 0.2em"
		src="https://t1.gstatic.com/faviconV2?client=SOCIAL&type=FAVICON&fallback_opts=TYPE,SIZE,URL&url=https://front-end.social/@brian&size=128"
	/>@brian</a
>

{{ "https://front-end.social/@brian" | ai("@brian") | safe }}

returns the same as above.

Authoring content with this plugin is aided by user-defined snippets:

• Visual Studio Code

  {
  	"ai": {
  		"scope": "markdown,nunjucks",
  		"prefix": "ai",
  		"body": ["{% ai \"$1\"%}$2{% endai %}$0"],
  		"description": "add an inline link favicon"
  	}
  }

• Thanks to 5t3ph/eleventy-plugin-template for inspiration
• Thanks to this blog by Jim Nielsen as inspiration.