1 minute reading time (298 words)

How to Favicon in 2021

I always appreciate someone looking into and re-evaluating the best practices of something that literally every website needs and has a complex set of requirements. Andrey Sitnik has done that here with favicons.

The final suggestion:

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

It was good timing to do this here on CSS-Tricks, so I tried following the advice to the letter, and it’s working great so far. I think I got fed up at how complex it was at some point that I went ultra-minimalist and only had favicon.ico file. Now I’ve got all of the above in place.

Where I differed…

I don’t have GIMP or Inkscape installed, which can export .ico format, so I used this favicon generator (I fed it my “main” SVG”) just for that one icon.I found Figma helpful for resizing frames and exporting the right sizes.I used ImageOptim for optimizing all the images.I was nervous about adding a “manifest” because I don’t have any other PWA-like steps in place and it feels like an extra web request for little value. But I did it anyway.I have a theme color () because I was told it was a nice touch. Feels related.

I love the dark mode SVG concept:

@media (prefers-color-scheme: dark) { .a { fill: #f0f0f0 } }

But I didn’t do any trickery there as I think my icon looks fine either way without changes:

I also haven’t gotten around to making a special development-only favicon again, but I will because I find it extremely handy.

Direct Link to ArticlePermalink

The post How to Favicon in 2021 appeared first on CSS-Tricks.

You can support CSS-Tricks by being an MVP Supporter.

Original author: Chris Coyier
0
Are You Pulling Your Hair Out?
7 Marketing Mistakes to Avoid when Promoting your ...

Related Posts

Calendar

Wait a minute, while we are rendering the calendar

Latest Blogs

Reward Credit

Login/Register for credits