.favicon {
    position: relative !important;
    display: inline-block !important;
    padding-left: 24px !important;
    vertical-align: middle !important;
}
.favicon::before {
    content: "" !important;
    display: inline-block;
    position: absolute !important;
    left: 0 !important;
    top: 50% !important;
    width: 16px !important;
    height: 16px !important;
    background-image: url('/assets/img/favicons-sprite.png') !important;
    background-repeat: no-repeat !important;
    border-radius: 50% !important;
    transform: translateY(-50%) !important;
    background-color: transparent !important;
}
@supports (background-image: url("data:image/webp;base64,UklGRiIAAABXRUJQVlA4TBEAAAAvAAAAAAfQ//73v/+BiOh/AAA=")) {
    .favicon::before {
        background-image: url('/assets/img/favicons-sprite.webp') !important;
    }
}
.favicon-0::before { background-position: 0 0; }
.favicon-1::before { background-position: -16px 0; }
.favicon-2::before { background-position: -32px 0; }
.favicon-3::before { background-position: -48px 0; }
.favicon-4::before { background-position: 0 -16px; }
.favicon-5::before { background-position: -16px -16px; }
.favicon-6::before { background-position: -32px -16px; }
.favicon-7::before { background-position: -48px -16px; }
.favicon-8::before { background-position: 0 -32px; }
.favicon-9::before { background-position: -16px -32px; }
.favicon-10::before { background-position: -32px -32px; }
.favicon-11::before { background-position: -48px -32px; }
.favicon-12::before { background-position: 0 -48px; }
.favicon-13::before { background-position: -16px -48px; }
.favicon-14::before { background-position: -32px -48px; }
.favicon-15::before { background-position: -48px -48px; }
.favicon-16::before { background-position: 0 -64px; }
.favicon-17::before { background-position: -16px -64px; }
.favicon-18::before { background-position: -32px -64px; }
.favicon-19::before { background-position: -48px -64px; }