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:
- 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.
- I cropped the screenshot on my computer, saved it as a png, and converted the background to transparent with this tool.
- Now take the png and refer to this article, which will link you to RealFaviconGenerator with instructions.
- 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:
- Invert the black-on-transparent source image into light mode using this tool.
- 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.
1