HTML5, CSS3, and JavaScript Fourth Edition

(Ben Green) #1

CHAPTER 8. IMAGE TRANSPARENCY 86


8.2 Favicon


It is very popular to have a small image that represents your entire website,
or specific pages of that website. The small image is called anicon.


In the old days, what we currently call bookmarks were called favorites. The
icon used to represent the webpage or website was called the favorites icon,
favicon.


Exam Question 141(p.344): What does favicon stand for?
Required Answer:favorite icon


In olden days, icons were created to create a brand identity for groups of
webpages. There were special editors for creating them.


These days almost any image can be used for an icon. I have had success
with .png files. I like that they allow transparency.


8.2.1 By Filename


The original method for displaying such icons was to create a specially for-
matted file calledfavicon.icoand put it in your document root folder.


This method will always work. Nobody would dare break all the websites
that rely on it.


Your mileage may vary. Different browsers may act differently, but more
and more they try to provide the same basic functions so web pages look
and act the same across all major browsers.


Besides puttingfavicon.icoin the document root, it can sometimes also
be placed in any directory of the website. Some browsers will use the favicon
that is “closest” to the webpage that is being viewed. This is not totally
reliable though.


Many browsers are flexible about the exact format of the favicon file, and
will allow it to be a gif or jpg or png or something else. Just rename it to
favicon.ico and things will normally work.


(The browser can internally examine the favicon.ico file to decide what for-
mat it is.)

Free download pdf