Make Your Own Icon With Free Transparent Favicon Generator
Have you wondered how to make your own icon for your website? Looking for a free transparent favicon generator? Read on …
What Is A Favicon?
You have probably noticed the tiny logos next to the website titles on the tabs or bookmarks of your browser. If not, look up to the address bar of your browser right now … you should see the URL of this page and beside it is a tiny copy of my photo.
That’s a favicon.
Why Do I Need A Favicon?
If you do not have favicons yet on your sites, you probably should. They are very easy to create and now that more and more sites have them, visitors start to notice if they are missing. So they definitely add to the perceived professionalism of your site and increase your visitors’ trust in your site and in your recommendations (think: more sales).
In fact it is getting towards the point where not having a favicon is going to be as bad for your credibility as having all your text in Times Roman with no layout like some website from 1995.
How To Make Your Own Icon
Honestly, it’s easy!
First you need an image of some kind. You will want something that also appears on your site or matches the main colors of your site to establish brand recognition. The best is to have a professionally designed logo of course but we cannot all afford that for all of our sites.
So you could take something from the header graphic of your site as I have done for the favicon at Flamillion PLR Articles or use an illustration from your site or clipart or anything you have rights to that will serve you as a logo. Something simple is best, like the butterflies at Flamillion PLR. It’s more visible that way.
Your image should be square. Save it as a .gif or .png file if you can, otherwise .jpg.
Generating The Favicon
If you have a recent version of Photoshop, you can simply choose to save your image as a Windows Icon .ico file. Resize it to 16×16 pixels.
If you don’t have Photoshop, go to the favicon generator here:
http://tools.dynamicdrive.com/favicon/
The instructions are there – you just click on ‘Browse’ to locate where you saved the image on your computer, then click ‘Create Icon’. Click on ‘Download FavIcon’ and save the generated image to your computer. By default it will be called favicon.ico.
Uploading The Favicon
Now upload your favicon.ico file to the ROOT directory of your website. This is normally called public_html. (Do NOT put it in your /images folder.)
Often, simply uploading the file is enough. If not, to make the favicon show, add this code to your index page somewhere between the <head> and </head> tags:
<link rel="shortcut icon" href="favicon.ico">
Of course if you used a different name for the icon image when you saved it, you will need to change “favicon.ico” to the name that you chose.
Note: In most cases you will need to open a new browser window and/or clear your cache before you will see the icon. Sometimes it even takes a few days.
Making A Transparent Favicon
If your favicon came out with a white background and you don’t like it that way, here’s what you need to do.
1. You need to start out with a transparent background to your image. E.g. open a new blank image with a transparent background in your graphics package. Copy your design into it and use the eraser tool to rub out all of the white or other background color.
2. Your image must be saved as either .gif or .png (NOT .jpg). Look for a Transparency option while you are saving, and make sure it is checked.
3. If this does not work, you probably did not have transparency turned on and you will need to find how to do that in your graphics package. If you have Photoshop or Elements, click on File and choose Save For Web, then choose GIF and make sure that Transparency is checked.
Make Your Own Icon For WordPress Blogs
If your site is a WordPress blog, just upload favicon.ico into your root directory (usually public_html). For my blog this was enough and I did not need to add the <link ...> code given above.
However this may depend on your version of WordPress or your theme. If your favicon still does not appear after you have cleared your cache, you can add the <link ...> code into the file that has the <head> and </head> tags within the theme that you are using.
In Cpanel or FTP, navigate to /wp-content/themes and choose the theme that your site is displaying (or you can do this in the theme editor in WordPress if you have permissions set for it). The <head> tags are usually found in the file called header.php.
More Posts
Filed under: Free Internet Marketing Tool, Website Tools
Rosie:
Thanks for this very helpful article. I will be trying this out today.
Hi Rosie,
Perfect timing! I’m redoing my site and was just wondering how I can create my own favicon.
Thank you.
Rosie,
THANKS!
And here I paid someone to do this for one of my other sites in the past.
Now I know how to do it.
Regards,
Ron
Hi Rosie,
yesterday i played around with WordPress and wondered how to get this little icons … and Bingo!!! your info in my reader
Thanks a lot , Rosie, for this valuable info!
Udo
It was really simple and easy to understand and no confusion remains after reading it.
I made the favicon with transparent background, but there is no option in photoshop to save as .ico
Thanks
Hi Jason,
If your version of photoshop will not let you save as .ico, you could simply rename the file extension to .ico.
To do this in recent versions of Windows Explorer you will first have to set it to show file extensions. In Windows Explorer click on Tools, Folder Options, View and uncheck ‘Hide extensions for known file types’.
Or, follow the instructions that I give above for people who do not have Photoshop.
Best regards,
Rosie