How to create & add a Favicon to your website or Wordpress Blog
First off.. what is a FAVICON?
A Favicon is the little picture that shows up next to the domain name in your web browser.
WD&S Favicon
Beantown Design Favicon
Read on to find out how to create your own Favicon, and add it to your website, or Wordpress Blog.
The first step is to download the Photoshop plugin to save files as the Windows ICO format. I uploaded it here for you to download. Download that, install in Photoshop and you’re good to go.
The reason creating a successful Favicon is tricky is that you are creating a piece of art that is only 16 x 16 pixels.. pretty small right? I speak from experience when I say that some thought needs to go into this process for the end result to look any good. The best technique is to create a larger image first, (say 64 x 64), and then reduce the size to 16 x 16.
save 16x16 px
If the Photoshop plugin is installed correctly, you will be able to choose ISO format when you save the file.
Save that in the main image folder of your website. Then, in the head of your XHTML page, add the following code:
That’s all you need. Although, I needed to use the direct link for the Favicon on this site, most likely because it’s set up in PHP.. so it would look like this:
You can also make animated Favicons.. this does not have full support in all browsers; but then again nothing cool ever does! I’ll cover that in another post. Check out BeantownDesign for an example of an animated Favicon. Here is a tutorial on how to create and add animated favicons to your website or blog.
Here are a couple Favicon Galleries for inspiration thanks to Smashing Magazine:
January 15th, 2009 at 9:29 pm
How do you install the plugin?
January 16th, 2009 at 4:47 am
Move the plugin into the “File Formats” folder inside your Photoshop Plugins folder..
—PHOTOSHOP/PLUGINS/FILE FORMATS—
then you should be good to go!
Let me know if you have any problems.
January 16th, 2009 at 6:42 am
none of the files in the zip are in .8BI format do i h ave to rename it to be .8BI? Also which plugin? The one in the main folder, the one in the MacOS folder or the one in the Resources folder? Thanks for the help.
January 16th, 2009 at 8:30 am
The zip has a file called ICOFormat.plugin
On a mac running OSX and Photoshop cs3.. the folder to put it in is right here.. Applications > Photoshop > Plug-ins > File Formats
Put it in there and it should show up when you go to the save screen.
All the plugins I have installed are .plugin .. none are .8BI .. maybe that’s the extension of older plugins? See if you have the folder I said, and let me know if it works.
January 16th, 2009 at 10:18 am
Oh ok, I have Photoshop CS4 on Windows Vista, so I guess this plugin is only for Macs. Thanks anyway.
January 18th, 2009 at 8:59 am
[...] How to create & add a Favicon to your website or Wordpress Blog … [...]
October 17th, 2009 at 7:05 am
[...] how to add a regular favicon to your post or Wordpress blog, I covered this in a previous post. Check it out here, there is also a link to the Photoshop plugin that you need to create the ico [...]
December 14th, 2009 at 12:59 pm
Great post i like tribal tattoo designs, but thinking of getting some more tattoos on my foot