.splash-icon {
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
}

@media screen and (orientation: portrait) {
    .splash-icon {
        background-image: url('apple-splash-2048-2732.jpg');
    }
}

@media screen and (orientation: landscape) {
    .splash-icon {
        background-image: url('apple-splash-2732-2048.jpg');
    }
}

@supports not (-webkit-touch-callout: none) {
    .splash-icon {
        background-image: url('manifest-icon-192.png');
        background-size: 146px;
        margin-top: -18px;
    }

    @media screen and (min-width: 512px) {
        .splash-icon {
            background-image: url('manifest-icon-512.png');
            background-size: 450px;
            margin-top: -18px;
            color: red;
        }
    }
}