Skip to content

Instantly share code, notes, and snippets.

@seyedi

seyedi/darkmode.svg

Last active July 2, 2020 03:38
Show Gist options
  • Save seyedi/df64be52fa2c1644401cecb75789cdf2 to your computer and use it in GitHub Desktop.
Save seyedi/df64be52fa2c1644401cecb75789cdf2 to your computer and use it in GitHub Desktop.
Download ZIP
SVG favicon for modern browsers
Display the source blob
Display the rendered blob
Raw
darkmode.svg
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16">
<style>
path {
fill: #000;
}
@media (prefers-color-scheme: dark) {
path {
fill: #fff;
}
}
</style>
<path fill-rule="evenodd" d="M0 0h16v16H0z"/>
</svg>
Raw
index.html
<head>
<link rel="icon" href="favicon.svg" />
<!-- it has to be made of a single colour and placed on a transparent background -->
<link rel="mask-icon" href="mask-icon.svg" color="#000000" />
<!-- You only need the 180 x 180 size -->
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<meta name="theme-color" content="#ffffff">
<link rel="manifest" href="manifest.json">
</head>
Raw
manifest.json
{
"name": "Starter",
"short_name": "Starter",
"icons": [{
"src": "google-touch-icon.png",
"sizes": "512x512"
}],
"background_color": "#ffffff",
"theme_color": "#ffffff",
"display": "fullscreen"
}
Raw
old-browsers.txt
For old browsers just drop a 32 x 32 favicon.ico at the root of your website.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment