SVG as Favicon
09. Jan. 2024
Web pages often use a pertinent image or their logo to remain recognizable as a tab in the tab-bar. This image or logo is also called the favicon
(for favorite icon). Especially when the tab-bar is so full that the titles of the individual web pages can no longer be displayed, it is important to use the correct favicon
.
A favicon
is embedded in a web page using the following HTML syntax:
<link rel="icon" type="image/png" href="/images/favicon.png">
The image should be 32x32 pixels in size and a PNG image. Since such a small image can look inferior on modern screens, it is worth using scalable images.
Icon
An SVG image could be specified with the type attribute type="image/svg+xml"
as favicon
. In modern browsers this is no longer necessary, so the syntax is short and concise, and embeds a perfectly scalable image as a favicon
:
<link rel="icon" href="/images/favicon.svg">
Mask Icon
Safari requires a masked icon, i.e. a mask-icon
. This is also an SVG image, but it must have a single color and must be drawn on a transparent background. Safari then adds the color via the color attribute color="#000000"
:
<link rel="mask-icon" href="/images/favicon-mask.svg" color="#000000">
Touch icon
For iOS devices, an image with a size of 180x180 pixels is embedded as an apple-touch-icon
. The size attribute size
is not necessary in the HTML syntax:
<link rel="apple-touch-icon" href="/images/favicon-apple.png">
Unfortunately, no SVG image can be used here. However, the size is already optimized for display on iOS devices.
Manifest
For Android and Google devices, the favicon
is embedded via a file called manifest.json
:
<link rel="manifest" href="manifest.json">
For Chrome on Andriod, a meta tag called theme-color
must also be specified:
<meta name="theme-color" content="#ffffff">
<link rel="manifest" href="manifest.json">
The manifest.json
file then contains the following information:
{
"name": "Starter",
"short_name": "Starter",
"icons": [{
"src": "favicon-google.png",
"sizes": "512x512"
}],
"background_color": "#ffffff",
"theme_color": "#ffffff",
"display": "fullscreen"
}
These specifications are necessary to pass the Lighthouse test.
Dark Mode
In addition to perfect scalability, another advantage of an SVG image is that one can change the display color depending on the browser's mode. This is done using the CSS media query prefers-color-scheme
, which automatically changes the color of the favicon
between light and dark mode. This media query is written as <style>
in the SVG file:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1 1">
<style>
path {
fill: #000;
}
@media (prefers-color-scheme: dark) {
path {
fill: #fff;
}
}
</style>
<path d="M.5 0A.5.5 90 ... 2.5852Z" />
</svg>
Summary
The complete code that should be embedded in the <head>
of the web page to display an optimized favicon
for all devices looks like this:
<meta name="theme-color" content="#ffffff">
<link rel="icon" href="favicon.svg">
<link rel="mask-icon" href="favicon-mask.svg" color="#000000">
<link rel="apple-touch-icon" href="favicon-apple.png">
<link rel="manifest" href="manifest.json">
To continue to support older browsers, one should still save a file called favicon.ico
in the root folder of the website.