Add a Favicon to Your Site and Make it Stand Out from the Rest!
I'll continue with the next in the Promote your Blog! Promote your Site! series in my next post, but for this short entry on MyWebMistakes let's take a break from all that serious internet marketing stuff and have a bit of fun! Come now, if you read through all that heavy technical stuff I wrote in my last post, you deserve it! (And if you haven't yet, make sure you check it out before you leave...you can find it here: Promote your Blog! Promote your Site! Part I -- in fact, even if you've already looked it over, check it out again, as there were a number of broken links that I've since fixed, and I've re-written some sections I felt were unclear and added quite a bit of new information.)
Now, look up at your address bar for a second. See that nifty little stick figure to the right of my blog's URL? Hey, don't laugh -- that's the logo I designed for my coffee shop (and don't even dare suggest my poor drawing skills might have contributed to the fact that I'm now facing total coffee melt down! -- that would be really mean).
Anyway, that's what they call a "Favicon" and you've probably noticed how all the really cool websites (mine included of course!) have one.
Ever wonder how the heck they did it? And how you can get your own and join the ranks of the "cool websites"?
-The Easy Way -
Well, I'm about to let you in on the secret: The easiest way to get yourself one of these little doohickeys is by visiting a website which will do most of the work for you. The one I used originally was MyFavatar. Just register and choose which image you want to have as your Favicon and it will: save the image to its own remote server, resize and convert it to the correct format, and even generate the HTML code for you. Then just paste the code it provides into your blog's template between the <> and < /head> tags.
- The Hard Way -
Well, it's really not that hard, actually. But if you'd like to do this yourself without uploading your image to another website it's really quite simple. Pick the image that you would like to use, or create a new one, and scale the image down to 16x16 pixels. (Most graphics programs will have a "Scale" feature.) For universal compatibility, save the image as a .ico file (although .gif, .jpg, or .png files will work with most browsers except for certain versions of IE). Then create a new post in your blog, name it "Favicon Upload" or something, and click the "Upload Image" button on the toolbar of the Post Editor. From the popup window, click "Browse" to locate your image and then click the "Upload Image button".
When your image is finished loading, save your post as a draft. Then open it again in the Post Editor. Your image should show up in the Compose view, or as HTML code in the "Edit HTML" view. Now right-click the image in the "Compose" view and select Copy Link Location; or, in the "Edit HTML" view, copy the URL that appears after the "href=" tag. This is the location of the image that you will need when adding the Favicon HTML code to your template. Paste the URL you just copied into notepad or someplace so you'll be able to retrieve it later.
Finally, click on your blog's Template tab to display your blog's HTML code. Copy the code you see in the box below and paste it into your Template's HTML code between the <> and < /head> tags. Then replace the "Favicon URL" with the link that you copied from your uploaded image.
All right, that's enough fun for now. I've got to get back to all that dry, techno-babble that will hopefully actually earn us some money one of these days.
So, enjoy your ego-boost for now, and look for the next part of Promote your Blog! Promote your Site! to be published soon.
--e
p.s. leave me a link to your site under comments below, so I can be suitably impressed by your cool new Favicon!
Now, look up at your address bar for a second. See that nifty little stick figure to the right of my blog's URL? Hey, don't laugh -- that's the logo I designed for my coffee shop (and don't even dare suggest my poor drawing skills might have contributed to the fact that I'm now facing total coffee melt down! -- that would be really mean).
Anyway, that's what they call a "Favicon" and you've probably noticed how all the really cool websites (mine included of course!) have one.
Ever wonder how the heck they did it? And how you can get your own and join the ranks of the "cool websites"?
-The Easy Way -
Well, I'm about to let you in on the secret: The easiest way to get yourself one of these little doohickeys is by visiting a website which will do most of the work for you. The one I used originally was MyFavatar. Just register and choose which image you want to have as your Favicon and it will: save the image to its own remote server, resize and convert it to the correct format, and even generate the HTML code for you. Then just paste the code it provides into your blog's template between the <> and < /head> tags.
- The Hard Way -
Well, it's really not that hard, actually. But if you'd like to do this yourself without uploading your image to another website it's really quite simple. Pick the image that you would like to use, or create a new one, and scale the image down to 16x16 pixels. (Most graphics programs will have a "Scale" feature.) For universal compatibility, save the image as a .ico file (although .gif, .jpg, or .png files will work with most browsers except for certain versions of IE). Then create a new post in your blog, name it "Favicon Upload" or something, and click the "Upload Image" button on the toolbar of the Post Editor. From the popup window, click "Browse" to locate your image and then click the "Upload Image button".
When your image is finished loading, save your post as a draft. Then open it again in the Post Editor. Your image should show up in the Compose view, or as HTML code in the "Edit HTML" view. Now right-click the image in the "Compose" view and select Copy Link Location; or, in the "Edit HTML" view, copy the URL that appears after the "href=" tag. This is the location of the image that you will need when adding the Favicon HTML code to your template. Paste the URL you just copied into notepad or someplace so you'll be able to retrieve it later.
Finally, click on your blog's Template tab to display your blog's HTML code. Copy the code you see in the box below and paste it into your Template's HTML code between the <> and < /head> tags. Then replace the "Favicon URL" with the link that you copied from your uploaded image.
< rel="shortcut icon" type="image/x-icon" href="Favicon URL">
All right, that's enough fun for now. I've got to get back to all that dry, techno-babble that will hopefully actually earn us some money one of these days.
So, enjoy your ego-boost for now, and look for the next part of Promote your Blog! Promote your Site! to be published soon.
--e
p.s. leave me a link to your site under comments below, so I can be suitably impressed by your cool new Favicon!
posted by mywebmistakes at 5:34:00 AM *PERMALINK*
2 Comments:
Do not be ridiculous. There is no need to use "MyFavatar" to create a damned "favicon." Simply resizing an image to an acceptable width and height, saving it as .gif, and using [link rel="shortcut icon" type="image/x-icon" href="image source here"] (brackets replaced by the < >)
between the HEAD tags is all that is needed. I just explained the process in a sentence.
Jayel -- thanks for your comment! I've revised this posting to include a way to do it without using myfavatar. of course, you left a few things out of your explanation, but that's okay. i checked out your blog, but everytime i clicked on your link it redirected me to the site www.i_am_an_arrogant_idiot.com. you might want to see about getting that fixed.
all the best,
--e
Post a Comment
<< Home