Favicons – Best practices [closed]

by

Favicon is way more complex than what it sounds. 10 years ago, favicon.ico was the only needed item. Then, there was the touch icon, then multiple touch icons dues to the various iOS devices screen resolutions, then there was the tile icon for Windows…

Some answers here are very comprehensive – and overwhelming (all this, only for a favicon?). Yet, they fail at indicating that the 310×310 tile icon for Windows is recommended to be 558×558. And since they were written a few months ago, they do not mention the recent manifest for Android Chrome M39 or the pinned tab SVG icon for Safari on OS X El Capitan.

Per-platform design is another tough, yet neglected topic. For example, favicon are often transparent. But iOS does not support transparency (for an example of this, compare the SO touch icon and what you get when you add SO to your iPhone’s home screen).

For these reasons, what I consider a best practice for favicon is to not create it manually. Instead, use a tool to automate the whole process and enforce platform guidelines.

I advice you to use RealFaviconGenerator. It generates all pictures and HTML code you need to get the job done:

  • favicon.ico and PNG icons for desktop browsers
  • Apple touch icon for iOS and Android devices
  • Windows 8 tiles
  • Pinned tab icon for Safari on OS X El Capitan

For example, it not only generates the msapplication-TileImage picture and markup but also the more recent browserconfig.xml file supported by IE11. It was also updated a few months ago to support the Android Chrome manifest and Safari OS X El Capitan.

Full disclosure: I’m the author of this site.

More Related Contents:

  1. How do I force a favicon refresh?
  2. How to prevent favicon.ico requests?
  3. favicon.png vs favicon.ico – why should I use PNG instead of ICO?
  4. How to set-up a favicon?
  5. Does a favicon have to be 32×32 or 16×16?
  6. Does a favicon have to be 32×32 or 16×16?
  7. Changing website favicon dynamically
  8. How to add a browser tab icon (favicon) for a website?
  9. Adding a favicon to a static HTML page
  10. Favicon not showing up in Google Chrome [duplicate]
  11. What is currently the best way to get a favicon to display in all browsers that support Favicons? [duplicate]
  12. Creating a favicon [closed]
  13. How to animate a favicon?
  14. What is the best practice for creating a favicon on a web site? [closed]
  15. Do you have to include ?
  16. local (file://) website favicon works in Firefox, not in Chrome or Safari- why?
  17. How to prevent an HTTP request just for a favicon?
  18. HTML Favicon.ico won’t show on Google Chrome
  19. favicon not working in IE
  20. HTML 5 Favicon – Support?
  21. How can I get a favicon to show up in my django app?
  22. Why am I getting error for apple-touch-icon-precomposed.png
  23. Favicon in Shiny
  24. Serving favicon.ico in ASP.NET MVC
  25. favicon not displayed by Firefox
  26. How to clear IE’s favicon cache?
  27. Favicon: .ico or .png / correct tags? [duplicate]
  28. Unable to Change Favicon with Express.js
  29. HTML Title Image
  30. Which versions of IE support PNG favicons?

Leave a Comment