What is a favicon?
Favicon is the little icon you see on top of your browser when you bookmark a particular website. It is the small icon that represents a website or the company. Take a look at the example below. I took a screenshot on my Chrome browser. And I have put the most important website on my menu bar and that’s how I got these favicons. As you can see, mine is still in that “palette” image. I haven’t change it yet since I am not sure what I really want to do with my future logo.
I have been wanting to create a video regarding on how to create a favicon for your website but I couldn’t do a better job than Rob Cubbon did and so I am referring you to his video instead. He did a real great job explaining this and that’s how I did my favicon. By watching this video.
How to Create a Favicon in Photoshop?
So my logo is at 250×250 resolution (see above). I can easily convert this to 16×16 favicon image. But first I need to create a transparent background on this logo before I resize it to a smaller size. If I didn’t make a transparent background, the palette will be sitting in a white square box. And I don’t want that. I want it completely free from the box. Now, if you are using your photo as a favicon, that’s fine. You don’t need to create a transparent background because your photo will be just a square box.
• from your 250×250 image icon, make the background transparent
• after you make the background transparent, create a 16×16 image icon
• from your favicon.png, save it as “Save for Web”
• select “png-24” then check transparency
• then convert it to favicon.ico (please see the video)
How to create a transparent background in Photoshop?
As you can see, on the right hand side is the layer of the logo and it says “background.” On my logo I have the white background and I want to make this transparent before I create a 16×16 image of this. On the layer, click the “lock icon” to unlock the image. And on your left are the tools, click Eraser and select “Magic Eraser Tool.” You can use Photoshop CS5 or CS6. Click the background of the logo and it will become transparent. NOTE: Click the image to see the bigger version of the screenshot.
Here is the video you can watch to see how to make a Transparent Background in Photoshop…
How to Add a Fav Icon in Your Server?
You know on Rob’s video he said to go to the root directory and enter the favicon.ico on that html, right? I didn’t do that. I’ve done it differently. That’s probably why I thought I’d include his post and his video here just in case you don’t have WordPress and you’re are just uploading your favicon in your server. If you have WordPress, we know that you have these 3 things:
Go to “wp-content”
• click themes
• click on whatever theme your site is (i.e. twenty eleven)
• click the name of your theme
• click images
In that “images” folder you drag the favicon.ico from your Left to the Right of Filezilla.
Okay, I created a screenshot so you can see what I’m saying. This is Filezilla. It’s what I use whenever I need to upload something new on my WordPress blog. On the Left is my local hard drive. And on the Right is where your server is. In your server is where your WordPress is installed. I highlited the “favicon.ico” on the left because that is what you’re going to do. You are going to drag the favicon from the Left to the Right hand side. By uploading the new favicon, it will replace the old one in your WordPress.
Make sure you delete the cache in your “WP Super Cache” plugin. On your dashboard, go to Settings > WP Super Cache > Delete Cache. I don’t know about you, but I always delete the cache whenever I change something on my WordPress or otherwise, I won’t see the changes on my website.
After you uploaded everything and check to see if your new favicon showed up, but you have a hard time seeing it. In your URL enter:
And if you see the icon there, it means you have done it right. Refresh and see your whole website.
Related Post: How To Make A Favicon For Your Website by: Rob Cubbon
Did you find this post helpful? And so why not share it with your friends. They too might benefit to create their own favicon for their website. Specially if you have WordPress blog, you don’t want that boring “G” as a favicon, do you? You want to customize it as your own. Anyway, I’m anxious to hear your feedback.