Two Powerpuff Girls avatars of the author, overlapped by little code snippets

How I improved my favicon game

and dusted off my Photoshop skills along the way

7 min readFeb 23, 2021

Up until recently I only coded within confined parts of huge monolithic product code. It never occurred to me to look up how favicons are implemented in said legacy code, especially as there weren’t for example any errors in the console thrown.

What changed?

In (finally!) starting out with my own portfolio site, I challenged things I didn’t question before or (to be frank) simply didn’t have much knowledge about yet. I looked outside my daily work bubble and — as it was now about my own site — wanted to understand and do things right.

While looking up other portfolio sites and inspecting them, in some sites I came across 404 errors, complaining about the favicon.ico. This is when I got curious how to properly implement favicons.

Goals

While following Chris Coyier’s “How to Favicon in 2021” and Andrey Sitnik’s “How to Favicon in 2021 — six files that fit most needs” approaches:

to clean up a silly but cute Powerpuff Girls avatar in Photoshop Elements (remove the visible artifacts, recolor, make outline bolder…)
to limit the amount of Photoshop trickery put in (Photoshop Elements doesn’t support .svg and I didn’t want to redraw the whole avatar so I intended to mainly work with quick selections and quick tonal corrections)
to keep the general size of 400x400px (aka, not reducing it)
to have a (subjectively) better quality file with a transparent background to use within my portfolio site (.png)
to have that (subjectively) better quality file (.png) put through a Favicon Generator to generate files and HTML needed for a proper favicons implementation

Starting conditions

Low quality result of one of those silly “create your own avatar” games back in the day

a low quality .jpg of a silly but cute Powerpuff Girls avatar of myself (cut off, 72dpi, 400x400px)
Photoshop Elements 2021 edition (which I juuust bought, so I could test what I still remember from Photoshop CC)
free tools on the Interwebz

A short Photoshop Elements detour

Left: the original low quality jpg — middle: the improved outline — right: the final psd with layers

First, I took the low quality .jpg , cleaned it up from artifacts, thickened the outline, selected all parts and recolored them. As in the .jpg the “standing spot” was cut off, I increased the canvas size and fixed this. The increase resulted in a new file size of 420x420px.

Next up, I reduced the now multi-layer .psd file to a one-layer .psd file, as I wanted to keep the transparency. I took the one-layer .psd file and saved it for web as PNG-24, 420x420px, resulting in 69KB.

Improved transparent Powerpuff Girls avatar — 420x420px png file

Real Favicon Generator

As recommended by Chris Coyier in his article “How to Favicon in 2021”, I went for the Real Favicon Generator to check which files exactly would be generated in my case (kind of files, file sizes, quality, HTML).

To start generating, there’s three options:

check an already existing favicon, implemented in an existing website
demo with a random image
select your favicon image (which is what I selected to feed it my previously photoshopped .png file)

Once the upload button is clicked, it might take a short second to get this nice preview where there’s various possibilities to tweak a favicon.

Various possibilities for various browsers/devices to tweak your favicons

Favicon for Desktop Browsers and Google Result Pages

For my file, I did not change anything.

Favicon for iOS Web Clip

For my file, I changed the background to white.

Favicon for Android Chrome

For my file, I changed the background to white.

Windows Metro

