Archive for Work

Favicons – or: That little picture next to a website URL

A picture speaks a thousand words – Or at least that’s what people say. And you will have seen lots of websites, that after you’ve opened them, display a little tiny picture towards the left of the website address in most popular internet browsers in use today. And if you run your own site, you may have wondered, how do I get one of those?

Well wonder no more – The picture is called a “Favicon”. And you get one by creating an icon (.ico file) based on an image you design, and putting it in the root directory of your site. So that’s it in a nutshell. Below I’ll go through it step by step.

1. The image
Choose an image or create one from scratch which will look good even when displayed extremely small. If you’re creating this image from scratch, it helps to work on a small scale so you need not resize too much in order to use the icon. Make a new image sized 64×64 pixels. Once it is done, resize to 16×16 pixels and see if you like the look of it.

For this example, I have taken part of a photograph of sunflowers, and selected a square of the original to create this small picture: (64x64pixels)

sunflowers1

Resized to 16×16 to see if it looks acceptable:

sunflowers16

Well it ain’t perfect, but it’ll do for my example.

Next – we need this image to be saved as an .ico file (Windows Icon File). Depending on what software you have access to, you may be able to do it from your graphics program directly (For this example I used The Gimp, which can directly save as .ico, if you’re using Photoshop, you may need to install a plug in). OR: You can simply convert your .png file to .ico using This Very Handy Website. Then rename your file to “favicon.ico”.

2. Your Website

Now that we’ve got the icon, we need to include it in our website. In order to do this, upload it to the root directory of your website. Now most browsers will automatically recognise it. But in order to make sure, include the following code on all pages, within the <HEAD> and </HEAD> tags towards the top of the page:

<link rel=”shortcut icon” href=”http://www.mysite.com/favicon.ico&#8221; type=”image/vnd.microsoft.icon”>
<link rel=”icon” href=”http://www.mysite.com/favicon.ico&#8221; type=”image/vnd.microsoft.icon”>

And done! Now everyone who visits your site (provided their browser supports it) will see your favicon next to the url, next to the title of each page in tabbed browsers (IE7, Firefox, Google Chrome, etc), as well as next to bookmarks.

NOTE (Thank you Odzer for reminding me) : if you’ve done all the above and your favicon is not showing up, empty your cache (temporary internet files), or the change won’t show up. This is because your browser is basically still looking at the files it had previously saved on your hard drive, not the ones you just updated.

Advertisements

CMS Made simple?!

Today I’ve spent most of my day researching a CMS. I am in desperate need of a good, stable and easy to use CMS for two applications; my office requires a website and my boss wants to update content, and I am planning a new site myself that will focus mainly on content, rather than 100% ecommerce.

So as I started searching this morning, I came across a blog post describing 13 CMS’s that I had not yet heard of. I cannot really pinpoint why out of all of them, I opened one window for Silverstripe CMS, and another leading me to the CMS Made Simple website. I ended up looking through CMS made simple, tried out the demo install, and noticed some interesting features. For some reason I didn’t go beyond the frontpage of Silverstripe, perhaps I will look into it some other day.

Previously I have used a few Opensource CMS’s both for my own projects as well as for customers. Working as a freelancer, I was asked to do a few Mambo templates. That is how I got a little familiar with that system. I didn’t like it that much because it had many limitations and whenever I would find a module I liked, it turned out development had stopped on it and no support was given. But just like CMS made simple it was also based on PHP and MySQL. Mambo’s limitations grew me accustomed to problems having group permissions for various users, as well as some templating limitations.

I was pleasantly surprised to see that CMS made simple had inbuilt functionality for some things that were very hard to do in Mambo; Group permissions seem to be easy at first sight. I have not fully tested this yet but I will definitely do it within the next week or so. Templates are easily selected and different pages can have different templates assigned to them. I could straight away think of various situations in which I needed exactly this functionality and in the end gave up on my ideas because it was simply too difficult to do.

I was also very pleased with the fact that the inbuilt SEO Friendly URLs in CMS made simple actually work on my web hosting. Something I was not able to do on my Zen Cart site for some reason; which actually made me suspect that maybe I have Windows hosting. Clearly this is not the case because I’ve managed it with this CMS. So I have to suspect that htaccess isnt fully supported on my hosting and because CMS Made Simple has an inbuilt way of rewriting URLs through PHP (don’t ask me how; I’m not that nerdy!) it just works out of the box. Great, just what I wanted!

From what I could tell at first sight, there are many third party modules available for CMS made simple. The website has quite a comprehensive list of them. And I could find a handful already which I have downloaded and kept; a Comments feature, RSS feed, Google sitemap module, Events module etc.

Another I downloaded was osCommerce for CMS made simple. It seemed promising and I was very keen on using it but it just didn’t work at all.. So far this was the only disappointment I faced. Sure, I plan on using this system on a mainly content based site, but I will still need some ecommerce functionality. There are some other shopping cart and product catalogue modules available, and I will test them soon, so my final verdict is still pending. However, at least for my office site, which does not need an online shop, I think I will go with this CMS.

My next step will be learning how to create my own templates. That should be fun…

Meta refresh – a life saver

At work I was facing a bit of a problem regarding the company website. And I’m sure there are more companies out there with this issue. Being a small company, we did not have our own website. We’re a subsidiary of a much bigger company abroad, and therefore they had a website, we referred all our customers to that site, and didn’t bother. But that’s surely not the way to go! As our sales are increasing, we require a more professional image. This isn’t just a handful of people who work directly for the parent company; it is a separate company in its own right and should act like it. So we decided to set up a website.

The company already has email hosting because all our business communication is done electronically. The hosting company seems good enough for our email needs, we get a nice system which can be managed through MS Outlook and a webmail interface. For this purpose we already owned a domain name with free 20mb hosting, without scripting support. Now that the website came into the picture; we were facing a dilemma. The web hosting solutions offered by our ISP are expensive and limiting; clearly they focus more on email and needs and wishes of small companies wanting a small (self made) brochure style website. We are aiming higher than that! With me being the in-house web designer, we have plans for a dynamic portal to match our competitors’ sites; requiring support for PHP and SQL amongst other things. And our ISP just didn’t have the right thing. But shifting our domain to a different host would create a lot of problems; we cannot go without email for even a moment! The system we use is appropriate for our needs, and we do not wish to scale down on that. But we do want a better web hosting for our site!

Solution: we bought a new domain name specifically for our new website. And the old one will remain as it is, because as part of our company email addresses, we suspect many people would still visit that domain, in search for our company site. So we have two domains, out of which one will be fully functional. How to get all visitors to come to the correct site? Easy: we put a Meta Refresh tag on the old site, which seamlessly forwards the visitors to the appropriate domain.

<META HTTP-EQUIV="Refresh" CONTENT="0; URL=http://www.example.com">

Include the above code at the top of your webpage; inside the <HEAD> and </HEAD> tags. Change the URL in the code to the domain you want to forward to and you’re done! The “0” next to CONTENT= refers to the number of seconds you want to display the old page. In our case we want our forward to be as quick as possible. And not just that, we don’t want to distract people by the fact that we’re forwarding; To visitors it looks like it’s all the same site. On the old domain we uploaded a page that looks identical to our website’s front page; when it redirects only very attentive visitors would notice that it looks like the site is refreshing.

Personally I’ve chosen to do it this way because it annoys me when you get to a page which says “You are being redirected to our new site at http://www.blah.com”. It looks unprofessional and messy. Visitors get spooked thinking they visited the wrong site and might close it. Therefore I prefer to have the same look and feel on both pages.