Saturday, January 23, 2010

How to create a favicon on blogger blog - newest tip.

Previously, i posted on eHow in 2009 and removed on Jan 2010. I make this guide here for everyone blogging on blogger to get a most easy way created your favicon.Read this post "how to check your favicon..." for more.
HOW TO CREATE A FAVICON ON BLOGGER BLOG
( THE EASIEST WAY )

Please note : I quoted this post page translated by Google translate servive, since the original article, author and blogger for the pupil in the country, and for Vietnamese language.
Therefore, the translation may not be entirely good, but still retains the text of the instructions.(exactly with tip & guide )

With my tip is a newest tricks in posts that helping you to create a Favicon for your Blogger blog (blogspot.com)just in five minutes.This way also applies for almost blog platforms and websites.

I would like to remind about the indications of this is very new and has never posted on the internet blogger resource, this tip that can help a Blogger "Newbie" make his blog a Favicon icon right easiest.That out like a Favicon signs under the logo for a blog make blog more professional.

This trick will help you create a Favicon at blog editor, all of which will carry all your daily writing on Blogger.You will not need as much instruction on the former had created Favicon that has been posted on the net such as :
  • Not need any image editor to create a form or Favicon standard format. ICO-file.
  • No need to upload the file icon to any photo source on any other image-hosting storage to get the URL to use as Favicon legacy.
  • No need to wait any link does, Favicon will appear immediately on the Address bar, Favorites right after you add the tip.



Steps to create a Blogger Favicon ( standard now )

Open blogger editor "create new post" as is your writting daily on Blogger, is a blank page and start the upload an image that you want to create a Favicon to your blog.
  • No need to pay attention to size, to have been large or small, in my experience guide you should choose the image is almost perpendicular to make best view. 
  • Get a large image including characters (just get the first letter of your blog title etc...) or the focus of your image says up blog content (eg : blog about dogs adopted from the first dog pictures, photos of deceiving the heart, etc. ...) seen as background but all your choices at will is not limited.
After uploading pictures that appeared on blog posts, this will customize the image again the standard size of a Favicon was 16x16 but in this tip blog with Blogger Favicon best is 32 x32 pixels can be good appearing.
Just click on the bottom corner of the image and push the mouse up or scaled down images to increase image resize only about 32 x32 (maybe a small bit of no greater than the absolute accuracy), based on indicators show-off time you increase the size of the image. (See Figure 1 illustrates.)

How to get the image URL to Link href to Favicon

After uploading and setting the correct image size for Favicon, click the "Save draft" to save this image to draft Blogger.Continuing to get the URL of the image with this link by the code (IMG code) is available for Blogger.

Click the "Edit Html" next to "Compose" to open this page in HTML. The code of the image will be very long ,just look at to http ,there are 2 address url ( http) of the image. See below for get url easy to store-in use for next step.The important as follows (see Figure 2 and 3 )


  • Note the last two lines of text: the text after scr "= http, and will have the number" S200.". Always get the second url to use , this is the number under the first url in this article as " s1600 -h ". (this number can vary depending on uploads ).But remind the important is using the http including the smaller number only.
  • Open your "Notepad" then select to copy from immediately after the "scr =" a copy starting from "http://1.bp.blogspot...to ...jpg" (no need to obtain the pair double parentheses).
  • This procedure allows for easy using with image formats. Jpg or. Png ,gif,bmp ,are without changing anything else.

Link href of the Favicon and how to create a complete link:

Favicon method for creating blog or website is used as the model code Link to the common image formats.Experienced in use was Png (and. Jpg):

On the "Notepad" opened ( previous step ) copy-paste this url to replace the code "url of your icon file" in the LINK HREF .This URL will be used to create complete Blogger Favicon icon in the last step.


REPLACE "URL of your icon file"  by URL taken on image uploaded " http:.....jpg". The URL below is complete for adding on HTML layout page.

Last step paste the complete Link Favicon in place.

After that , copy the complete path of the favicon Link doing on Notepad, now, back to Blogger and select "Layout" then "Edit Template HTML" to open page to edit Template. (Figure 5)
  • Seen from the top down template found about 10 to 15 text lines depending on your template you will see the words : ( figure 4 )

First line is the LINK REF ,the second line is the place to add favicon complete url 
  • Place your cursor immediately after the title and press "Enter" to create a gap in blank, this is the location to paste the complete Favicon Link. 
  • At here you paste the complete Favicon Link at this line and then click "Save Template" at the bottom of the page. 


Immediately after the stored template data is saved in Blogger, choose the blog "View blog" or go to your blog home page you will see your newly created Favicon appear very accurate and not what other Expert-blogs-websites .
Enjoy ! your newly favicon to your blogger blog.

How to check and validated your favicon ? Read the post .



No comments:

Post a Comment