How to Add a Favicon to Your URL
68
What is a Favicon?
A favicon is that little picture that pops up next to the URL on your web browser. It is also next to the name of the website in each of your "tabs".
HubPages.com's favicon is the picture on the right. Find it up near the URL, and that is the favicon!
Putting a favicon on your website is a good way to reel in visitors! It catches the eye, and gives your website a little more uniqueness. The question is...How do I do it?
How To Create A Favicon
Step 1 - Choose a picture or graphic that you want to make into your favicon. You will then have to re-size the image to 16x16 pixels. This website makes it very easy to re-size your image. Its quick, easy, and free!
Step 2 - Convert your graphic into an icon. To do this, you will want to use irfanview. It is a free program you can download here. Follow these simple steps to complete this step:
- Open the irfanview program.
- Select File, Open, and then locate the photo or image you would like to use.
- Select File, Save As...
- Name the file Favicon and in the "Save as type:" drop down list, choose the .ICO (Windows Icon) extension.
Congratulations, you have successfully created your favicon. The next step is uploading the favicon to your server...
How To Upload the Favicon to a Server
Depending on which hosting service you are using for your website it may be easy to upload the favicon. If the hosting service has an upload form for files, simply use this to locate the favicon.ico file that you created in the last step and hit the upload button!
Not all services have this luxury however, and you will need to use an FTP client. I would reccommend using FileZilla. It is also a free program, and is simple to use.
Before we start with the uploading, you must first gather some information. You will need the following:
- Your username and password from your web-hosting service.
- The Host Name, which you will have to get from your web-hosting server that you are connecting to, and;
- The URL or website in which you want to add the favicon.
Once you have this information ready to go (Use the snapshot on the right to follow along):
Step 1 - Open up FileZilla and input the collected data into the appropriate fields, and hit connect. Ignore the blue and green mumbo jumbo in the top box. The only thing you are worried about there is if a red line pops up and says: "Cannot Connect to Server".
Step 2 - In the left box with the folders, locate the folder where you saved the "favicon.ico" file. In the box just below that, the files within the folder will appear. Select the "favicon.ico" file.
Step 3 - In the right-hand box, locate the directory where you would like to upload the file. Simply drag the "favicon.ico" file onto that folder. If it worked properly, a tab on the bottom of the program will read "Successful Transfers", and if you click on that tab and the "favicon.ico" file appears, then you are all done!
Just one more thing needs to be done to make the favicon appear online...
Related Links
- FileZilla - The free FTP solution
- IrfanView - Official Homepage
IrfanView ... one of the most popular viewers worldwide. - Top 10 Web Hosting Services
Favicon HTML Code
In order for your favicon to appear next to the URL, you will have to add a piece of HTML code to the <head> section of your website.
Simply copy and paste this HTML code:
<link rel="SHORTCUT ICON" href="http://www.yourwebsite.com/favicon.ico">
Be sure to change "www.yourwebsite.com" to the actual name of your website, otherwise you have done all of this work for nothing!
Congratulations, you have now placed a favicon on your website!
PrintShare it! — Rate it: up down flag this hub
Comments
I'm in!
i know this ,
but i din't know about infranview.com ,
& a html code need to be inserted in first head section.
thank you for helping us.
Thank you for the info. I would really like to have that but could I possibly download it since I'm using mozila firefox.
Yes, It does work for Firefox.
I would sure like to do that but I'm a little unclear on which folder to put it into on my website. Would it be "images"
Thanks for the tips.
Hi agv...
You can drop it into any folder I believe, or it might just be easier to upload it into the main directory and not into a subfolder.
good luck!
If you host on a unix system like CentOs, you don't need to put any code in the head tag. You can just drop the icon in the root folder of your site and it will display it.
Now the next question would be "How do I know if my site is hosted on 'n 'nix system?"
If you have cPanel as part of your hosting package, it's unix/linux.
C.Ferreira's way of doing it is probably the best as it keeps in line with programming standards. Better to learn the proper way of doing it, before you figure out the shortcuts.
Candie V says:
7 months ago
If you'd like to do this for me, I'll make you a margarita!! *head tipped* *bats eyelids*