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.
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.
<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.
<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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.