0

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.

spiderman
  • 10,892
  • 12
  • 50
  • 84
  • just do not use the ***.ico*** format.. Prefer the ***.png*** – Gabriele Petrioli Mar 27 '14 at 19:42
  • cool.. Searched more on .ico , and came across the point that "ico is not a standard browser image format". So excpet for favourite icon purpose, on all other places other image formats such as png, jpg are recommended. – spiderman Mar 27 '14 at 19:53
  • exactly.. see http://en.wikipedia.org/wiki/Comparison_of_web_browsers#Image_format_support for supported formats – Gabriele Petrioli Mar 27 '14 at 19:56
  • thank you. One more question. W.r.to this SO question, http://stackoverflow.com/questions/1944280/determine-original-size-of-image-cross-browser it seems , even if we put as jpg/jpeg the browser sometimes resize the actual size [from the chart, Mozilla and Chrome is supported] – spiderman Mar 27 '14 at 20:03
  • Also, can you post your suggestion as answer so that i can mark it as answer. – spiderman Mar 27 '14 at 20:16
  • in regard to jpg files they are supported everywhere. But they do not have transparency so if you need that stick to ***.png***. As far as resizing the browser will never resize an image on its own. But it can be affected by css rules or by applying width/height attributes on the `img` tag. (*but even then only the rendering is affected, not the actual size of the image*) – Gabriele Petrioli Mar 27 '14 at 20:31
  • Worth mentioning that .ico files can contain multiple sizes of the same image. The file in question in fact contains three images: 256x256, 16x16 and 128x128 (according to the mediainfo utility). How browsers decide which version to use to display an `` element, I don't know. – WebSmithery Jun 29 '21 at 10:03

1 Answers1

1

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

Gabriele Petrioli
  • 191,379
  • 34
  • 261
  • 317