https://github.com/bmuenzenmeyer/eleventy-plugin-inline-link-favicon
Eleventy shortcodes and filters to add an inline favicon image to a link.
https://github.com/bmuenzenmeyer/eleventy-plugin-inline-link-favicon
11ty 11ty-plugin eleventy eleventy-plugin favicon
Last synced: 5 days ago
JSON representation
Eleventy shortcodes and filters to add an inline favicon image to a link.
- Host: GitHub
- URL: https://github.com/bmuenzenmeyer/eleventy-plugin-inline-link-favicon
- Owner: bmuenzenmeyer
- License: mit
- Created: 2023-01-27T03:58:01.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2023-02-25T17:41:27.000Z (over 2 years ago)
- Last Synced: 2025-09-17T03:39:14.623Z (25 days ago)
- Topics: 11ty, 11ty-plugin, eleventy, eleventy-plugin, favicon
- Language: JavaScript
- Homepage: https://eleventy-plugin-inline-link-favicon.netlify.app/
- Size: 1.04 MB
- Stars: 7
- Watchers: 2
- Forks: 0
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# eleventy-plugin-inline-link-favicon
Eleventy shortcodes and filters to add an inline favicon image to a link.
[](https://eleventy-plugin-inline-link-favicon.netlify.app/)
[Live Demo](https://eleventy-plugin-inline-link-favicon.netlify.app/) | [Blog Demo](https://brianmuenzenmeyer.com/hubs/opensource/)
## Install
```bash
npm install eleventy-plugin-inline-link-favicon
```
## Configuration
Add the plugin to your `.eleventy.js` config file:
```js
const pluginInlineLinkFavicon = require("eleventy-plugin-inline-link-favicon")
module.exports = (eleventyConfig) => {
eleventyConfig.addPlugin(pluginInlineLinkFavicon)
}
```
## Usage
This plugin comes with two mechanisms to create an inline link favicon. You can use a [paired shortcode](https://www.11ty.dev/docs/shortcodes/#paired-shortcodes) or a [filter](https://www.11ty.dev/docs/filters/), both referenced as `ai`. `ai` is short for anchor-image.
### Paired Shortcode
~~~~~~~~~~njk
{% ai "https://front-end.social/@brian" %}@brian{% endai %}
~~~~~~~~~~
returns
~~~~~~~~~~html
@brian
~~~~~~~~~~
### Filter
~~~~~~~~~~njk
{{ "https://front-end.social/@brian" | ai("@brian") | safe }}
~~~~~~~~~~
returns the same as above.
### Snippets / Completions
Authoring content with this plugin is aided by user-defined snippets:
- [Visual Studio Code](https://code.visualstudio.com/docs/editor/userdefinedsnippets)
```json
{
"ai": {
"scope": "markdown,nunjucks",
"prefix": "ai",
"body": ["{% ai \"$1\"%}$2{% endai %}$0"],
"description": "add an inline link favicon"
}
}
```
## Credits
- Thanks to [5t3ph/eleventy-plugin-template](https://github.com/5t3ph/eleventy-plugin-template) for inspiration
- Thanks to this [blog by Jim Nielsen](https://blog.jim-nielsen.com/2021/displaying-favicons-for-any-domain/) as inspiration.