Custom size .ico with CSS

Question

I want to define the size of loaded .ico file with CSS because the default is different in FireFox and Chrome.

HTML code of my link:

<a href="https://www.google.com/maps/place/##keyword##" target="_blank" title="show on map" class="showonmap">##keyword##</a>

and the CSS code for that:

.showonmap {
    background: url("images/gmaps3.ico") no-repeat scroll right center rgba(0, 0, 0, 0);
    padding-right: 20px;
}

http://jsfiddle.net/eapo/yy8gqt3f/1/ (check with different browser to see the problem)

i hope i can solve this without "changing the file type", "using as element"

Answer 1

Use background-size:

.showonmap {
    background: url("https://maps.gstatic.com/favicon3.ico") no-repeat scroll right center rgba(0, 0, 0, 0);
    padding-right: 20px;
    background-size: 15px 15px;
}

Demo: http://jsfiddle.net/yy8gqt3f/2/

---

You can also make the image 100% height, maintaining the original aspect ratio:

background-size: auto 100%;

Demo: http://jsfiddle.net/yy8gqt3f/4/