FavIcon: Icon beside your Site’s Name

March 14th, 2008

favicon0.jpgDid you ever wonder why other pages have Customized Icon beside their Site’s Name?

This is called the FavIcon. And this tutorial will help you have your own in your Multiply Page!


A favicon (short for ‘favorites icon’), also known as a website icon, page icon or urlicon, is an icon associated with a particular website or webpage. Often, the Favicon reflects the look and feel of the web site.

Putting a FavIcon on your Multiply Page is a challenge since Multiply prohibits the use of Javascript. But I will try to make it as easy as possible for you to have your own.

Now let’s begin:

    1. You need to have your own favicon image. You can choose whatever image you like and scale it to a 16×16 dimension although other sizes works too. You may use jpeg/jpg, gif, png files.
    But if you want to be lazy like me and want to have an animated Favicon, go to this website: http://www.htmlkit.com/services/favicon/ and upload your Image. Follow the simple steps below.

    Browse > Generate FavIcon > Download FavIcon:

    favicon.jpg

    You will be downloading a Zip file. Open the Zip File and look for the GIF File Type, highlight it and click Extract. Or you can right click on it then Extract like below:
    favicon1.jpg

    Extract the file in the location that you can remember or you have easy access. Then go to the next step.
    2. Upload the FavIcon in any Image Hosting website of your choice (Photobucket, Imageshack, et al). I would suggest to simply upload it in your Multiply.
    3. Copy the URL of your image and paste it on your Notepad so we can edit it.

    4. On the http:// part of your Image URL, replace the colon- this symbol : with %3A so instead of http://urlocation it becomes http%3A//urlocation.
    5. Below inside the TextBox is the actual code to Post your Favicon. Copy and Paste it in your Notepad.
    6. On your notepad, copy the IMAGE URL that you have edited. Then, look for this string on the actual code: EDITED_IMAGE_URL. Replace that string with your EDITED URL. So, it then becomes:
    7. Copy the CODE and Paste it in your Site’s Title. (Customize My Site > Edit Site Title) Hit on Save. If you can’t see it, Refresh your page.

NOTE: Once the code is saved on the Site Title, you will no longer see the same code again. If you want to edit your Site Title, you will have to paste the codes again. So, it is best to save the Code that you have in your Notepad for future use.

If you have any questions or suggestions on this tutorial, feel free to drop me a comment below.

Entry Filed under: Tutorials, simplyJACY

