I was reading an article on creating Favicons on HarpzOn.com, something I had been meaning to do for some time.
Whilst HarpzOn shows where to download a professional icon generator in which you can edit images, I have always preferred to use Favicon From Pics.
The reason I prefer Favicon From Pics is that it takes only a minute to create your icon, and it will animate it for you!
Simply:
- Create a square image in the image editor of your choice
- Visit Favicon From Pics
- Upload your image
- Select the Animate Favicon option (if you want it to scroll)
- Click the “Generate Icon” button
- Then use the download Favicon button.
This will download a Zip file containing your image (and animated gif if you selected this option).
Included in the download is a ReadMe.txt file with the following instructions:
* The favicon
favicon.ico — The favicon file (supports both 16*16 and 32*32 dimensions).
You can add a favicon to your web page by uploading favicon.ico to your
website and inserting the following HTML tag inside the <head> … </head>
section of your web page.<link rel=”shortcut icon” href=”favicon.ico” />
Optional: if you would like to display the animated favicon, upload
animated_favicon1.gif as well and insert the following HTML tags.<link rel=”shortcut icon” href=”favicon.ico” />
<link rel=”icon” href=”animated_favicon1.gif” type=”image/gif” />If you would like to test the favicon after updating your web page, the
Favicon Validator can check the favicon files and tags on your website.http://www.htmlkit.com/go/favicon/validator/
* Other extra files in this package
(The above code was edited by myself after Jon Lee correctly pointed out that the code supplied with the download is not XHTML (but HTML).
- Upload your image or animated gif a location of your choosing.
It is usual to put the favicon in the root folder.
If you protect images from scraping in .htaccess the favicon may not work.
This is one reason why putting in the root folder is a good idea, as you can leave this file accessible, whilst protecting your image sub directories from scraping.
- Open your theme / header.php and insert the snippet of code in an (X)HTML section, between the <head></head> tags (as described above).
- If you want the icon to appear on all pages (not just the front page) you will need to provide the absolute path for the image, like this:
<link rel=”shortcut icon” href=”favicon.ico” />
<link rel=”icon” href=”http://www.sitelogic.co.uk/animated_favicon1.gif” type=”image/gif” />
The only change made above is the insertion of my URL “http://www.sitelogic.co.uk/” before the image name.
If you do not do this, then people reading individual posts will not see the image (as the URL moves to a deeper level when looking at posts, the path for the favicon will be incorrect when using “relative paths”).
If you are not storing the image in the root directory then amend the path for the image as required.
If you are running IE7 or Firefox then you will see the results in my URL and the browser tab like this:
Now, bookmark my site (for testing purposes 
) and you will see this animated bookmark:
And if you cant see any of this because your using IE6 try this:
Nice post! I find that Firefox screws up my icons sometimes - they get mixed up in the bookmarks occasionally. And just a teeny nit picky thing:
The in proper XHTML style
err it stripped my HTML tags in the last comment. the link tags should be closed with a backslash+closing bracket as per proper XHTML format
Thanks for that, I just pasted it as it was… Ill change it, I got a bit distracted as my “recent readers” widget has dissapeared leaving an empty container in my sidebar, I think there may be a problem with my account… If I rip other sites code it works fine…
thanks for the info. i like yours, i think you did a great job with it. one more thing to add to my to-do list this weekend…
Thats ok
thanks for the great article.. I’ve yet to create one, so i think I’ll have to animate it now..
you’re looks good by the way!
Thanks,
Creating these is really easy with this site, have fun
Good Idea… I’ll make one soon
Everyone should do it, it doesnt take long and really adds to your site IMO…
That’s really easy to do.. thanks for sharing.
But I think this Favicon work on other XHTML/HTML too, not JUST WordPress right?
Of course, its (X)HTML, it will work on any site
Cool, I got a request from one of our beta testers to make our gear favicon spin. I had blown it off, but I’m going to try this to see if I can get some quick love.
Sounds fun, don’t think you can do anything but a scroll with that too, but you could use it to shrink your frames for an animated version, or try building the animation in a graphics package and just use the code they give you. Definitely can be done tho
Very useful tip, thank you for it! I have a question, since I’m new to all of this I have a stupid question but I really can’t figure it out….
How to edit HTML in Wordpress blog which is at Wordpress itself, not self hosted?
I can’t find it anywhere on my dashboard…
Please help, it would be greatly appreciated!
Hi Kassper,
I am not sure if you can do it on wordpress hosted sites.
In your admin panel try and go to:
manage / files
then scroll down to “other files”
In the form field you will need to enter the path to header.php, this will be something like
wp-content/themes/your_theme/header.php
If you try and edit your stylesheet you will be given the path for your_theme.
In the header file, after any tags, and before the
Thanks for the quick reply! I guess if I do want to do something that’s worth putting online, it should be a self hosted blog… At least the number of options increase…
Yup self hosting is the way to go, ive seen a couple of blogs moving from blogspot lately and losing their pr etc… always better on your own domain IMO, you can get hosting that installs / supports wordpress if you are not comfortable messing with it….