# Favicons with light/dark mode colour scheme

favicon.svg

<svg width="200" height="200" viewBox="0 0 200 200" fill="none" xmlns="http://www.w3.org/2000/svg">
    <style>
        rect {
            fill: #1968e5;
        }
        path {
            fill: #fff;
        }
        @media (prefers-color-scheme: light) {
            rect {
                fill: #333;
            }
            path {
                fill: #fff;
            }
        }
        @media (prefers-color-scheme: dark) {
            rect {
               fill: #fff;
            }
            path {
                fill: #333;
            }
        }
    </style>
    <rect width="200" height="200" rx="40"/>
    <path d="M70.808 124.464C65.672 124.704 61.352 125.16 57.848 125.832C54.344 126.456 51.536 127.272 49.424 128.28C47.312 129.288 45.8 130.464 44.888 131.808C43.976 133.152 43.52 134.616 43.52 136.2C43.52 139.32 44.432 141.552 46.256 142.896C48.128 144.24 50.552 144.912 53.528 144.912C57.176 144.912 60.32 144.264 62.96 142.968C65.648 141.624 68.264 139.608 70.808 136.92V124.464ZM30.056 92.424C38.552 84.648 48.776 80.76 60.728 80.76C65.048 80.76 68.912 81.48 72.32 82.92C75.728 84.312 78.608 86.28 80.96 88.824C83.312 91.32 85.088 94.32 86.288 97.824C87.536 101.328 88.16 105.168 88.16 109.344V156H80.096C78.416 156 77.12 155.76 76.208 155.28C75.296 154.752 74.576 153.72 74.048 152.184L72.464 146.856C70.592 148.536 68.768 150.024 66.992 151.32C65.216 152.568 63.368 153.624 61.448 154.488C59.528 155.352 57.464 156 55.256 156.432C53.096 156.912 50.696 157.152 48.056 157.152C44.936 157.152 42.056 156.744 39.416 155.928C36.776 155.064 34.496 153.792 32.576 152.112C30.656 150.432 29.168 148.344 28.112 145.848C27.056 143.352 26.528 140.448 26.528 137.136C26.528 135.264 26.84 133.416 27.464 131.592C28.088 129.72 29.096 127.944 30.488 126.264C31.928 124.584 33.776 123 36.032 121.512C38.288 120.024 41.048 118.728 44.312 117.624C47.624 116.52 51.464 115.632 55.832 114.96C60.2 114.24 65.192 113.808 70.808 113.664V109.344C70.808 104.4 69.752 100.752 67.64 98.4C65.528 96 62.48 94.8 58.496 94.8C55.616 94.8 53.216 95.136 51.296 95.808C49.424 96.48 47.768 97.248 46.328 98.112C44.888 98.928 43.568 99.672 42.368 100.344C41.216 101.016 39.92 101.352 38.48 101.352C37.232 101.352 36.176 101.04 35.312 100.416C34.448 99.744 33.752 98.976 33.224 98.112L30.056 92.424ZM122.693 90.048C125.573 87.36 128.741 85.176 132.197 83.496C135.653 81.816 139.709 80.976 144.365 80.976C148.397 80.976 151.973 81.672 155.093 83.064C158.213 84.408 160.805 86.328 162.869 88.824C164.981 91.272 166.565 94.224 167.621 97.68C168.725 101.088 169.277 104.856 169.277 108.984V156H151.493V108.984C151.493 104.472 150.461 100.992 148.397 98.544C146.333 96.048 143.189 94.8 138.965 94.8C135.893 94.8 133.013 95.496 130.325 96.888C127.637 98.28 125.093 100.176 122.693 102.576V156H104.909V49.008H122.693V90.048Z"/>
</svg>

Favicons with light/dark mode colour scheme

Use a style block in the svg which applies colours based on @media (prefers-colour-scheme):

        @media (prefers-color-scheme: light) {
            rect {
                fill: #333;
            }
            path {
                fill: #fff;
            }
        }
        @media (prefers-color-scheme: dark) {
            rect {
               fill: #fff;
            }
            path {
                fill: #333;
            }
        }

Have a look at the source of favicon.svg to see the details.