33dots » General

Creating a favicon for your website

tony — Wed, 08 Apr 2009 07:17:37 +0000

You probably have noticed my website’s favicon[5dots] in the address bar. Here let me tell you how I created the favicon and also how it can be displayed for your website/webpage.

A favicon [website icon, URL icon, or bookmark icon] is a small image identifying a particular website. This is shown in the addressbar beside the URL of the website, in the bookmark list and also in the browser tab. MS Windows uses this to represent ‘Website shortcuts’.
Favicon is nothing but an Icon (.ico) file of 32×32 or 16×16 pixels which is uploaded to the website. You can also use amimated GIF or PNG[not supported by IE] if you want.

1. Creating our Image.

Start your favorite image editing program. I used Photoshop.
Create a new image with the size of 32×32 pixels. In Photoshop go to File > New and Set the size here.
Draw the image that you want.
Save it into .png or .jpg or .bmp [I used .png]
If your program supports saving to .ico files, do it and you can skip the next section.

2. Converting it to icon format
Here we will the favicon generator service of html-kit.com to create the icon file. This online tool can generate the still and animated favicons from any image file we upload. The tool also has several option to customize the image like changing colors, adding borders, image stretch/crop. You can also give transparency to the background, which is really cool.

Open your browser and go to www.html-kit.com/favicon/
Click Browse and choose the image you created to upload it and click Generate.
Click Customize. You can set transparency and other customizations here. Transparency can be added either to the background color or for the colors in the corner.
Once you are done, click Instantly preview in the browser to see your favicon in action in the very same browser tab and adressbar[assuming you are using a tabbed browser]. Now, if you see the animated icon and you want the still icon to be displayed, just remove the animated one by clicking the tiny x below the animated image on the left.
Download the favicon.ico

3. Displaying the favicon in the browser

Upload the favicon.ico to the root directory of your webserver. Most browsers should pick your icon without doing anything more.
However, You could also add a tag to each of your html document to specify which favicon to use. This is needed for certain browsers.

Add the line between the head tag a shown,


.......

.......

Done! Refresh your browser or bookmark the site to check.
Note: you may also need to clear cache and also restart your browser to see your icon in action.

Things to take care when starting a new personal blog/website

tony — Tue, 07 Apr 2009 06:14:52 +0000

I just setup my first blog/website. These are a some of the steps that I took in the process of creating this blog. This is not an exhaustive list, but only the areas that I touched.

1. Find a good domain name. If your main audience is from search engines, and if you do not have any country specific audience, the .com .org or .net will give you better search engine position. However, if your audience is mainly from your country then choose the extension of that country. [For example: .co.in sites have prominence over others in google.co.in]
The URL can have numbers, alphabets and ‘-’[hyphen]. Make it short, meaningful [not like mine ] and simple.

2. Find a good host. Look for decent bandwidth, diskspace, number of databases allowed, POP/SMTP email accounts, FTP support, control panel like cPanel etc. Do not go behind offers like unlimited diskspace/bandwidth etc. I just made that mistake and is paying for that. If you choose a Linux based host[like mine], make sure they support .htaccess files, and Apache mod_rewrite. These are required to create ‘pretty links‘. If your host provides a demo account, try it out for sure.

3. Choose a good Content Management software. I use Wordpress for my blog and I highly recommend it. Wordpress is the best if you are thinking of a blog.

4. Use an FTP client to upload/download all your data to/from the webserver. I Use Fillezilla.

5. Carefully choose a good set of passwords. It should be atleast 8 characters long and a mix of letters, alphabets and symbols. Use different passwords for ftp, email, database etc. Note it down in paper.

6. Have a basic understanding of search engine optimization(SEO) before adding posts. These are simple things like providing a good title for all the pages, adding meta description and meta keyword tags for all the pages, providing title attribute for your links and adding alt tag for your images.

7. Get some idea about traffic statistics tools. Your webserver may be providing one, but that may not be good. I use the stats analyzer of Wordpress. Some others include Google analytics, Awstats, etc.

8. Turn Off directory listing if your webserver supports it. If not, add a blank index.html page to all the directories which are listed.

9. Think of a back up at least once in a week.

Welcome to 33dots.com

tony — Wed, 25 Mar 2009 17:35:01 +0000

Hi, welcome to 33dots.com. My name is Tony J Jose and I am a Computer Science student. I have a lot of interest in networking, security and system administration. I also do some web designing, and a bit of programming.
I believe in Free Software, Open source, standards based and accessible development.

33dots.com is an attempt to share the few bits of my experience with others. Mostly I’ll be posting about the things that I work on and the system issues that I face. I hope that this may be useful to someone. It will also help me remember how, why and when i did a particular thing.

Thanks for reading. Have a nice time!