Created
November 17, 2021 02:09
-
-
Save jamescridland/ef01469b1b1d43fdc17a3b2b9f9ab1d6 to your computer and use it in GitHub Desktop.
All you really need for favicons
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This is all you need... | |
<link rel="icon" href="https://podnews.net/static/favicon.ico" sizes="any"> | |
<link rel="icon" href="https://podnews.net/static/favicon.svg" type="image/svg+xml"> | |
<link rel="apple-touch-icon" type="image/png" href="/f/apple-icon.png"/> | |
The top one will only load if your browser doesn't support SVG icons | |
The second one will load if it does (most do) | |
The third is needed for some proprietary Apple nonsense. | |
Here's the Podnews SVG. Note that you can change the fill color if the user has dark mode on! | |
<svg xmlns="http://www.w3.org/2000/svg" viewBox="50 120 250 250"> | |
<style>@media (prefers-color-scheme:dark){path.p{fill:#f13232}}</style> | |
<g transform="matrix(1 0 0 -1 110 411)"> | |
<path fill="#fff" d="M20 114h80v150H20z"/> | |
<path fill="#b01212" d="M50 67a10 10 0 1 0 0-19 10 10 0 0 0 0 19m50 144c0-3-2-5-5-5a5 5 0 0 0-5 5v20c0 3 2 5 5 5s5-2 5-5zm-36 72s-59 3-59-62V114h29v19h-6v88a38 38 0 0 0 36 38h2c15 0 27-8 34-20a9 9 0 0 1-14-8v-20a9 9 0 0 1 14-8 38 38 0 0 0-53-15v-55h-6V99a10 10 0 0 1 9-9c5 0 10 4 10 9v6a7 7 0 0 0 6 7 7 7 0 0 0 7-7V88c0-3 1-5 3-7 2-1 4-3 7-3 5 1 9 5 9 10v17a7 7 0 0 0 7 7c2 0 5-2 6-4a7 7 0 0 0 0-3V57c0-2 1-5 3-6 2-2 4-3 7-3a10 10 0 0 1 9 9v161c0 69-60 65-60 65" class="p"/> | |
</g> | |
</svg> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment