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

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.

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

A Powerpuff Girls avatar of the author
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

Three versions of the Powerpuff Girls avatar: the original low quality jpg, the improved outline and the final psd with layers
Left: the original low quality jpg — middle: the improved outline — right: the final psd with layers
Improved transparent Powerpuff Girls avatar — 420x420px png file
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).

Home page of realfavicongenerator.net
Home page of realfavicongenerator.net
  • 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)
Various possibilities for various browsers/devices to tweak your favicons
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
Result page of the Real Favicon Generator site
Generated final files
Generated final files

Bonus round: png to svg converter

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

Bonus round: SVG optimizer

As my mentor always told me:

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.

// 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" }
]
}
// 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" }
]
}
// 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"
}

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.

Uploaded final files
Uploaded final files
// 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>
// 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

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store