Skip to main content
CSS-Tricks
  • Articles
  • Alamanac
  • Guides
  • Videos
  • Books
  • Newsletter
Search

Articles Tagged
favicon

14 Articles
{
,

}
Direct link to the article We Analyzed 425,909 Favicons
favicon

We Analyzed 425,909 Favicons

This is a neat idea for a research project. The big map is fun, but the research had some tidbits in it worth looking at.

The average favicon network request takes 130ms, at least from our speedy cloud instance.

…
Avatar of Chris Coyier
Chris Coyier on Nov 29, 2021
Direct link to the article Favicons: How to Make Sure Browsers Only Download the SVG Version
favicon SVG

Favicons: How to Make Sure Browsers Only Download the SVG Version

Šime Vidas DM’d me the other day about this thread from subzey on Twitter. My HTML for favicons was like this:

<!-- Warning! Typo! --<link rel="icon" href="/favicon.ico" size="any"<link rel="icon" href="/favicon.svg" type="image/svg+xml"

The attribute size is a typo there, …

Avatar of Chris Coyier
Chris Coyier on Nov 5, 2021
Direct link to the article SVG Favicons in Action
dark mode favicon

SVG Favicons in Action

Ever heard of favicons made with SVG? If you are a regular reader of CSS-Tricks, you probably have. But does your website actually use one?

The task is more non-trivial than you might think. As we will see in this …

Avatar of Philippe Bernard
Philippe Bernard on Jul 9, 2021
Direct link to the article Dynamic Favicons for WordPress
favicon WordPress

Dynamic Favicons for WordPress

Typically, a single favicon is used across a whole domain. But there are times you wanna step it up with different favicons depending on context. A website might change the favicon to match the content being viewed. Or a site …

Avatar of Thomas Park
Thomas Park on May 28, 2021
Direct link to the article How to Favicon in 2021
favicon

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. …

Avatar of Chris Coyier
Chris Coyier on Feb 10, 2021 (Updated on Sep 20, 2022)
Direct link to the article How to Create a Favicon That Changes Automatically
favicon

How to Create a Favicon That Changes Automatically

I found this Free Favicon Maker the other day. It’s a nice tool to make a favicon (true to its name), but unlike other favicon generators, this one lets you create one from scratch starting with a character or an …

Avatar of Carlo Martinucci
Carlo Martinucci on Dec 9, 2020
Direct link to the article SVG, Favicons, and All the Fun Things We Can Do With Them
dark mode favicon media queries SVG svg icons

SVG, Favicons, and All the Fun Things We Can Do With Them

Favicons are the little icons you see in your browser tab. They help you understand which site is which when you’re scanning through your browser’s bookmarks and open tabs. They’re a neat part of internet history that are capable of …

Avatar of Eric Bailey
Eric Bailey on Apr 24, 2020 (Updated on Feb 8, 2022)
Direct link to the article How To Use an Emoji as a Favicon Easily
favicon SVG

How To Use an Emoji as a Favicon Easily

With just a simple one-liner of code you can use any emoji as a favicon of your website. 😃
Avatar of Chris Coyier
Chris Coyier on Mar 24, 2020 (Updated on Jan 3, 2022)
Direct link to the article Different Favicon for Development
favicon

Different Favicon for Development

I bet a lot of us tend to have the production website and the development website up simultaneously a lot. It’s almost a developer cliché at this point to make some local change, refresh, refresh, refresh, refresh, and just not …

Avatar of Chris Coyier
Chris Coyier on Mar 23, 2020
Direct link to the article Dark Mode Favicons
favicon SVG

Dark Mode Favicons

Oooo! A bonafide trick from Thomas Steiner. Chrome will soon be supporting SVG favicons (e.g. ). And you can embed CSS within an SVG with a

<style> element. That CSS can use a prefers-color-scheme media query, and as a result, …

Avatar of Chris Coyier
Chris Coyier on Dec 3, 2019 (Updated on Nov 2, 2021)
Direct link to the article The Making of an Animated Favicon
canvas favicon loader

The Making of an Animated Favicon

It’s the first thing your eyes look for when you’re switching tabs.

That’s one way of explaining what a favicon is. The tab area is a much more precious screen real-estate than what most assume. If done right, besides being …

Avatar of Preethi
Preethi on Aug 15, 2019
  • 1
  • 2
  • Older

CSS-Tricks is powered by DigitalOcean.

Keep up to date on web dev

with our hand-crafted newsletter

DigitalOcean
  • About DO
  • Cloudways hosting
  • Legal stuff
  • Get free credit!
CSS-Tricks
  • Write for us!
  • Advertise with us
  • Contact us
Social
  • RSS Feeds
  • CodePen
  • Mastodon
  • X
Back to Top