Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/wout/lucky_favicon
Add favicons from the Real Favicon Generator to your Lucky project.
https://github.com/wout/lucky_favicon
apple-touch-icon favicon lucky lucky-framework realfavicongenerator safari-pinned-tab-icon webmanifest
Last synced: 2 months ago
JSON representation
Add favicons from the Real Favicon Generator to your Lucky project.
- Host: GitHub
- URL: https://github.com/wout/lucky_favicon
- Owner: wout
- License: mit
- Created: 2021-08-05T13:35:25.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2024-04-19T17:09:17.000Z (9 months ago)
- Last Synced: 2024-05-06T00:05:06.748Z (8 months ago)
- Topics: apple-touch-icon, favicon, lucky, lucky-framework, realfavicongenerator, safari-pinned-tab-icon, webmanifest
- Language: Crystal
- Homepage:
- Size: 60.5 KB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Lucky Favicon
Add favicons from the [Real Favicon Generator](https://realfavicongenerator.net) to your Lucky project.
## Installation
1. Add the dependency to your `shard.yml`:
```yaml
dependencies:
lucky_favicon:
github: wout/lucky_favicon
```
2. Run `shards install`
## Usage
First, head over to the [Real Favicon Generator](https://realfavicongenerator.net), configure your icons and download the package. Unzip the package and place all the files in the public dir of your Lucky project. You can place them in a sub directory but it has some drawbacks, as explained by the Real Favicon Generator:
> When generating a favicon with RealFaviconGenerator, the instructions ask you to place all files at the root of your web site. You may want to place them in a sub-directory, for example in http://mywebsite.com/icons/, just to make things clearer. However, there are three drawbacks with this approach:
>
> - Internet Explorer looks for favicon.ico at the root of the web site. Granted: this is because we ask you to not declare favicon.ico.
> - iOS devices look for files such as apple-touch-icon-144x144.png at the root of the web site, as described by Apple. This issue can be mitigated by declaring the icons in the HTML code (this is necessary for Android anyway), but following Apple conventions is probably the best move.
> - By default, Internet Explorer 11 looks for browserconfig.xml at the root of the web site.
> - Several services, such as Yandex, look for favicon.ico in the root directory.
Then, make sure your require this library in Lucky's shards.cr file:
```crystal
require "lucky_favicon"
```
And include the `LuckyFavicon::Tags` module wherever you want ot use it:
```crystal
class Shared::LayoutHead < BaseComponent
include LuckyFavicon::Tags
...
end
```
Now you'll be able to add your icon set with a single method:
```crystal
head do
favicon_tags app_name: "Lucky App", theme_color: "#00ff99"
end
```
This will render a complete set of favicon-related tags:
```html
```
### Cache key / version number
By default, `"?v=0.1.0"` will be appended to the file paths as a query string. If you update your icons, simply provide a new version number and you're good to go:
```crystal
favicon_tags app_name: "Lucky App", theme_color: "#00ff99", version: "0.2.0"
```
### Custom directory
While it's not advisable to have your icons in a sub directory, sometimes it may not be possible to have them in the root of you public directory. In that case you can provide the name of the directory:
```crystal
favicon_tags app_name: "Lucky App", theme_color: "#00ff99", dir: "/icons"
```
### Individual tags
If you don't want the whole set of meta and link tags, you can use the individual methods, each with custom arguments if required:
```crystal
head do
apple_touch_icon_tag dir: "/somewhere/else"
favicon_icon_tags sizes: %w[24x24 64x64 128x128]
site_webmanifest_tag version: "0.5.3"
safari_pinned_tab_tag theme_color: "#00ff99"
application_name_tags app_name: "My Lucky App"
theme_color_tags theme_color: "#ff0066"
end
```
## Development
Make sure you have [Guardian.cr](https://github.com/f/guardian) installed. Then
run:
```bash
$ guardian
```
This will automatically:
- run ameba for src and spec files
- run the relevant spec for any file in src
- run spec file whenever they are saved
- install shards whenever you save shard.yml
## Documentation
- [API (master)](https://wout.github.io/lucky_favicon)
## Contributing
1. Fork it ()
2. Create your feature branch (`git checkout -b my-new-feature`)
3. Commit your changes (`git commit -am 'Add some feature'`)
4. Push to the branch (`git push origin my-new-feature`)
5. Create a new Pull Request
## Contributors
- [wout](https://github.com/wout) - creator and maintainer