SVG Favicons and Dark Mode

So I've now started building a new site for a company that I am setting up and I wanted to make sure that the favicon is an SVG.

What is a favicon

A favicon is a small image that sits in the tab of your browser, usually the company logo.

What is an SVG

An SVG is a Scalable Vector Graphic, and more importantly is a text file that uses circles, rectangles, paths, text, etc. This means that the file can be:

• much smaller that a bitmap type image
• Scalable, you can enlarge it without losing definition
• Crisp at any size
• Text inside can be read by screen readers and is selectable

This is great for logos and simple images, although complex images can also be created with SVGs.

What is Dark Mode

Dark mode is a system setting that allows a user to choose whether to have dark text on light background (Light Mode) or light text on dark background (Dark Mode). This setting can be set at multiple levels:

• Operating System
  • MacOS
  • Windows
  • Android
  • iOS
• Application
  • Twitter
  • Instagram
• Website
  • Stuff & Nonsense
  • Chris Burnell

Enabling Dark Mode

This is different for each Operating System:

• Windows 10+
• Android 11+
• iOS 11+
• MacOS Mojave (10.14)

Using Dark Mode on a website

CSS has a media query that checks what color scheme a user prefers @media (prefers-color-scheme: dark) . This allows you to check what the users preference is and load different styles for light or dark.

body {
  background-color: white;
color: black; 
} 
@media (prefers-color-scheme: dark) {
body {
background-color: black;
color: white;
}
}

This says make the background white and text color black, but if the user perfers a dark color scheme make the background black and the text color white.

This media query has good support on all modern browsers and for those that do not support it it will just use the default white background with black text.

Using SVG as a favicon

At the time of writing not all browsers support SVG favicons, although this is still not a reason for not doing it. Again browsers are awesome with HTML and CSS, if it doesn't recognise it, it just moves on so we can add a fallback.

<link rel="icon" type="image/svg+xml" href="./images/favicon.svg">
<link rel="alternate icon" href="./images/favicon.ico">
<link rel="mask-icon" href="./images/favicon.svg">

The first line sets the icon to an SVG.

The second line sets an alternate icon as a ICO for browsers that do not recognise SVGs for favicons.

The third line is for Safari on desktop and iOS as the support SVG favicons is limited to pinned tabs only.

Safari 9+ has support for "pinned tab" SVG icons, but this requires an unofficial rel="mask-icon" to be set and only works for all-black icons on Pinned Tabs. - https://caniuse.com/link-icon-svg

Dark Mode in SVGs

Since we can embed CSS inside <style></style> inside an SVG we can also check inside the SVG if the user prefers-color-scheme: dark; .

Normal SVG

Here we have a normal SVG with the fill set inline:

<svg width="866px" height="866px">
  <title>Company Logo</title>
<desc>Red Circle with forward slash surrounded by pointy brackets</desc>
<circle fill="#D0021B" cx="433" cy="433" r="433"></circle>
<text font-family="Courier New" font-size="200" font-weight="bold" letter-spacing="13.3333333" fill="#FAF9F9">
&lt;/&gt;
</text>
</svg>

In here we are declaring the color of the circle and text inline with fill.

SVG with a style tag

Here we have an SVG with <style></style> tags to declare the fill color:

<svg width="866px" height="866px">
<style>
    circle {fill: #D0021B;}
text {fill: #FAF9F9} 
</style>
  <title>Company Logo</title>
<desc>Red Circle with forward slash surrounded by pointy brackets</desc>
<circle cx="433" cy="433" r="433"></circle>
<text font-family="Courier New" font-size="200" font-weight="bold" letter-spacing="13.3333333">
&lt;/&gt;
</text>
</svg>

In here we are declaring the color of the circle and text in the <style></style> tags.

SVG with a style tag and prefer-color-scheme media query

Here we have a media query within the <style></style> tags of the SVG  to declare the fill color for users who prefer dark color scheme:

<svg width="866px" height="866px">
<style>
    circle {fill: #D0021B;}
text {fill: #FAF9F9} 
@media (prefers-color-scheme: dark) {
      circle {fill: #FAF9F9;}
text {fill: #D0021B;} 
}
</style>
  <title>Company Logo</title>
<desc>Red Circle with forward slash surrounded by pointy brackets</desc>
<circle cx="433" cy="433" r="433"></circle>
<text font-family="Courier New" font-size="200" font-weight="bold" letter-spacing="13.3333333">
&lt;/&gt;
</text>
</svg>

In here we are declaring the color for prefers-color-scheme: dark of the circle and text in the media query.

Examples of SVG Favicons in Light and Dark mode

Light Mode

Dark Mode