HOW CAN I DO THAT?


Followers

Thursday, July 14, 2011

Adding A Favicon To Your URL

Alrighty then! A bunch of you have asked...and I have shown...how to add a favicon to your blog URL. If you look up at mine on this page, it's a gun and magnifying glass. It goes along with my website http://bonniescalhoun.com, where I am going to integrate this page like the rest of my blogs.

(Update: this is still a valid method for your website, but Blogger has now added the ability to your Page Elements page. At the top left corner of the Page Elements layout, click the edit button on the Favicon element, and upload your image...Viola! If you are using a customized template that doesn't have Page Elements, you may still need this method for your blog!)

LOL...the favicon is that little itty bitty image. They are only 16 pixels by 16 pixels. So when you are creating one use a square image so that it reduces correctly.

First you are going to decide on what image you want, and using your favorite imaging software I's say reduce it to at least 50px X 50px then you will get an idea of how it is going to look small. Take that image and go over here to Dynamic Drive-Favicon Generator and input the image. It will create a favicon for you.

Now if you are uploading it to your website (not blog) just follow the directions on the lower portion of the Dynamic Rive page. (no sense rewriting what they have). If you want to use the favicon on your blog in place of Bloggers Orange B, follow these directions.

Upload the favicon to a blog post, label the post as "Favicon" and save it as a draft. You are doing that to get the image onto the Blogger (Picasa) servers. Now you are going to create the code that you need. Copy this code:

<link href='http://3.bp.blogspot.com/-eO5-qj5k9V0/TfJs66ovG3I/AAAAAAAAD64/OlazI7MKM/s1600/favicon.bmp' rel='icon' type='image/x-icon'/>
<link href='http://3.bp.blogspot.com/-eO5-qj5k9V0/TfJs66ovG3I/AAAAAAAAD64/OlazI7MKM/s1600/favicon.bmp' rel='shortcut icon' type='image/x-icon'/>

The red links are the part that you are going to replace with your own image link from Blogger. It may be an .ico or a .bmp, that's all right. The one thing that you have to watch for when creating this code is that if you create it in Word.com it will add a bunch of funky coding to it, and even "smart quotes" Blogger...nor the rest of the world like smart quotes, so be sure to create the code in NotePad, and check all the quote marks or apostrophes to be sure that they look like the ones I have in the picture :-) Click on the picture and it will open larger so you can see it clearly.

Now we are going to add them to your template code. Click the Design Tab, then the Edit HTML link. It will open up the box of code for your template.

Now right here I must stop you and say, before messing with your template... "BACKUP A COPY" of your template to your computer. Right click on the code box and "select all", then open a NotePad doc (NOT Word.doc) and paste the template into NotePad and save it on your computer where you can find it in case you have a catastrophic failure of your brain connecting with your fingers on the keyboard :-).

Okay...now that we have that out of the way...use Ctrl-F to open a Find box at the bottom of your screen like in the picture to the right. You are going to type </head> into the find box and click "next". It will light up the word just like it does in the image, Then you are going paste in the code you just created.

Now...another important point...Click the PREVIEW button to see the change. If the preview shows the Share buttons at the bottom of the post, then close the preview and click Save Template. As long as it gives you a preview of your blog the favicon will show up in a while if it doesn't immediately. So close the Preview and click Save Template!

If the preview does not open...or the buttons are not there when the preview does open...click DISCARD Edits.

And start again. If you get stuck...email me.

Sig