For my file, I changed the background to teal (#00aba9) as this was one of the suggested (Windows) colors (chose your own if you like).

macOS Safari

I turned my file into a monochrome icon and adapted the threshold. In my opinion the preview is not really sufficient to evaluate what you get out of this though. I used the same teal color (#00aba9) I had suggested for Windows Metro (for consistency purposes).

Favicon Generator Options

There’s quite some options to check. For my file, I didn’t change anything and straight away clicked “Generate your Favicons and HTML code”. I immediately copied the then displayed HTML code somewhere safe — to be safe.

Result page of the Real Favicon Generator site

Next I’ve downloaded my package (.zip file). Following were the files included. Very interesting to see which kind of files got generated and also the file sizes.

(Heads-up: the Real Favicon Generator didn’t generate an .android-chrome-512x512.png but instead an .android-chrome-384x384.png. As according to both, Chris and Andrey, you need to reference the 512px version in the .webmanifest I took an extra turn and created the missing file in Photoshop myself.)

Bonus round: png to svg converter

Left: svg output from the Real Favicon Generator — right: svg output from Convertio

The .svg that the Real Favicon Generator returned gave me a bit of “The Fly” vibes so I took my photoshopped .png and fed it to the png to svg converter Convertio just to check if I can have an improvement here. As I liked the outcome better I decided to use it in my favicons.

Bonus round: SVG optimizer

As my mentor always told me:

“Always put your svgs through the svg optimizer SVGO! In 99% of the cases you will reduce the file size along with other optimizations.”

This is what I did. As you can see the file size got reduced from 3.42K to 3.2K.

Home page of the svg optimizer — https://jakearchibald.github.io/svgomg/

So far so good

I ended up having more or less three versions of HTML code to possibly implement into my own HTML.

Chris Coyier’s and Andrey Sitnik’s approach, mentioned their articles:

// HTML
<link rel="icon" href="/favicon.ico"><!-- 32×32 -->
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png"><!-- 180×180 -->
<link rel="manifest" href="/manifest.webmanifest">// manifest.webmanifest
{
  "icons": [
    { "src": "/192.png", "type": "image/png", "sizes": "192x192" },
    { "src": "/512.png", "type": "image/png", "sizes": "512x512" }
  ]
}

Chris Coyier’s approach, implemented in CSS Tricks:

// HTML
<link rel="icon" href="/favicon.ico">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/manifest.webmanifest">// manifest.webmanifest
{
  "name": "CSS-Tricks",
  "icons": [
    { "src": "/icon-192.png", "type": "image/png", "sizes": "192x192" },
    { "src": "/icon-512.png", "type": "image/png", "sizes": "512x512" }
  ]
}

Generated Real Favicon Generator code:

// HTML
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#00aba9">
<meta name="msapplication-TileColor" content="#00aba9">
<meta name="theme-color" content="#ffffff">// manifest.webmanifest
{
    "name": "",
    "short_name": "",
    "icons": [
        {
            "src": "/android-chrome-192x192.png",
            "sizes": "192x192",
            "type": "image/png"
        },
        {
            "src": "/android-chrome-384x384.png",
            "sizes": "384x384",
            "type": "image/png"
        }
    ],
    "theme_color": "#ffffff",
    "background_color": "#ffffff",
    "display": "standalone"
}

I decided to follow the CSS Tricks approach regarding the naming of favicons, minus the “name” property within the .webmanifest.

Finally final code

Those were the final favicon files I used. The ones I’ve picked were dependent on what I decided to have as HTML code and also needed to be referenced in the .webmanifest. I deleted the ones not needed anymore. As recommended by Andrey I didn’t get creative where to put the favicon files in my project and put all of them at root level.

Final HTML code that ended up in my <head>:

// HTML
<head>
    // etc...
    <link rel="icon" href="/favicon.ico">
    <link rel="icon" href="/icon.svg" type="image/svg+xml">
    <link rel="apple-touch-icon" href="/apple-touch-icon.png">
    <link rel="manifest" href="/manifest.webmanifest">
    // etc...
</head>

The .webmanifest I use:

// manifest.webmanifest
{
    "icons": [
    { "src": "/icon-192.png", "type": "image/png", "sizes": "192x192" },
    { "src": "/icon-512.png", "type": "image/png", "sizes": "512x512" }
    ]
}

Conclusion

Goals achieved.

I dusted off my Photoshop skills and created a .png file I used for both — favicon generation and portfolio site
I got a first understanding of how favicons work across browsers/devices — and what is of importance for implementation

Excluding the Photoshop Elements detour, in my opinion the Real Favicon Generator is a great way to quickly generate favicons — even from a .png. Along with Chris’ and Andrey’s approaches, it’s pretty easy to improve your website in including the latest findings on favicons into your websites.