Pro Type Favicon Game

The AfterEcon site recently received a minor facelift including a new logo with accompanying favicons. This article walks through advanced, modern favicon configuration. tldr; it’s not just a single file any longer.

Steps:

  1. For the source image, I simply chose to use an interesting font. I searched Google Fonts for an open font that I liked and I took a screenshot.
  2. I cropped the screenshot on my computer, saved it as a png, and converted the background to transparent with this tool.
  3. Now take the png and refer to this article, which will link you to RealFaviconGenerator with instructions.
    1. RealFaviconGenerator takes a variety of images and generates a favicon package.

That’s it!

I took an extra step and re-used the favicon source image as a menu icon as follows:

  1. Invert the black-on-transparent source image into light mode using this tool.
  2. Use the Head, Footer and Post Injections WordPress plugin to inject some custom CSS onto my site, and prepending the home menu button with this custom icon using a ::before CSS selector.

  •  
  •  
  •  
  •  

Leave a Comment