Add a Custom Favicon to Your Site…
Posted on 16. Sep, 2009 by forest_parks in Blogging Tips, Tutorials
This is a pretty short post but I thought it may provide useful for a few of you.
A Favicon is the little image you see appear next to a web address in the browsers navigation bar. Due to modern browser technology it’s possible to add a favicon with a transparent background and in this quick lesson I will show you how.
First off you need to create a square favicon using your favorite graphics program (not paint!!).
I start off with a canvas of 100x100pixels but you have to bear in mind that the image will be shrunk down to a size of only 16×16 to appear in your browser. So keep it simple.
You then downsize the image to 32×32 pixels and save it as a png file to preserve any transparency.
Next up upload it to your server.
Then you simply need to add the following code anywhere between your <head> </head> tags. Most likely this will be in your wordpress header.php file.
[html]
<link rel="icon" href="http://yourwebsite/FILENAME.png" type="image/x-icon" />
<link rel="shortcut icon" href="http://yourwebsite/FILENAME.png" type="image/x-icon" />
[/html]
That’s it! Any problems please just ask and we can work them out.
Related posts:
- You NEED A Custom 404 Error Page, So Lets Make One.
- You Need A Custom Robots.txt, So Lets Make One.
- Fix Your Blog For Internet Explorer!
- Blogging Tools
- $5 A Day Adsense Site: Case Study – Part 1
forest_parks
Big Ben Patton
JK Swopes
Nathaniel
used tires
jewelry supplies
Chetan
book buyback
EmmaB
Hey Forest
Thanks for the post… but is that line of code the same thing I would add at the top of a traditional html page also?
Yep that would work just fine.
Nice info, how about a self hosted blog is it same method, thanks in advance.
Yes the same method for all sites.
I really need to do this! I am so rubbish with graphics programs. Plus I have no idea what kind of image I’d like for a favicon for my site. But I think having a unique image really does help your site to stand out.
Web Career Girl´s last blog ..Creating A New WordPress Template
I struggled too which is why I eventually just settled for some initials…. I may think up something more fancy soon.
Regardless if the favicon is something fancy or not, it still brings attention to the site and helps it stand out. So any favicon is better than none at all. The RBT initials works for now, but something fancier may be a good idea for the near future.
Agreed, thanks for the comment. I will make something better in the future.
This very good article, thanks for sharing, hugs.
Download Grátis´s last blog ..Revista Sexy – Cheerleaders – Setembro 2009
No problem
This very nice info. I wanna implement this. Thanks for sharing it.
internet marketing reviews´s last blog ..Frank Kern’s Mass Control 2.0 Review
No probs, let me know if you need any help.
Nice post Forest and Very Useful
john´s last blog ..Studio Drum Tones With Aaron Harris of ISIS
Hey Forest…
Having a little trouble. I’ve tried posting the code in my header.php code in my WP blog and got nothing.
Does the image have to be a PNG or can it be a JPG?
Maybe thats my problem?
john´s last blog ..Studio Drum Tones With Aaron Harris of ISIS
Thanks again for all your help yesterday.
Got the FAVicon up on all my pages.
john´s last blog ..Studio Drum Tones With Aaron Harris of ISIS
No problem John. Thanks for helping me sort out some issues that i had in the post…. I was sick when I wrote it and messed it up a bit but its all fixed now.
Your site looks great too.
Well just make sure you don’t do an animated one because its annoying and tends to freeze ancient browsers..
Melvin´s last blog ..What I Learned In Wordcamp 09
Ha ha, I will not take that advice lightly!!
Thanks for all the great feedback on this.
How do I unsubscribe from future comments on this thread?
I’m not actually sure… does it give you an unsub link in the email?
The RBT looks alright, but I think it still needs some work. Perhaps something related to the megaphone header would be more suitable. RBT doesn’t really say much.
Thanks, I agree… It’s just temporary until I get time to do something better.
wow, thank you for this one. My blog has no favicon yet and I need this.
No problem, thanks for reading.
Ahh so that is how websites get their own custom logo next to the URL address =D I might have to go ahead and try this on my own personal website, I have a logo ready to go and everything!!!
Till then,
Jean
Great, let me know if you have any issues.
Ok “Teeth Whitening” ALL of your comments are going to be deleted as you keep copying others stuff… I am guessing this is automated crap….
why is it that it’s not working for me?
I think it’s a little disappointing that your favicon only shows up on the homepage and not on your article pages… at least as I’m viewing it here in Firefox 3.5
Just recently, I did manage to create my own favicon for an e-shop I have and I can’t for the life of me understand why I’m so pleased with this!
Edie
TV Spoilers´s last blog ..How I Met Your Mother Spoilers: Season 5 Episode 3: Robin 101: S05E03
I only just noticed that…. Shouldn’t be that way as the code is in the header so need to look into this bug. I think it’s just like that on this site.
Thanks for post. I was wandering how to do this and you just told me how.
Will do tomarrow.
Teen Blogger´s last blog ..Blogger vs WordPress- Who’s The Boss?
No probs, thanks.
Thanks for your guide on how to create favicon. It was really helpful. As already mentioned by TV Spoilers in above comment, favicon only appears in homepage by using this method. I did some research and found this plugin for WordPress – ‘Simple Favicon’. By using this plugin, favicon appears in homepage + all pages.
Winson @ watch free movies´s last blog ..Paranormal Activity
Awesome, thanks for the link. I will definitely take a look.
i was looking to add my favico to my blog
thank you
No problem, thanks for stopping by.
i really dont know how to add favicon to my blog, i will try to implement this tutorial to add favicon to my blog. thanks for this
peter
peter´s last blog ..Destinations For Stag Weekends
Let me know if you have any issues.
favicon brings attention to the site and helps it stand out
oes tsetnoc´s last blog ..Pakistans.com overview by oes tsetnoc
Yep, that’s very true
Bythe way you can create online and free favicons for your website from http://www.favicongenerator.com/
faydaliweb´s last blog ..Css ile opacity değeri
Thanks very much.
Thank you for help
Its great posting .Sex appealing based on what you are wearing & its mainly based on brand and its brand image and USP.Comfort level to branded cloths have the work which leads to high research on fabric & styling.
Hello! I simply want to give an enormous thumbs up for the nice info you’ve got right here on this post. I will be coming back to your weblog for extra soon.
Hi there! I simply wish to give an enormous thumbs up for the nice information you will have right here on this post. I will likely be coming back to your blog for extra soon.
Good day! I simply want to give a huge thumbs up for the good info you’ve got right here on this post. I might be coming back to your blog for extra soon.
Awesome! works like magic, its currently working well on my site using your updated code but it seems to only work in Firefox and not in IE. How wonderful it would be to see an update to this tutorial that also works in IE. In any case, I pass the full credit to you for sharing this. All the best.
Asian Tv´s last blog ..Watch Chhoti Si Zindagi 20th May 2011
I am having problems getting my favicon to show up on my blog. Tried several codes but thinking can’t use image from regular hosting account.
I don’t even know the way I finished up here, but I assumed this submit used to be good. I don’t recognize who you are but certainly you are going to a well-known blogger for those who aren’t already. Cheers!