Thursday, December 16, 2010

How to Make Your Own Favicon in 5 Easy Steps

A favicon is a "favorites icon," a tiny picture that shows up in the browser's location bar. It's the same picture you'll see when you add a website to your home page.

# 1. Make an itsy bitsy pictureI like to use Apple's Keynote program, which is lickety-split.

# 2. Take a screen shot of itCommand-shift-4

# 3. Then save the screenshot as a "jpg"


# 4. Go to
http://tools.dynamicdrive.com/favicon/
Follow the instructions, and be sure to save your favicon as an "ico"

# 5. Plug the "ico" file into your website's html code


In my website for “Conversations with Other Writers,” in “source mode” it looks like this:


 
   < META NAME="description" CONTENT="Podcasts of C.M. Mayo's conversations with other writers" >
  < LINK HREF="/FAVICONS/conversations-favicon.ico" REL="shortcut icon" TYPE="image/x-icon" />
  < LINK HREF="/FAVICONS/conversationso-favicon.ico" REL="icon" TYPE="image/x-icon" / >
  < LINK REL="apple-touch-icon" HREF="/FAVICONS/conversations-ipadicon.png" />
  < TITLE>C.M. Mayo's Conversations with Other Writers: a series of occasional podcasts -- listen in on podomatic.com or itunes

  C.M. Mayo's Conversations with Other Writers: a series of occasional podcasts -- listen in on podomatic.com or itunes

I've noted in bold where you would substitute the name of the file of your own favicon.


HOW TO MAKE AN IPADICON
An ipadicon is the same thing as a favicon, but for an iPad. Same instructions as above, but instead of making a jpeg, make a .png; no need to go to that website, just upload your .png directly into the html code.


A few of my favicons so far:

For my home page, http://www.cmmayo.com/


Maximilian von Mexikowww.cmmayo.com/maximilian.html



Giant Golden Buddha: Daily 5 Minute Writing Exercise page www.cmmayo.com/d5mwe.html


Madam Mayo Blog
http://madammayo.blogspot.com

Marfa Mondays Project
http://www.cmmayo.com/MARFA-MONDAYS.html

More anon.