If you missed class on Friday, we covered how to add a ‘favicon’ to your site. Look in the address bar of your browser – there should be a small icon before the URL. If you’re viewing this post in a tab in a browser, you’ll see that same icon in the tab, before the page’s title. It’ll even save into your list of bookmarks, if you bookmark the page.
So that image is a favicon. It’s usually 32×32 pixels, but can be shown both larger or smaller. You’ll have to make one for your final project, and put it on ALL of your pages. Here’s how.
Make a new Photoshop document that’s square-shaped, and make it large. My usual size is 600×600.
Create the ‘art’ that goes in your favicon, keeping in mind that when people see it, it’ll be TINY. Be inspired by the existing favicons of other sites, like Amazon, Netflix, Apple: they are extremely simple. No anti-aliasing, no shadows, no gradients, very few colors, no really thin lines (like 1 or 2 pixels wide). The trick is to zoom out of your PS document and see if your content will be legible at such a small size.
OK, after you’re done designing it, save it as a PSD, full-size. You’ll almost certainly decide you need to go back and adjust things because your favicon won’t look good in the small size.
Then go to ‘Image > Image Size,’ and shrink the file to 32×32 (just change one dimension, the other will change automatically). Then choose ‘File > Save for Web,’ save the file as a PNG. Afterwards, when PS asks if you want to save your document, say NO – you already saved it full-size, if you saved now, you’d overwrite the large image with the small one.
In the finder, find your PNG file. Re-name the file ‘favicon.ico’ – when you try to change the file’s extension, you’ll get a warning not to, but go ahead anyways.
Lastly, copy the file into your folder for your final project, and add this line to EACH one of your HTML pages, in the <head> :
<link rel=”shortcut icon” type=”image/x-icon” src=”favicon.ico” />
…and then it should show up.