I've made stuff apparently

Project creation: ember-cli-favicon

aka how to ruin your life by trying to put your favicon in a subdirectory

Related projects:

Mission

So, one of the things I wanted to fix in the semantic.works rework was the lack of a favicon.

Now, you may say

oh simple, convert to an .ico and add a head tag!

But this is not entirely accurate. PWA’s and pinning websites onto your browser ha necessitated multiple favicon definitions as well as files. “apple-touch-*“, “android-chrome-*“, fun fun.

Now, you could use an online generator, but then you have to manually update it if the logo changes.

I don’t want to do that.

ember-cli-favicon

Luckily, ember-cli-favicon exists! A tool that you can point towards an image, and it will automatically convert it into multiple files and add the head tags. A dream.

I implement this, and it works perfectly locally. For those of you familiar with development and/or torment, that sentence structure will send chills down your spine.

Because when hosting it, its served with app-mu-info through the mu-dispatcher (see dispatcher-with-emberjs.ex in the app-mu-info-rework repo). This configuration does not allow assets to be put in root, instead serving them from the assets subdirectory.

This is where it begins.

Configuring ember-cli-favicon

Now, this addon has a path setting. I set it to /assets/, and lo and behold: the html tags now point to /assets/favicon*!

The html tags.

The files are still in root.

Now there don’t seem to be any options in terms of output aside from that. So…

Call me jerry by the way I rig

  1. onSuccess callback function from ember-cli-favicon
  2. Take the resulting html from that callback, write a regular expression to fetch the favicon hrefs
  3. Use those hrefs together with node.js’ fs to move the files

Nope. Didn’t work. Well, it did. If you ran it twice without clearing your build, it would move the previously generated favicons. But ember-cli-favicon’s onSuccess thus seems to call before the files get moved. Bummer.

in-repo-addon

  1. Create an in-repo-addon
  2. Run a function on the postBuild hook
  3. Read the directory, use a filter to check if its a favicon file, if so, move it to assets. See the commit on GitHub here
  4. Everything gets moved back after the addon is done WHY

So, I go to digging

Implement the favicons library

ember-cli-favicon uses the favicons library at its core. So if I just make a replica for myself that writes to the assets subdirectory, I’d be set.

Now, this is a bad idea. Half because duplicate work is wack. Half because it requires a LOT of config and manual writing and I would have to replace & insert into the generated html file and no ew yucky. But, this repo proves at least that you should be able to let your favicon generate elsewhere.

Modify ember-cli-favicon

What if I checked the code and patched the project? Well, it doesn’t seem to handle the writing exactly itself. It turns out its a wrapper around broccoli-favicon!

broccoli-favicon

And lo and behold (to do: don’t use lo and behold twice in one post) a pull request on GitHub by miguelcobain with a patch that allows writing to other folders. Thank you Miguel!

However, this is broccoli-favicon.

Modify ember-cli-favicon for real this time

Install broccoli-favicon from the fork. Clean one-line implementation of the new option. Document the change in README.md. Yes. Install ember-cli-favicon from the fork in semantic.works. And that’s that.

Now open dev.info.mu.semte.ch and watch it in all its glory. Or use it for yourself! You can check it out at github.com/Denperidge-Redpencil/ember-cli-favicon/tree/write-to-path.

Hopefully, the original broccoli-favicon & ember-cli-favicon get patched. But until then, a solution has been found! Yay.

Have a nice day!
- Denperidge (she/they)