HTML5, CSS3, and JavaScript Fourth Edition

(Ben Green) #1

CHAPTER 8. IMAGE TRANSPARENCY 87


8.2.2 By Link


Another method is available. This lets you have a different icon for each
page of your website. You can specify alinktag in the head section of your
html page.



This lets you easily rename the favicon to something else, as in this example.



Although an icon is presumed to be an image, it could actually be a sound
that is played. You should probably avoid that.


8.2.3 Many Sizes


Favicons can come in many sizes so the device can use the one that fits the
best. The favicon.ico format actually supports a collection of images. And
the link rel=icon method supports a sizes= parameter to tell which sizes are
present in the file.


I would not bother having many sizes. Just go for a reasonably sized image,
maybe 160x160, and let the browser resize it as needed.


There are a huge number of devices that use favicons, all the way from
iPhones to big-screen TVs. You may want to create a dozen images or more
of different sizes so the browser can use the one closest to its desired size. If
you want exact control over how your favicon looks on a variety of platforms,
you probably need to create all the common sizes: 16, 32, 48, 57, 72, 76,
114, 120, 144, 150, 152, 310.


Do a Google search on favicon to learn more about it.


8.3 Review of Tags and Attributes


In chapter 4 (page 36) we discussed HTML tags and attributes. Here we
have some review questions for the chapter test.


Some HTML tags require closing tags. Others forbid them. And with some
they are optional. These questions review your knowledge about closing
tags.

Free download pdf