1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
|
Favicons, the little icons you see in the browser toolbar, are an often overlooked element of web design, but they're yet another opportunity to help develop your site's brand. To a certain degree the favicon flies below most visitor's radar, and yet we tend to recognize favicons.
Like other subtle forms of advertising, favicons have a way of creeping into the your consciousness without your consent. Which is exactly why your site needs one -- how often do you get brand recognition in a 16 pixel square?
And as long as we're building favicons, why not trick out your site with a iPhone/iPod Touch icon? True, most people probably won't use it, but the few who do will appreciate the effort.
== Favicons ==
The term favicon is simply a mashup of "favorites icon" since originally they were intended to make your browser bookmarks easier to navigate. Favicons use an obscure, legacy Windows icon resource file format. A .ico file is a 16×16 bitmap that dates back to early versions of Windows.
Today modern browsers like Firefox, Safari, Opera and more recent version of Internet Explorer can handle other image formats like .gif or .png, but for the broadest possible cross-browser compatibility, .ico is still you best option. Thanks to metatags it's not hard to serve multiple favicons though, so the file format is up to you.
It used to be that creating a favicon required Photoshop or the GIMP together with some plug-ins and command line tools. Thankfully that's not the case anymore, there are a multitude of online services that can convert an ordinary image into a favicon.
Most such service use ImageMagick, which comes with many Linux distros. If you're familiar with ImageMagick you can create the file yourself, if not just use an online service like [http://www.favicon.cc/ Favicon.cc].
== Creating Favicons ==
The quality of the image generated by ImageMagick depends on the quality of image you feed into it. For best results start with a lossless format like .png. When you're creating your favicon, keep the graphics simple. Your logo might look clean and simple at full size, but by the time you get it down to a 16 x16 pixels, it may well be a muddled mess.
Try to isolate the dominate element of your brand -- for instance Google's favicon is just a "g," Flickr uses uses simple pink and blue dots and Facebook opts for the ubiquitous "F" on a blue background.
The point is simplify, but feel free to make your initial graphic a bit bigger. I tend to start with a 32x32 pixel image, bearing in mind that the finished product will inevitably lose some detail.
== Using Favicons ==
Once you've got your 16 x 16 pixel image and are happy with the look, upload the file to the root directory of your web server. It's true that modern browsers can find a favicon just about anywhere you put it, but older versions may have trouble. If supporting older browsers isn't a priority feel free to stick the file where evr you want.
Now we just need to ad a metatag to our HTML documents so the browser will know where to find it (note that this isn't always necessary, some browsers look for favicon.ico even if you don't tell them too, which is why you may have noticed error messages in your server logs.
The head tag looks like this:
<pre>
<link rel="shortcut icon" href="http://yoursite.com/favicon.ico" type="image/x-icon">
</pre>
And that's all you need to do. Note that you may need to clear your browser's cache to get the new favicon to show up.
If you'd like to serve a different image format to more modern browsers, say .png, just add this line below the last one:
<pre>
<link rel="icon" href="http://yoursite.com/favicon.png" type="image/x-icon">
</pre>
== iPhone icons ==
As long as we're messing with tiny icons, why not drop in an iPhone icon in case users want to bookmark your page on their iPhone menu? It's just about as easy as creating a favicon and the head tag looks nearly identical.
Apple used to have instructions on their site, but as of this writing [http://developer.apple.com/iphone/devcenter/designingcontent.html the page is gone] (perhaps changes are afoot?). Luckily we have you covered.
Apple recommends using a 57x57 pixel icon, however [http://www.hicksdesign.co.uk/journal/custom-webclip-icon-on-the-iphoneipod-touch curious designers] who've played with the format [http://playgroundblues.com/posts/2008/jan/15/iphone-bookmark-iconage/ discovered] that best results seem to come from 60x60 pixel icons at 72dpi. The iPhone will automatically downscale the image, so the size will still be 57 pixels, but you'll get a little bit sharper image starting with the larger dimensions.
Once you've created your 60x60 pixel iPhone icon, upload it to the root directory on your website, just as we did with the favicon file.
The iPhone may discover your image without you needing to tell it where it is, but just to be on the safe side, add this tag to your HTML documents, somewhere in the <code><head></code> tag:
<pre>
<link rel="apple-touch-icon" href="/whatever.jpg"/>
</pre>
And there you have it all the tiny icons you can eat.
|
