socialgo

Make a Favicon

Published by: ezra vancil on 3rd Feb 2009 | View all blogs by ezra vancil

Update

I don't know if I just missed it or they added this feature in the last few days. Anyhow, you can now upload your favicon directly into SG in the account details area. Well, now if you have another site, you'll know how to do it. 

You've worked hard on your network, creating it unique to you and your vision, but there is one small detail I bet, at least some of you, have over-looked. In the url bar of your browser is a neat little icon of your logo (well it will be once you get your favicon in there). Right now, if you havn't set your favicon it's socialgo's icon your sport'n to all your members. This icon shows up in the url bar, tabs and bookmarks.

socialgo favicon

socialgo favicon

socialgo favicon

Now you can use any format of an image file you want, but the proper way to do this would be to define the profile in your head tag, which we can't do since we don't have access to the head tag, and then to define the "type" inside of the link. This is what it will look like:

<LINK REL="ICON" 
type="image/gif"
HREF="http://www.networklogic.net/prosocial/favicon.gif"/>

Another way would be to use a ICO file and skip defining the TYPE:

<LINK REL="SHORTCUT ICON" HREF="http://www.yoursite.net/prosocial/favicon.ico"/>

Now all we need to do is make a ICO, png or gif file. Here is the plug-in you will need for an ICO file format in Photoshop.

ICO Photoshop Plugin This is also tested to work in Paint shop Pro and Photoshop Elements. Instal the plugin by putting it in your Photoshop Foler > Plugins > File Format. Then close and restart Photoshop.

The size of a Favicon is 16x16 and we will transform and optimize our image using photoshop. 

1) create a blank 16x16px file in photoshop

2) copy and paste your logo into this document, before you click enter, resize the image to fit the 16x16px.

3) aply filter "unsharpen mask" to image (filter>Sharpen>unsharpmask). I really crunch it because it's so small and blurry - my settings are:
  • Amount - 40
  • Radius - 1.8
  • Threshhold - 3
4) save file as ICO

5) upload to you server

6) insert Code above into the head of your Ads/HTML area of Admin, Make sure to replace the url with the Url of your image. Tada!

One Problem I've found:

Once you set up your own URL, it seems to work seamlessly.

If you have not set-up your own url and pointed it at the socialgo servers you will have a flicker of the socialgo favicon when a page first loads. Once you set up your URL though, it seems to work seamlessly.

Comments

1 Comment

  • Mike Martin
    by Mike Martin 1 year ago
    Also worth noting that you can now upload your favicon from the Network Details section of the Admin Center. At the moment you need to upload any jpeg or png image and the SocialGO Admin Center will resize it and save as a favicon file for you.

    At the moment the Admin Center won't actually allow uploading an actual ico file (security reasons), but it will in the future.
Please login or sign up to post on this network.
Click here to sign up now.