I decided to add a cute little favicon to my web page. As with the other HTML aspects I have added to my page it took more than a few tries to get it right. I decided it was time to write another HTML lesson to help you guys out if you've been wanting to add a favicon but didn't know how to. Having a favicon for your blog isn't just cute. It will definetly make your blog stand out among others. A lot of people don't have them and don't know how to put one on their page. This is good for us because our sites will stand out in a list of bookmarked sites. It will also help to keep 404 errors out of your log because the favicon can't be found.

I've found that there is a problem if you are using Blogger though. There is no way to upload files and images in Blogger. To solve this problem you will need to make a free webpage in order to have somewhere to upload your files to. I like to use Bravenet web hosting. I just set up my free website with the same name as my blog. This is very useful because now you can make additional pages to link to from your blog if you ever need them and you can upload images and files that you need but are unable to upload to Bogger. Once you register your new site you do not have to actually set up the webpage since you are only using this new site for storage.

In order to make your favicon the first thing you need to do is get yoursef an image. There are a few different ways to do this. A favicon is a 16x16 image. You can crop a tiny piece of an image using Photobucket or Flickr or you can go to, http://www.favicon.co.uk/gallery.php and save one of the favicons featured on the site. You can also use an image no larger than 150px or a small icon. Another option is to download a free icon maker program from cnet.com. Once you have your image go to http://tools.dynamicdrive.com/favicon/ and upload whatever image you want to use as your favicon. Once you click on "create" you will need to download your image to your computer. It will be saved as a .ico file.

Now you will need to use your new free webpage that you set up. Log into bravehost.com and click on the name of your website located under "free website" in the "Web Hosting Section." Next you will click on, "File Manager." Click on, "Upload File" and find the favicon image that you saved to your computer as a .ico type file. Once the file is uploaded simply copy the url where it is located by right clicking the file name and saving the shortcut.

Here is the HTML code for your favicon:



You will need to insert the URL to your favicon that you just copied into the code above between the two ' ' where it says 'icon file url'

Next you need to put the code into the html of your blog. You need to look around the top of the code in the head section and find where your title is located. It will look something like this:

Insert your favicon code after the code.

After you save your file it may take a few minutes for the favicon code to take effect. That's it - now you have your very own cute, custom little favicon for your blog.

Views: 13

Tags: a, add, blog, blogging, favicon, how, html, make, to

Comment

You need to be a member of Mom Bloggers Club to add comments!

Join Mom Bloggers Club

12/19/14 DAILY BLOG PROMPT

A SPECIAL GREETING FROM FRAN DRESCHER

MOM BLOGGERS FOR SOCIAL GOOD

Mom Bloggers for Social Good is a global coalition of 2000+ mom bloggers who currently span over twenty countries and who care about spreading the good news about the amazing work non-profit organizations and NGOs are doing around the world.  Want to make a difference? Please join us!

Toxic Free Blog - by Brittany Glynn


Brittany is a director of the Toxic Free Foundation and created the first ever Toxic Free Certification Program.  Weekly, Brittany publishes the Toxic Free Blog and provides coaching to over 10,000 families in the United States alone.  She is the author of a Toxic Free educational series and co-author of several Toxic Free learning programs. Brittany is also an award winning author. 

© 2014   Created by Mom Bloggers Club.

Badges  |  Report an Issue  |  Terms of Service