English (change)
If I had a Big Mac for every favicon tutorial out there, I'd be dead. But hey, I needed a favicon, and I figured a video illustrating the process may come in handy for some folks, so here goes.
What is a favicon, and what's it for? I explain that here and in the video, my GuvUtorial, as well as showing how you can make one using Photoshop, else with an online favicon generator. Aah, and the bit that makes people sigh; how to embed the little critter into your website. So, coming up, why's and wherefores, graphics and code... Bet you can't wait!
Ubuntu & Debian, Nginx (beats Apache), MySQL, PHP-FPM, Xcache, WordPress, WP MU, Drupal etccccc
OK, and because they're just cool. But really, it's about easy surfing. These days, we've got tabs on our web browsers. Favicons are an easy visual reference to move from site to site, within the browser. They act as an anchor to the eye. They are a user aid.
Because corporate identity is important. Close your eyes and I know you can visualise immediately the google 'g', and the yahoo 'y'. Not least of all, this is due to favicons.
The easy way is ... not to do it at all. Use an online generator instead. Google 'favicon generator' and you'll be presented with about a zillion links of gen gems, all eager to squeeze your graphic into a tiny shell. And they're great, I know, and I've used them. If you have no gusto for graphics, this is your route. Most even come with instructions for site implementation, so fear not. But of course, my instructions are better, so read on.
With an online gen, you'll need to upload an image to be faviconized, so be ready with that. You may have to grind some graphics for this prep piece. Here are some tips...
Then again, by the time you've cracked out your master graphic for a generator to squeeze, you may as well go the whole hog and resize it yourself. To see how to do that with Photoshop, check out the video. For other graphics programs, er, I don't know because I don't use them; go google. Aah, but Photoshop doesn't have a 'save as favicon' function, you say? Good point.
"Why not just save it as a .png? It's a better format anyway, because it allows for a transparent background, which often looks far more appealing for a favicon."
Yes. All true. But. Remember. Internet Expletive. It doesn't understand .png's. It doesn't understand a whole lot, come to that. But basically, if you want a cross-browser favicon, it needs to have .ico on the end of the filename.
And that's why soft .ico makers tend to cost dosh, and free generators are so popular. And, Photoshop doesn't come with an .ico save option. But if you've got Photoshop, or at least a CS3+ version (I'm not sure about older versions), there's a cracking lil' plugin, and it's free.
It comes with instructions. Mac and PC. Ubuntu can Wine. Sorted.
This is the bit people tend to get nervous about. It's the easiest bit.
Here's the code...
<link rel="shortcut icon" href="http://sitefromheaven.com/favicon.ico" />
(If sitefromheaven.com is available, buy it!)
Pop that line into your <head>, just below the <title>, and ftp the favicon to the root of your site.
Hurrah.
You may have to wait for the cache to crunch, but it will, eventually, and then you'll have a cross-browser favicon, fabulously frivolously ...well, it'll work.
Now watch the video. It took me an hour.
What have I forgotten? Tons probably. Your comments are valued ...
gergin December 17th, 2008 at 12:00 pm
Great info.
vern December 17th, 2008 at 7:00 pm
found you at Technorati. thanks for this video. good luck with the site, guv.
haddiq December 17th, 2008 at 9:00 pm
I searched for a long time and found this post. Thanks a lot
bob December 20th, 2008 at 5:27 am
I found your post comments while searching Google. Very relevant especially as this is not an issue which a lot of peaople are conversant with.
sarahb December 20th, 2008 at 2:00 pm
tx for sharing this. I will share it with my readers....
warewithall December 22nd, 2008 at 12:00 am
Great post. will surely drop by again
satboy December 24th, 2008 at 2:00 am
Any other related posts? Thanks Guv....
maxT December 28th, 2008 at 4:17 am
thanks the_guv...just what I wanted
rvemices January 5th, 2009 at 2:22 pm
Very useful, the code makes sense, but is there a generator you reciommend?
the_guv January 7th, 2009 at 7:01 pm
@ maxT – much ta!
@rvemices. The online gens are improving all the time. Can't say I've use one for yonks, except for this tutorial. I guess they're much the same. Some will give you animated icons, if you prefer. I'd google for recommendations, then produce your favicon with two or three, using the best. Hope that helps.
the_guv January 9th, 2009 at 4:17 am
tx all. appreciate those comments
@satboy. sorry for delay, was away over xmas. there will be a bunch of related posts, for sure. keep checking in.
Piet January 13th, 2009 at 12:08 pm
sitefromheaven.com is actually available, why don't you buy it?
the_guv January 16th, 2009 at 8:18 am
@Piet ... m8, don't get me started about religeon
Jdavies January 21st, 2009 at 11:42 pm
Nice vid. Easier than had thought!
the_guv January 22nd, 2009 at 5:42 pm
@Jdavies – thank you, appreciate that.