Best IT Recipes

What is currently the best way to get an icon to display in all browsers that support favicons?

Currently the best way to get an icon to display in all browsers that support it?

Please, indicate:

  • What image formats are supported by browsers.

  • What lines are needed in which places for different browsers.

+81
html standards favicon
Aug 31 '08 at 20:20
source share
9 answers

I go for a belt and suspenders.

I am creating a 32x32 icon in .ico and .png formats called favicon.ico and favicon.png . The name of the icon does not really matter if you are not dealing with older browsers.

  • Place favicon.ico in the root directory of your site to support older browsers (optional and applicable only to older browsers.
  • Put favicon.png in a subdirectory of my images (just so that everything is in order).
  • Add the following HTML inside the <head> element.
  <link rel = "icon" href = "/ images / favicon.png" type = "image / png" />
 <link rel = "shortcut icon" href = "/ favicon.ico" />

Note:

  • The MIME type for .ico files was registered as image / vnd.microsoft.icon IANA ,
  • Internet Explorer ignores the type attribute for linking the shortcut icon, and this is the only browser that supports this relationship; it does not need to be provided.

Link

+105
Sep 01 '08 at 0:55
source share
— -

I use the .ico format and put the following two lines in the <head> element:

 <link rel="icon" href="/favicon.ico" type="image/x-icon" /> <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
+10
Aug 31 '08 at 20:46
source share

To also support touch icons for tablets and smartphones, I prefer the HTML5Boilerplate approach

More information on touch signs can be found in this article .

In the current state of browser support, you don’t even need to add an HTML tag for the icon in your document. Browsers will automatically search for a list of files, see this example for iOS:

If no icons are specified in HTML, iOS Safari will search the root directory of sites for icons with the apple-touch icon or the prefix apple-touch-icon-precomposed. For example, if the corresponding Icon Size for the device is 57 × 57 pixels, iOS searches for file names in the following order:

  • apple touch icon-57x57-precomposed.png
  • apple touch icon-57x57.png
  • apple-touch icon-precomposed.png
  • apple-touch icon.png

I can advise you not to include a favicon in the document, but there is a list of files ready on the root website:

  • apple-touch icon-114x114-precomposed.png
  • apple touch icon-144x144-precomposed.png
  • apple touch icon-57x57-precomposed.png
  • apple-touch icon-72x72-precomposed.png
  • apple-touch icon-precomposed.png
  • apple-touch-icon.png (57px*57px)
  • favicon.ico HiDPI (32x32px)

When you download a template from html5boilerplate.com , they are all included, you just need to replace them with your icons.

+6
Mar 21 '13 at 9:28
source share

Wikipedia to the rescue

+5
Aug 31 '08 at 20:26
source share

IE6 cannot correctly handle PNG.

+4
Aug 31 '08 at 23:05
source share

Favicon should be . ico file for proper operation in all browsers.

Modern browsers also support PNG and GIF images.

I found that in general, the easiest way to create this is to use a freely available web service such as favicon.cc .

+3
Aug 31 '08 at 21:15
source share

There is also a website where you can check how the icon of any page was created.

getfavicon.org

There you can see a tutorial on creating icons, image types and resolutions, which is nice!

+3
Jan 30 '09 at 15:45
source share

In most browsers, favicon.* automatically detected in the root directory. You can ensure its detection with:

  <link rel="icon" type="image/png" href="/path/image.png" />

Personally, I use .png images, but most formats should work.

+2
Aug 31 '08 at 20:22
source share

Ideal format for favicon: .ico and ideal size is 16 x 16. You can also create icons in .png format. There are several online services where you can create online icons, for more details read here http://nobletips.com/add-favicon-website/

+1
Oct 27 '13 at 6:32
source share


More articles:


All Articles