Feed on
Posts
Comments

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

favicongen.png

  • 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:

ffoxicon.png

Now, bookmark my site (for testing purposes ;-) ) and you will see this animated bookmark:

bookmark.png

And if you cant see any of this because your using IE6 try this:

Related Posts

  • Free Web Design Tools
  • Free Do-Follow Links from SpamiPedia
  • MySQL Admin
  • Will Global Translator Increase My Traffic?
  • RSS feed

    17 Comments

    Comment by Jon Lee

    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

    (Comments wont nest below this level)
     
    Comment by Jon Lee

    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 :)

    (Comments wont nest below this level)
     
    Comment by SiteLogic

    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…

    (Comments wont nest below this level)
     
    Comment by msdanielle

    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…

    (Comments wont nest below this level)
    Comment by SiteLogic

    Thats ok :-)

     
     
    Comment by Everyday Weekender

    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!

    (Comments wont nest below this level)
    Comment by SiteLogic

    Thanks,

    Creating these is really easy with this site, have fun :mrgreen:

     
     
    Comment by AskaX

    Good Idea… I’ll make one soon :D

    (Comments wont nest below this level)
    Comment by SiteLogic

    Everyone should do it, it doesnt take long and really adds to your site IMO…

     
     
    Comment by IndoDX

    That’s really easy to do.. thanks for sharing.
    But I think this Favicon work on other XHTML/HTML too, not JUST WordPress right?

    (Comments wont nest below this level)
    Comment by SiteLogic

    Of course, its (X)HTML, it will work on any site

     
     
    Comment by TJ

    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.

    (Comments wont nest below this level)
    Comment by SiteLogic

    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 :wink:

     
     
    Comment by Kassper

    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!

    (Comments wont nest below this level)
    Comment by SiteLogic

    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 tags enter your favicon code.</p> <p>Make sure you take a backup copy of the file before messing with it. If there are no <meta> tags present, just make sure you are outside the php tags, i.e. between ?> and <?php</p> <p>If you cannot access the header.php file you are stuck Im afraid….</meta>

    Comment by Kassper

    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…

    Comment by SiteLogic

    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….

     
     
     
     

    Sorry, the comment form is closed at this time.