10

Various browsers and devices have their own specifications and standards for the kinds of favicon-like icons they use to represent web pages. This answer on the graphic design site gives a pretty good overview.

Suppose you've gone to the trouble to provide a good number of these icon files with the appropriate declarations in your HTML - but you don't happen to have every device Apple has produced plus a Windows 8 device plus various versions of Android to hand to test them all.

Is there any straightforward way to test your configuration and see what files (if any) various devices and browsers will have, without having all the necessary devices to hand?


Edit to be clear, I mean the icons that browsers hoover up and use when representing a web page in browser features like "most visited", "favourites" or when creating home screen shortcuts, which are declared in a web page's <head> but are not displayed anywhere in the web page <body>.

3 Answers 3

4

I've always used the favicon generator at realfavicongenerator.net, which allows you to see how your chosen artwork will appear on different devices. There are quite a few options and you can try with their example icon to test. Start with a square SVG for the best results as the site will convert it to the necessary formats and give you a compressed folder with everything ready to use.

It's also a free service with no registration or other nonsense required. Just use it and donate if you find it useful.

1
  • I love that site. Best favicon generator I've used. It will generate a Zip with all your image files and generate all the lines of code required for them to work.
    – Avail
    Commented Jul 6, 2016 at 19:15
0

I would suggest trying out device emulation in Google Chrome. It is the easiest way I have seen and it should work. Here is a full article on it, https://developer.chrome.com/devtools/docs/device-mode

2
  • I did try this, but I couldn't figure out how to get it to do something that would then display the touch icon how the browser would e.g. on an empty tab page. Do you know if that's possible? Commented May 18, 2016 at 21:36
  • I don't think there is an easy way to test for that icon. Commented May 19, 2016 at 19:35
-1

Just test these by using Mozilla Firefox , most of the web applications developers are using this method for testing

1
  • This does not answer the question at all. "Just test by using..." the OP is asking how to test. I'd love to see this flushed out such that we could use FF to test how items like the windows-tile-150x150.png represents a site in FireFox, for example.
    – Will Lanni
    Commented Dec 10, 2018 at 22:42

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.