38 Comments Add your own

  • 1. diff  |  March 19th, 2008 at 4:54 am

    hi there..thanks so much for tutorial
    voila and i did it.
    i translate this article into Bahasa Indonesia.
    hope you accept it.
    u can see here

    [Reply]

  • 2. admin  |  March 19th, 2008 at 9:06 am

    that’s great!
    it would be cool if you can post such tutorial translation here.

    [Reply]

  • 3. Modifikasi Favicon Multip&hellip  |  March 19th, 2008 at 4:41 pm

    [...] tutorial was a translation from English to Bahasa Indonesia by Diff . Click this link FavIcon: Icon beside your Site’s Name for the Original English [...]

  • 4. abty888  |  April 4th, 2008 at 2:14 pm

    Thanks for the post.

    [Reply]

  • 5. tinz  |  April 23rd, 2008 at 8:06 pm

    thanks a lot:)

    xoxo.

    :)

    [Reply]

  • 6. simplyjacy  |  April 24th, 2008 at 4:06 am

    i’m glad you find it useful.
    you’re welcome!

    [Reply]

  • 7. sarah  |  April 27th, 2008 at 11:09 am

    this is so nice.. thanx! thistutorial is such a genius.i wonderif i can also upload slides on my site. pls. help. thanks!

    [Reply]

  • 8. simplyjacy  |  April 27th, 2008 at 8:23 pm

    sure you can upload slides on your site.
    you can use the slides from RockYou, Photobucket or others. if you want to put it in your Welcome Box, just follow the following steps:

    1. click Customize my Site
    2. Click Edit on your Welcome Box
    3. Paste your slide code
    4. Click Save.
    5. click Finish or Done in the upper portion.

    [Reply]

  • 9. roseanne  |  April 28th, 2008 at 8:52 pm

    thanks :)

    [Reply]

  • 10. roseanne  |  April 28th, 2008 at 8:53 pm

    can we use it in friendster too? thanks ..

    [Reply]

  • 11. simplyjacy  |  April 29th, 2008 at 5:58 am

    you’re welcome!
    you probably are able to use it for friendster.
    i am not certain if the same codes apply though.
    i have not tried it yet.

    [Reply]

  • 12. honey  |  April 29th, 2008 at 4:34 pm

    hello.. it doesn’t work for me… i’ve been trying it many times but still it doesn’t show.. huhuhu.. help me pls!

    [Reply]

  • 13. Vivian  |  May 2nd, 2008 at 5:05 am

    Hello, i also did follow your instruction but still can not see it on my page (I can see animate favicon on mutiply where I post as URL). Dont know why. Pls help!

    [Reply]

  • 14. rai  |  May 12th, 2008 at 2:12 am

    it doesn’t work..HELP please??!!!..

    [Reply]

  • 15. admin  |  May 12th, 2008 at 3:35 pm

    hello Rai!
    we checked on your page and the icon works. the limitation to this icon is that it only works on firefox.

    [Reply]

  • 16. rai  |  May 12th, 2008 at 9:03 pm

    okkiee…

    [Reply]

  • 17. rai  |  May 12th, 2008 at 9:06 pm

    how to apply it in friendster??

    [Reply]

  • 18. aira  |  May 13th, 2008 at 1:34 am

    wow thanks for the tutorial :)

    [Reply]

  • 19. harr..  |  May 17th, 2008 at 5:54 pm

    does this works in friendster?

    [Reply]

  • 20. k8  |  May 20th, 2008 at 10:59 am

    hey, it did’nt work for me!!!i followed the steps above..please help me.

    [Reply]

  • 21. andrea  |  May 30th, 2008 at 8:47 pm

    …it says you cant use javascript on your profile..what am i suppose to do??

    [Reply]

  • 22. simplyjacy  |  June 5th, 2008 at 10:38 am

    i am not certain if this technique works on friendster.

    [Reply]

  • 23. jaq  |  June 8th, 2008 at 8:12 am

    why cant i find the edit site title?? where is it??

    [Reply]

  • 24. jaq  |  June 8th, 2008 at 8:14 am

    found it.. sorry silly me!!

    [Reply]

  • 25. brewed  |  June 10th, 2008 at 1:59 am

    i have followed all the steps, but it’s still not working on my site.. pls help

    [Reply]

  • 26. simplyjacy  |  June 10th, 2008 at 1:31 pm

    is there a part of the step that confuses you? let us know. that way, we can explain to you further. if you follow the steps carefully, it should work. know that such icon can only be seen if you’re using Firefox browser.

    [Reply]

  • 27. Leng Gaanan  |  June 13th, 2008 at 9:36 pm

    thank you so much… this site is very informative… your the only one really can give an exact and accurate details. . . keep up the good work!!!

    [Reply]

  • 28. simplyjacy  |  June 14th, 2008 at 12:40 am

    thank you Leng! i’m glad you find our site helpful. we are looking for contributors who can share their knowledge and expertise with regards to customizing multiply pages.

    all are welcome!

    [Reply]

  • 29. Doug  |  July 12th, 2008 at 10:19 am

    How is paypal with name favicon done?

    http://www.paypal.com

    Thanks - Boating Buddy.com

    [Reply]

  • 30. Mantaoyamada  |  July 28th, 2008 at 7:55 am

    umm….can you please check out my site if it works i want to make it work and i dont get what kind of URL can someone please help….

    [Reply]

  • 31. jamie  |  August 7th, 2008 at 9:36 am

    where can i see the “edit site title”??
    I already clicked the customize my site but nothing is appearing like the edit site title on top???

    [Reply]

  • 32. Kaye  |  August 8th, 2008 at 10:33 am

    Hi! i followed the steps above but i still don’t see the change in the Icon. Please help. Thank you.

    [Reply]

  • 33. simplyjacy  |  August 8th, 2008 at 6:39 pm

    hello Kay,

    after Multiply made updates, this FavIcon doesn’t work anymore. i will have to check if it has already been cracked again. i’ll let you know and i’ll update this tutorial.

    [Reply]

  • 34. TropicalPam  |  November 3rd, 2008 at 4:41 pm

    I only get the code showing up no pic

    I made it 2″ x 2″ is that too big?

    I stored it in Photo bucket and copied the direct link and added that to the code

    dont know what I did wrong…I am new to this :(

    [Reply]

  • 35. cyber020605  |  December 24th, 2008 at 5:00 am

    i followed everything you said. this is my code. don’t know why it doesn’t work.

    %3Clink%20href%3D%22http%3A//images.thedwieber.multiply.com/image/2/photos/17/600×600/2/lelouchbhz.gif?et=DXoI0cOWteqhalp7dkMf%2BQ&nmid=153013737%22%20rel%3D%22shortcut%20icon%22%20type%3D%22image/x-icon%20/%22%3E

    pls. tell me wat’s wrong…tnx…

    [Reply]

    simplyjacy Reply:
    January 7th, 2009 at 5:24 pm

    since multipy has updated their system, they no longer allow FavIcons.

    [Reply]

  • 36. favicon generator  |  December 26th, 2008 at 1:47 am

    I use free tool at animatedfavicon.com. This one works great and its fast

    [Reply]

  • 37. maan  |  January 4th, 2009 at 10:16 pm

    any preview?^^

    [Reply]

Leave a Comment

Required

Required, hidden

Some HTML allowed:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Trackback this post  |  Subscribe to the comments via RSS Feed

Calendar

January 2009
S M T W T F S
« Oct    
 123
45678910
11121314151617
18192021222324
25262728293031

Most Recent Posts