Adding favicon to WordPress
by Leion on Apr.27, 2006, under Howtos
I just found out that icon beside the url at the browser address bar is called a ‘favicon’. Actually I wanted to make one of those icons long ago. I just do not know what is that called. Now I finally know. Ok the steps to make it are really simple. The instructions are for WordPress users but the steps are valid for any website. Just change the pathnames. They are:
- Choose your picture, make sure it is squarish
- Resize it such that is is only 16 by 16 pixels
- Convert to ICO format OR upload that picture to this site and have it converted for you
- Upload the newly made favicon.ico to your /wp-includes/images/ directory or any other prefered directory
- Open up your header.php file, or go to your header section of all your webpages
- Add in the following, anywhere between the <head> and </head> tags: <link rel=”shortcut icon” href=”<?php echo get_settings(‘siteurl’).’/wp-includes/images/’;?>favicon.ico” />
- That’s it!
The website made returned an animated icon as well. To use it just follow the instructions included in the zip file. It is very helpful. Ok I shall list that extra instruction here as well.
- The animated file is called animated_favicon1.gif
- Put the gif file with the favicon as mentioned above
- Add the following in the header.php file as well: <link rel=”icon” href=”<?php echo get_settings(‘siteurl’).’/wp-includes/images/’;?>animated_favicon1.gif” type=”image/gif” />
- Done!
Now, your webpage will show the animated gif while the page is loading. And when the page has done loading, the ico picture will be displayed.
10 Comments for this entry
2 Trackbacks / Pingbacks for this entry
-
KrálÃkárna » Blog Archive » Ikonka ve WordPressu
March 18th, 2007 on 2:16 pm[...] Nainstaloval jsem si zbrusu nový WordPress (2.1.2 – pro úplnost) a zatoužil jsem mÃt v prohlÞeÄi vedle adresy svoji vlastnà ikonku. NásledujÃcà postup jsem sprostÄ› opsal: [...]
-
Blogging Tips | How to create Favicon In Wordpress Blog? | Blogging Tips | Makmal Cyber Best Sharing Medium
July 5th, 2008 on 3:46 pm[...] credit to : blog.leion.net [...]
Leave a Reply
April 27th, 2006 on 2:48 am
soo nice! i lurveee the kat kat favicon dearling =)
October 8th, 2006 on 2:25 pm
Oooo! thankx for a lovely tip
i did it. you can check out my blog it has a blue flower as a favicon. thankx a lot, keep up the good work!
July 5th, 2008 on 1:06 pm
Thanks for the tips.. It so easy.
November 13th, 2008 on 7:00 pm
But wheres the head head tags in wordpress?
March 2nd, 2009 on 1:52 pm
Thank you, worked like a charm
November 1st, 2009 on 2:02 am
Thanks very much. I already apply the ico. but the animated part i’m quite confuse.. still not working.
March 23rd, 2010 on 10:09 pm
To apply favicons and even to generate or apply our gravatar as favicon, there are plugins available, its just a matter of few searches.
I was wondering and I don’t know it yet what it is called for that rectangular part at the beginning of address bar itself. It is much larger than favicon and rectangular in shape like that of paypal site. Do you know what it is called and how to do that?
March 29th, 2010 on 4:15 pm
I am not sure what it is called, but it is a verification for secured connection. Usually you see it for HTTPS connections.
April 24th, 2011 on 11:55 pm
Thanks for this but my favicon isnt showing.
April 25th, 2011 on 12:12 am
LKenneth, You can try using the full path to your favicon.