HTML and CSS Reference
In-Depth Information
In setting up the following example (
LinkIcon.html
in this chapter's folder at
www.
wiley.com/go/smashinghtml5
), several
<meta>
tags are used as well. h ey contain
information about the page used by search engines, and although they're always helpful, they
aren't required for setting up the link relation to an icon.
<!
DOCTYPE HTML
>
<
html
>
<
head
>
<
meta name
=
”application-name”
content
=
”HTML5, CSS3”
/>
<
meta name
=
”description”
content
=
”HTML5 Linking icon”
/>
<
meta name
=
”application-url”
content
=
”LinkIcon.html”
/>
<
link rel
=
”icon”
href
=
”LinkAnchor.png”
sizes
=
”32x32”
/>
<
meta http
-
equiv
=
”Content-Type”
content
=
”text/html; charset=UTF-8”
>
<
title
>
Page Icon
</
title
>
</
head
>
<
body
>
Link
icon
</
body
>
</
html
>
In testing the icons with four dif erent browsers (Safari, Chrome, Opera, Firefox), the icons
only showed up on the Opera and Firefox browsers. Internet Explorer (IE) was not tested
because at the time of this writing, Microsot was still developing IE9. Also, none of the
mobile browsers displayed the page icon. Figure 7-3 shows where the icons (a small green
anchor) appear on the Opera and Firefox browsers.
132
Icons in Firefox
Icons in Opera
Figure 7-3: Displaying icons on Firefox and Opera.
In creating an icon, I used a .png i le set to the default 32 x 32 pixels. You can use dif erent
sizes, but the limits are not clear; however, they are set to where the height and width are
the same.
