I need help to create a favicon

Discussion in 'HTML & Website Design' started by fredcool2008, Nov 29, 2010.

  1. #1
    I have a site called crazysplash and I'd like a favicon to decorate my website.
    Can anyone make one free :confused:
    -->http://www.crazysplash.com :cool:
     
    fredcool2008, Nov 29, 2010 IP
  2. workingsmart

    workingsmart Well-Known Member

    Messages:
    411
    Likes Received:
    12
    Best Answers:
    9
    Trophy Points:
    120
    #2
    workingsmart, Nov 29, 2010 IP
  3. Sushil Ranakoti

    Sushil Ranakoti Active Member

    Messages:
    34
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    61
    #3
    just write "create favicon" on google and press enter and then you will get various sites there chose any one and go with to create your personal favicon icon for your own website.
     
    Sushil Ranakoti, Nov 29, 2010 IP
  4. solidcode

    solidcode Greenhorn

    Messages:
    41
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    16
    #4
    That link that workingsmart posted is a good one. Also you want your gif or png file to have a clear background color so it looks good in someone's bookmarks instead of white or colored box around it.
     
    solidcode, Dec 11, 2010 IP
  5. GeneralOJB

    GeneralOJB Peon

    Messages:
    36
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #5
    If you're going to be professional, you won't use websites to make graphics.

    Open photoshop and create a 64 x 64 canvas. Create your favicon there, and when you're done, resize to 16 x 16.

    If you haven't got photoshop, PM me and I can help you get it for free, cause.. I'm a boss. =)
     
    GeneralOJB, Dec 11, 2010 IP
  6. fancymouj

    fancymouj Peon

    Messages:
    5,019
    Likes Received:
    134
    Best Answers:
    0
    Trophy Points:
    0
    #6
    hi mate ,,

    Select the image you want to use for your favicon and trim part of it so you have a square part of the image (for example if your image is 450x400px trim 50px so it is 400x400px).

    Resize the square image you want to use as favicon to 16x16px.

    Save the shortcut as .gif file as it is the most browser friendly format for favicons.

    Name your shortcut favicon.gif and upload it to your root folder as some browser recognise the file named favicon as shortcut icon by default.


    For best results and for having a favicon compatible with all browsers that support shortcut icons place the following code anywhere between your <head> and </head> tags:
    <link rel="shortcut icon" href="URL" />
    Replace URL with the path where you stored your favicon.
     
    fancymouj, Dec 11, 2010 IP
  7. pemburudomain

    pemburudomain Greenhorn

    Messages:
    83
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    16
    #7
    My Solution :
    1.Use Favicon Generator (You can search it in google)
    2.Make your own design in photoshop or corel then resize it...
     
    pemburudomain, Dec 12, 2010 IP
  8. CREATIQUA

    CREATIQUA Peon

    Messages:
    23
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #8
    there is a photoshop plugin, that helps you save images as .ico files. Don't forget to make it square 16x16.
     
    CREATIQUA, Dec 12, 2010 IP
  9. nuwavonline

    nuwavonline Peon

    Messages:
    103
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #9
    How to create Favicon

    1. Open up your image editing Program, such as Photoshop or Gimp. Create an image that’s 64×64 pixels in size. It should be a simple image, so that it’s instantly recognisable. Save image as a JPG or GIF file

    2. Convert the image to a favicon.ico file. It must be called exactly this, or the browser won’t recognise it. An easy way to do this is to use The Favicon Generator or any other favicon generator.

    3. Save Favicon and make sure you name the file favicon.ico

    4. Upload your Favicon.ico file to your website. You must place it into the same directory as your home (index) page, and leave it loose or put it in the images directory or any other folder, but you must include the path to that directory folder within your site.

    5. Add the following code to your web site’s HTML. You should put the code after the <title> tag , and make sure the path to the icon is correct, relative to the web page. Code follows:

    <link rel="shortcut icon" href="http://www.yoursite.com/favicon.ico" type="image/x-icon" />

    6. Refresh the page and admire your web site’s beautiful new icon.
     
    nuwavonline, Dec 12, 2010 IP
    fancymouj likes this.
  10. Kerosene

    Kerosene Alpha & Omega™ Staff

    Messages:
    11,366
    Likes Received:
    575
    Best Answers:
    4
    Trophy Points:
    385
    #10
    I wrote a quick n dirty how to here: http://www.thewebsiteprofessionals.com/favicon.html
    It also works for creating transparent background favicons.
    :)
     
    Kerosene, Dec 12, 2010 IP