Wednesday, February 16, 2011

How to change blog/website Favicon For Dummies

So you now own a blog and wish to change it a little and remove standard favicon that blogger has, this is the orange blogger logo you see at the top of you blog "tab" when you open a new window.

Having a new blog is alot to get used to thats why i make it easy for you, one thing however thats very hard to find is this tutorial, making your blog youor own can take some time, so stick with the program and stay updated. An important part of creating your blog is changing your favicon to make it custom to your liking making it look more authentic...IF YOU DONT HAVE A BLOG BUT WOULD LIKE ONE CLICK HERE

As you can see i have added my iclickmate logo favicon and removed the standard blogger logo, how do we do this? simple, follow the steps below, its takes about 3 mins to complete.

Step 1: create a 20px by 20px square PNG image file of your logo, then go HERE and upload your image and then click generate

Step 2: on the page you are taken to click the download button, see below!!


Step 3: save the file you are downloading, in that file pick this file in the image below, this is the image we will be working with. This file will have an extension .ico


Step 4: go HERE and upload your images for use as a photo server.click choose file then click upload to stack. see below for images!!


Step 5: you now have an online image with a direct link. so copy the direct link PLEASE COPY THE WHOLE DIRECT LINK!!! now save this somewhere for later use in your steps below.


Step 6Log into your Blogger account and select: Dashboard>Layout>Edit HTML.
You will see a window with all the HTML mumble-jumbles you do not understand. Fret not, you only need
to find the code right at the top, that should look like this: NOTE: for a shortcut to find this code just press ctrl+f.....this will let you search for any code in your template.use it in future if you need it.
....................................................................................................................................................................
<head>
<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title>
<b:skin><![CDATA[/*
....................................................................................................................................................................
After the line of code:
<title><data:blog.pageTitle/></title>
on the next line, copy and paste this code below:
<link href='URL of your icon file' rel='shortcut icon' type='image/vnd.microsoft.icon'/>

what you will notice is that in the code above i have "URL of your icon file", this means that you should copy the DIRECT LINK from step 4 and paste it there, look in my picture below, thats my direct link pasted in the same place it should be.



Step 7: save your template and view your blog. your done....how does your blog look? let me know we would love to know.
For more TIPS&TRICKS with blogger click HERE



0 comments:

Post a Comment

 
© 2010 iClickMate
Bloggerized by Wayne Meyer, based on FUNK DESIGN design.