Tech Tip for Fashion Bloggers: Stand out from the Crowd!

We love reading fashion blogs so we usually have a bunch of them open in our browsers just like this:



Do you notice that most of the blogs have the default "Orange Blogger" website icon? Do you know that you can easily stand out from the crowd by customizing your own website icon?

If you are using blogspot, here is a quick and easy way to customize your icon.

Step I: Create the icon

1. Choose an image and create an icon with the .ico extension. There are many sites online which provide free service to create icons with the .ico extension. Here is one of them:
   http://tools.dynamicdrive.com/favicon/
   


2. Save the icon with the .ico extension onto your computer.

Step II: Find a Place to Host the Icon

1. Blogspot and other photo hosting services such as flickr do not allow you to upload files of .ico extension. There are 3rd party sites which would host your icon for free. But since your blog is already on google's blogspot, why not host your icon with google sites.
   http://sites.google.com


2. Once you are logged on to Google Sites, click on "Create new site".


3. Select the "Blank Template", provide the "Name" of your site and click "Create Site".


4. Now that you have created a site. Click on "Create page" on the top right.


5. Select "File Cabinet", give it a "Name" and click "Create Page".


6. Click "Add file" and upload the .ico file that you created in Step I.


7. Now click on "View". A new window will open up. Copy the URL of this image.


8. IMPORTANT: Remove the &attredirects=0 at the end or else you will get an error later.

Step III: Tell Blogger where your icon is

1. Log on to Blogspot.com and click on Layout on your dashboard.


2. Click Edit HTML (below the Layout Tab)


3. IMPORTANT: You might want to make a copy of your current template before making any changes in case you need to revert it back to the original one if something goes wrong.


4. Locate the the tag </head>. Notice there is a slash before the word head.


5. Paste the following just before this </head> tag. Remember to replace the URL in Step 8 in Section II in the PUT YOUR ICON URL HERE placeholder. The single quotes are needed.
   
   <link href='PUT YOUR ICON URL HERE' rel='shortcut icon' />
   


6. Click Save Template. You should see your customized icon!