35 Comments:

  1. Martha said...
    I have always been confident that favicons are totally unnecessary, untill I began helping my sister with her blog. It turned out that this small parts of virtual space bring something brighter to the content and the whole site. Thanks for explaining how to create them)
    Freshcrop said...
    Thanks for a great blog with many interesting posts!
    Toyin O. said...
    Thanks for sharing, very informative.
    Apple Tidings said...
    Very interesting, thank you!
    John said...
    Thanks for a great blog with many interesting posts!
    Unknown said...
    I cant find how to subscribe to the comments via feedburner. I want to keep abrest of this, how do I do that?| Please visit my site : may photocopy | http://www.trungviethung.com
    jeux casino gratuit said...
    Great tips thanks :)
    iwan harie said...
    thanks for the article

    Nusantaraku
    Katy said...
    Hmm...very informative posts, thanks again!
    Carla said...
    Wow, thanks for the tutorial. I really find it hard to navigate blogger on admin panel but done it, anyways because of you. :)

    -------------
    Sterling Silver Rings
    casino virtuel said...
    Thanks for the information!
    Local SEO Tips said...
    This is so impressively done that I’ve bookmarked it for future reference. The guidance provided is incredibly insightful and will be of high value to anyone with interest here. SEO
    devenir riche said...
    Thanks for sharing information!
    IT Consultants said...
    What time saver! Thank you for putting everything relevant to this subject in one place so that I don’t have to surf all over the place to collect it. Having the material presented by an experienced professional is an added plus. Help Desk Support
    roulette said...
    Great billet thanks!
    Debt Counseling said...
    It’s great to read articles written by people that have actually been in the trenches with the subjects that they’re covering. That’s when you get the real thing in terms of detail, background, and knowledge on a topic. For those reasons, reading this was a pleasure. Debt Settlement Help
    Public Relation Company said...
    This article is definitely worth saving to the favorites. I read just about everything on this subject and most of it is a re-hash of the usual data. This material is quite a bit different in that the information is up to date and written by an author that is on the cutting edge of the field. Reputation Management Company
    Loan Modification Laws said...
    This material stands apart from everything else I’ve read on the subject. The treatment will benefit anyone trying understand the topic whether they are new to it or have been around it for years. Loan Modification
    Hygiene UK said...
    I’ve been checking out this blog it’s been really helpful. I was not understanding what I was doing. But your blog helped me a lot. Thank you very much and all the best in future.
    gagner de l'argent sur internet said...
    Very interesting! Thanks!
    simulation credit said...
    Great blog. I like your post! Thanks
    SEO Tools said...
    This is an excellent think piece which should be shared with all that are concerned. It is important all aspects are brought to light so that issue can be understood in its entirety. SEO Services
    jeu de voiture said...
    Thanks for this usefull post!
    sinh quang said...
    Hey this is a great post . Can I use a portion of it on my site ? I would obviously link back to your page so people could view the complete post if they wanted to. Thanks either way.| Please visit my site : du hoc Singapore | http://ahedulinks.com.vn/thongtin-chitiet-4-3105-1220.html
    writting help said...
    Hey mate, thanks for sharing but this page doesnt format correctly in Chrome it is is overlapping.
    blackjack said...
    Thanks for this billet!
    blackjack said...
    Very interesting blog! Thanks!
    loterie en ligne said...
    Thanks for sharing!
    varun said...
    My cousin recommended this blog and she was totally right keep up the fantastic work!



    SEO Services Singapore
    Local SEO said...
    Great stuff, thanks for sharing with us. Local SEO
    Walman Padang said...
    Adding A Favicon To
    Your URL, like it.Thank you so much for providing personal with an extraordinarily nice chance to read from this blog. It is often very great stuffed for me yet. And lastly, I’m also usually impress with all the attractive tricks you provide. Some middle areas in this article are basically the most beneficial I have had. Great deal for me. Admin boomtemplate.com blogger template. Best howcanidothat.blogspot.com
    Marcus said...
    Super helpful - I've always wondered how to do this. Gonna try this out tonight for my personal trading blog. Thanks!
    dell cooling fan said...
    You can't really say what is beautiful about a place, but the image of the place will remain vividly with you.
    dell replacement parts
    Alex Smith said...
    It is important all aspects are brought to light so that issue can be understood in its entirety.
    Santa Clarita Senior Photography
    ebook software said...
    ePageWiz will be considered a program that also converts html pages to be able to a remain-alone EXE publish. This ebook software offers full support of multimedia contents (HTML Pages, Java Scripts, Flash Files, VB Scripts, Graphic Files, Video Files Fashion Sheets, Sound Files and etc). This program also gets a chance to assist password protect your publish from copyright violators and the capability in order to add 'trial limitation' which require users to register in order to have full reach in order to the manuscript.

Post a Comment