0

I'm not following all the latest webdev trends so I've a question about what other icons besides favicon.ico a modern website should provide?

My current HTML looks like this:

<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
<link rel="icon"          href="/favicon.ico" type="image/x-icon">

My favicon.ico is 32x32 PNG file.

What other icons should I be providing for my new website? I guess there are icons for Android, OSX, Facebook (when you share your website?) and others.

bodacydo
  • 75,521
  • 93
  • 229
  • 319

1 Answers1

0

Favicons in multiple sizes: 

<link rel="icon" sizes="16x16" href="favicon.png">
<link rel="icon" sizes="32x32" href="favicon-l.png">
<link rel="icon" sizes="64x64" href="favicon-xl.png">

Note: 16x16 and 32x32 are the most common ones; other sizes are unlikely to be used by major browsers.

iOS icons:

<link rel="apple-touch-icon" href="touch-icon-iphone.png">
<link rel="apple-touch-icon" sizes="76x76" href="touch-icon-ipad.png">
<link rel="apple-touch-icon" sizes="120x120" href="touch-icon-iphone-retina.png">
<link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad-retina.png">

Note 1: these are also used by Android.

Note 2: use rel="apple-touch-icon-precomposed" if you don't want iOS to apply the "glass-effect" and just show your image as-is.

Microsoft Windows 8.1 Tiles

<meta name="application-name" content="My Site"/>
<meta name="msapplication-TileColor" content="#000000"/>
<meta name="msapplication-square70x70logo" content="/ms-tiny.png"/>
<meta name="msapplication-square150x150logo" content="/ms-square.png"/>
<meta name="msapplication-wide310x150logo" content="/ms-wide.png"/>
<meta name="msapplication-square310x310logo" content="/ms-large.png"/>

Note: these are also used on Windows phones.

Webpage thumbnail (used by Facebook for example)

<meta property="og:image" content="http://example.com/preview-100x100.png" />

See also this great article.

Community
  • 1
  • 1
Alex Shesterov
  • 26,085
  • 12
  • 82
  • 103
  • Quick follow up question: What sizes should I provide my favicons? You mention 100x100, and 200x200. Who uses which sizes? – bodacydo Aug 20 '15 at 19:17
  • 1
    I've updated the answer; please read the article linked below for a lot of details on sizes, etc. – Alex Shesterov Aug 20 '15 at 19:37
  • Follow up question: Do I've to implement all these images to be really top of the game? – bodacydo Aug 20 '15 at 20:03
  • 1
    It's a subjective question, and it depends on the type of your website. But, my personal opinion — **no, you don't need to implement all these images to be on top.** It is much more important to *provide great content*, and start refining the icons when you have no more important work to do on the content itself. – Alex Shesterov Aug 20 '15 at 20:41
  • 1
    But of course it _may be important_ to implement _some of these,_ if you target a specific audience. E.g. if you target your website mostly at iPhone users, then it's of course important to provide `apple-touch-icon`. – Alex Shesterov Aug 20 '15 at 20:44
  • Thanks as always Alex! – bodacydo Aug 20 '15 at 21:21