loading image using img src results in different size in Mozilla/Chrome

题

I am not an UI expert. For one of the requirement to show the reload icon, I downloaded the 128x128 pixel reload icon from the link - https://www.iconfinder.com/icons/28464/recycle_refresh_reload_sync_icon

and used in my html page. Actually this was designed for a catcha page.

<body>
<img src="reload.ico" />
</body>

When opened in Firefox, this was shown as a small image, but when opened in Chrome, it is relatively large. What is the reason behind this?

I agree that after changing the code to ,

<body>
<img src="reload.ico" width="24px" height="24px" />
</body>

both the browsers are showing the same size. But i am interested to know why it was not in the first case.

edit: Actually I accidentally downloaded the 128x128. But then i am surprised to see this difference.

解决方案

The .ico files are only supported for the favicon.

Prefer the .png files for transparent images/icons.

You can see a list of supported formats per browser at Comparison of web browsers on wikipedia

许可以下： CC-BY-SA 和归因