Creating A favicon

wizeman

wizeman

Banned
Messages
256
Reaction score
0
Points
0
What is a Favicon?

A Favicon is a small picture (16x16 pixel), that you can find in front of your URL... and in the favourites list when you add that url in your favourites list.

Click Here For An Example

How to create a Favicon:

First off, you will need Photoshop or Paint Shop Pro to make a Favicon. If you don't have any of these you can use good old Paint.

So, now lets start:

1. Create a new picture with the size 64x64 and edit it like you want your Favicon to be.. then reduce the size to 16x16 and save it for example as "favicon.bmp".

note: its important that you save it as ".bmp" because we need to convert it to ".ico" later on.

2. Rename the file you've just created to "favicon.ico"... if that doesn't work, download IrfanView, open the favicon.bmp and select "file -> save as" and choose ".ico"

3. Now put your Favicon into the folder anywhere in your site's root folder.

4. Now open your index.htm (or whatever page you want to use) in Notepad, Frontpage, Dreamweaver any other editer... put this code above your <head></head> tags.

<link rel="shortcut icon" href="favicon.ico">

note: if you put the favicon.ico into your image folder, change the code to...

<link rel="shortcut icon" href="images/favicon.ico">

If your favicon is in any other folder in your site's directory, change the 'href=...' appropriatley. E.g. if your icon is up a directory the code is 'href=../favicon.ico' etc.

5. Upload your index.htm (or whatever) to your server and then it should work. Make sure you have uploaded your favicon as well.
 
S

shauntp

Member
Messages
97
Reaction score
0
Points
6
You don't need to add the link to your pages. The fact that it is in the directory should be enough.
 
GamingX

GamingX

Executive Team
Messages
6,355
Reaction score
3
Points
38
Hey, thanks for the tip, I was wondering what is favicon.....
 
shaunak

shaunak

New Member
Messages
320
Reaction score
0
Points
0
@shauntp: may browsers do not read the favicon unless its included into the page.

@gamingX:

A favicon (short for 'favorites icon'), also known as a website icon, a page icon or an urlicon, is an icon associated with a particular website or webpage. A web designer can create such an icon, and many recent web browsers can then make use of them. Browsers that support favicons may display them in the browser's URL bar, next to the site's name in lists of bookmarks, and next to the page's title in a tabbed document interface.

Its basically the little image that appears with the site name in your browser.

eg:
favicon.ico

^^thats the msn favicon from http://www.msn.com/favicon.ico
 
Last edited:
L

legendphil

New Member
Messages
152
Reaction score
0
Points
0
hao!

hmm.. curious. how do you make animated gifs?

PS : my post may seem a bit off the topic, but I want an animated favicon for my blog.
 
Sohail

Sohail

Active Member
Messages
3,055
Reaction score
0
Points
36
How do you make an ico animated? Do you just link the rel source to a gif? Nice tutorial by the way!
 
nanat

nanat

New Member
Messages
53
Reaction score
0
Points
0
i didn't know that ico files can be animated..how did you do it alfred?is it as simple as renaming animated gifs to favicon.ico?
 
Sohail

Sohail

Active Member
Messages
3,055
Reaction score
0
Points
36
Thanks, that would be really helpful. Most people use firefox nower days anyway because its the best! But cant you just link it directly to a .gif? I tried linking it to a .jpeg and it worked. And is it possible to get a .gif working with all (or most) internet browsers? :/
 
diabolo

diabolo

Community Advocate
Community Support
Messages
1,682
Reaction score
32
Points
48
many things that people don't understand is when rendering an image, it has its own encryption code. If they didn't then they wouldn't have the need for different file extensions.
So in most cases renaming a file from .bmp to .ico will not work since it is using two different codes. in some cases it might.
 
You must log in or register to reply here.
Top