A Bit About Favicons
Sometimes, writing in and of itself can teach a person things. While I knew quite a bit about the practicalities of favicon usage before, I did a significant amount of research into the intricacies, too, hence things like my brand-new favicon just yesterday. This was fun to learn about, and I hope you feel similarly.
In an earlier article, I talked about creating a website calling card of sorts to insert at the top of each HTML document. While not (necessarily) influencing the site’s direct display, these codes will control the way your HTML file is interpreted by the browser and search engines, making it easier to find, navigate, and much more. One aspect of that calling card? The favicon. You know the favicon by now, even if you didn’t already know its name. A favicon is the small, often quirky image that appears next to a website’s title in the tab on your browser (amongst other places).
The favicon for neocities (which hosts Fabled) is a befuddled-looking orange cat. Fabled’s current (as of April 2025) favicon is a pink heart surrounded by leaping flames. Many other small web sites have their own unique favicons, too. Other, larger sites have plenty of recognizable favicons culled from their corporate logos. These will all appear in the browser tab next to the page’s title when you load it. They really are a subtle, yet ubiquitous, part of the World Wide Web.
So, would you like to add a favicon to your site? It’s actually quite easy, even on shared hosting like neocities. I would argue that the hardest part is choosing one that looks fetching despite appearing across different browsers (remember - some people use dark mode). There are tons of options for what kind of favicon should be an emblem for your site.
Some people borrow from freeware pixel art archives. That’s a wonderful way of doing it, especially on neocities, where pixel art thrives, and especially if your site features a lot of pixel art. Any favicon you choose will, of course, be scaled down to the size of that little square just next to the title in the browser window, so keeping it small and quaint to begin with can be advantageous. I personally think the neocities cat looks sad and existential at his usual size, for example, but that’s just me.
The actual coding aspect of it couldn’t be much simpler, really, but first, transmute whatever image you’re using into a proper favicon format.
When I meddle with favicons, I often use a website which, though not perfect and a bit clogged, works as described. RedKetchup’s Favicon Generator does exactly what it promises, a rare treat from an SEO-related site in this day and age. Approach the site with the large copy of whatever image you’re using. At least 250x250 pixels would be best to begin. I know that sounds counter-intuitive, but the site itself will scale it down for you, so yeah. Just take the image and upload it there, and bam, you’ll receive a full .zip file with every permutation of a favicon you could possibly need for accessibility’s sake.
Following that, if you’ve uploaded all the .zip file’s contents directly into your site’s root directory, you can just copy and paste the below code (which also appears on RedKetchup itself) into the <head> portion of each and every page on your site (or at least, all of them that you’d like to have a favicon).
Upload this, and do a few hard reloads of your pages. Soon, you’ll see your new favicon in action. If you like it, keep it, but if not, keep tweaking, and upload new versions until you get to something you do love. Favicons are hard to choose because they tend to look so much different in miniature than one expects! Pixelated trinkets - like the kind you can snag from sozai sites - can work, but keep in mind that even those can lose their intelligibility if you shrink them. Favicons should look intelligible at 16x16 pixels, though they’ll get scaled up to 32x32 for some visitors. If you’re downloading from RedKetchup, you’ll receive an icon version for Apple Touch that’s 180x180 pixels, too. You want your image to work in all versions.
Guess what, though? You can also straight-up use an emoji or some text, though it isn’t as widely-supported as using a .png or other image file. The .svg favicons, to me, are worth it despite not showing up quite in Internet Explorer. They scale very well and are so much easier than mucking with .png or other image formats, and while they can’t display everything you might want as a favicon, if you want an emoji or text as one, that’d be the way to do it.
The below code snippet can stand in for the usual lengthy code invoking .pngs if you’d like to use an emoji. It’s basically embedding an SVG in your page itself, and shoving the emoji in the SVG. I learned it here, even though only part of it isn’t paywalled.
After much trepidation, I eventually decided to do this with the burning heart emoji on this site, and a crescent moon on another I run. Keep in mind that some emojis look different in different browsers and operating systems, though - and some are rare, unique to only certain operating systems.
The “viewBox” designated here is a grid 100x100 units (though not necessary 100x100 pixels, since this will scale). As you can see, there’s a font-size of 90, meaning that the emoji takes up 90 of those units, almost entirely filling the available favicon space on any device. It’s shifted down a bit from the top of the top of the viewBox, too - by 0.9em on Y-axis, as designated right before the font-size.
All of this can be changed if you really want, and if it actually looks better. Favicons usually take more than one try to get it right anyways. Emojis may all be roughly the same size (they are, after all, font-based), but they can look very different and a bit odd aligned the same way. When I was inserting the full moon favicon on my other site, I had to mess with the Y-axis value quite a bit to center it, for example, eventually getting it right at 65px.
I mentioned using text as a favicon, though, didn’t I? Yeah. I don’t do that, myself. While it’s possible using the exact same method as above, it’s a bit trickier. Plus, I just don’t like it. Either way, you can do it, and it might look nice if you’re using a little initial here or there. There’s much more complex tricks you can pull with this, to be sure.
While RedKetchup doesn’t provide tools for creating a text-based .SVG or emoji favicon, this site does give you a way to mess with text for that purpose. I link to that site in particular because it works (mostly) as described without jumping you around into advertisements - rare these days. Granted, I haven’t used it more than experimenting gently, but it seems rather versatile, and the concept itself unleashes a lot of possibilities, admittedly, especially when one brings different (Google!) fonts, shapes, and colors into the equation.
Sigh, yes, I know you can “animate” your favicon. Or, at least, I know there are various ways of approximating that feature. I know and I don’t care. I’m not about to discuss how to do that. I’ve read about it, but haven’t done it to my own site simply because it sounds super-irritating. My site has a marquee in the <title> bar, and, well… that alone is plenty motion. Plus, animating favicons tends to turn out jerky, weird, and jumpy. It also slows things down more than the usual tricks. Not worth it, in my opinion, and most browsers will fight you over it, anyways, in some way, shape, or form...