ohbrooke » favicon tutorial http://ohbrooke.com Sun, 26 Feb 2012 05:37:02 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 Blog Tip: Make Your Own Favicon http://ohbrooke.com/2009/11/10/blog-tip-make-your-own-favicon/ http://ohbrooke.com/2009/11/10/blog-tip-make-your-own-favicon/#comments Tue, 10 Nov 2009 21:23:01 +0000 ohbrooke http://ohbrooke.com/?p=1834 thumb

You know, that little icon in the URL and tabs? This only works if you have somewhere to HOST the image. If you have a blogspot blog, and no hosting server at all, you will unfortunately be unable to play. Make your Favicon Make an image that is 16px x 16px {I use Photoshop to make all my images, but you could crop a logo or existing image you have to these dimensions}. Save it as “favicon.jpg”. You can get an .ico plugin for Photoshop, but it’s easiest to go to  http://favicon-generator.org/, browse to your favicon.jpg file, and download the [...]

]]> You know, that little icon in the URL and tabs?

Picture 6

Picture 7

This only works if you have somewhere to HOST the image. If you have a blogspot blog, and no hosting server at all, you will unfortunately be unable to play.

Make your Favicon

Make an image that is 16px x 16px {I use Photoshop to make all my images, but you could crop a logo or existing image you have to these dimensions}. Save it as “favicon.jpg”. You can get an .ico plugin for Photoshop, but it’s easiest to go to  http://favicon-generator.org/, browse to your favicon.jpg file, and download the generated favicon.ico file.

Upload your Favicon

Drop this “favicon.ico” file in the root directory of your hosting account. It might take a few minutes for your site to read it.

If you have a blogspot blog, and you have this file hosted somewhere else, add this line of code between your <head> tags {be sure to change “path/favicon.ico” to the actual path to the image, in both instances}:

<link rel=”shortcut icon” href=”path/favicon.ico” type=”image/x-icon”>
<link rel=”icon” href=”path/favicon.ico” type=”image/x-icon”>

]]> http://ohbrooke.com/2009/11/10/blog-tip-make-your-own-favicon/feed/ 0