iFinity

Written by:
Friday, November 28, 2008 3:10 PM 

I've had this post half-written for a while, but I saw someone asking the question on the DNN forums today, so I thought I should finish it and post it for everyone to read. 

Note : Where I write from, 'Favorite' is spelled with a 'u', so that's the standard I'll stick to in this post.

Since about DotNetNuke 4.8 or so (correct me where I'm wrong) DNN outputs a Favourite icon for your specified portal.  If there's no FavIcon, it will generate the standard DNN cog/wheel icon thing in it's place.  Thus you have many websites on the internet with the DNN icon instead of their own.

Updating this for your site is dead simple, and will take under 5 minutes.  Here's what you need to do:

1) Locate your Icon, and get a standard JPEG, GIF or PNG file.

Sounds simple, but it's not always.  Ideally you should come up with some sort of image that is square in shape.  I use the little stylised 'i' from the iFinity logo for my site : you could do something similar with yours.  

You should end up with a square JPEG, GIF or PNG file with just the image that will become your Favourite icon.

Note that you don't have to worry about squeezing onto a 32x32 pixel canvas, just do it about 100x100 or whatever feels comfortable to you.  Jot down where you saved the file so you can refer back to it in step 2.

Here's mine, after I copy / pasted a square selection from my standard logo image.  I just used a simple graphics editor : you can do this in MS paint if you like. 

As a tip (and this applies to all icon files) I always try and fill the size of the image close to the border of the canvas. I find that this always makes a more pleasing icon file.  This is because they're pretty small, so you want to maximise the image size.

2) Create your Favourite Icon, using a web service

Most people don't have an .ico file editor on their system.  I do, but it's a pain to use and probably a bit like a scalpel, in that when it's used by a professional yields good results : the rest of us tend to make a mess.  A simple graphics program is much easier to use, and it's easier to work on a bigger scale.

I use the favourite icon service at http://www.html-kit.com/favicon/ I just found this through Google; without doubt there will be other services like it.

For the above linked site, you just click the 'browse' button on the page, and select your chosen icon image (that you created in step 1) and then click on 'Generate Favicon.ico'.

You will be redirected to a new page, which will show an example of your favicon in a browser.  You should also see a button which says 'Download FavIcon'.  Click this and download your favicon package to your computer.

3) Pick the right file

You will either (depending on your browser settings) download the zip file to your computer, or the zip file will open in your zip program.

Inside this Zip file, you'll see the following files:

You're going to extract the favorite icon file out to your computer somewhere.  If you've got funky colours all over the place, go ahead and choose the 'favicon.ico'.  If you're like me and like a simpler, transparent background icon, then choose the 'transparent.ico'.  Use the Zip program extract feature and put the file somewhere where you can find it.

If you chose the 'transparent.ico', rename the file to 'favicon.ico'.

4) Upload the favicon.ico to your portal

If you have host access to your portal, then first go into your 'Host->Host Settings' page.  Scroll down to the 'Other Settings' section, and expand it.  Then, in the 'File Upload Extensions' box, add '.ico' to the list.  Otherwise you can't upload your icon file using DNN.

If you either don't have host access, or don't want to add .ico to the list, then use the FTP program of your choice, and FTP the favicon.ico file to the /portals/_n_/ directory of your site, where _n_ is either the portal ID or the directory name of your portal home directory.

If you have updated your host settings permission to upload .ico files, then go to the 'Admin->Files' page.  Make sure you have 'Portal Root' selected, then click on 'Upload'.  Browse to your .ico file, then click on 'Upload File'.  This will load the favicon.ico file into your portal root directory.

5) Admire your Favicon

That's all you have to do.  DNN will take care of the rest.  You may have to do one of the following to get your Favicon to appear:

1) do a 'hard' refresh of the page (ctl+F5)

2) close your browser and open again

3) clear out your browser cache and open the site again

4) turn off your computer and start it again

5) reinstall your operating system

Of course, I'm just kidding on item (5).  You should only need to apply the latest 10 security patches. No, kidding again!

Seriously though, for reasons beyond my desire to find out, sometimes it can take a bit of messing about to get a favourite icon to appear once your browser has cached a previous version.  The best way is to ask someone else to browse the site and get them to tell you if the icon appeared correctly.

Did that Help?

If you've found a problem in my instructions or would like to add more, please use the comments field below.

Trackback Print

Tags:

Categories:

Location: Blogs Crafty Code

Your name:
Your email:
	(Optional) Email used only to show Gravatar.
Your website:
Title:
Comment:
Add Comment   Cancel