Welcome, Guest: Register On Nairaland / LOGIN! / Trending / Recent / New
Stats: 3,150,843 members, 7,810,253 topics. Date: Saturday, 27 April 2024 at 02:37 AM

Webmasters! Up Your Game – With Favicons - Webmasters - Nairaland

Nairaland Forum / Science/Technology / Webmasters / Webmasters! Up Your Game – With Favicons (805 Views)

Beginner's HTML Tutorials - 4 - How To Add Favicons / SEO Optimization Techniques That Webmasters Ignore / Nigerian Webmasters' Association? (2) (3) (4)

(1) (Reply)

Webmasters! Up Your Game – With Favicons by gbolio4(m): 5:14am On Jun 26, 2007
This little post is about favicons, and how applying them on your sites might help in stopping posts like the “ Web Designers In Nigeria Are Amateurs”-type that Nairaland was hit with a couple o' days back.

Well, Favicons are those tiny, often fancy, image icons that stand beside the title bar text on your browser's title bar when viewing sites that have them implemented.

see good favicon usage examples :-
http://www.syberplus.info
http://www.nairaland.com
http://cbcnigeria.freehostia.com

Favicons basically stand your work out as a professionally created project and makes you a webmaster/web designer who's in tune with current trends [definitely a plus when competing for jobs]

First off, some clear facts on the table.
1, Favicons are NOT essential to our site's operation or function.
2, Favicons will not make your site rank higher in SE's, or pull in more visitors
3, Favicons will probably also NOT win you a web-design contest

BUT applying Favicons on your sites WILL surely stand them out as a professionally created, and WILL mark you as a designer who pays attention to detail.


Theres just 2 steps to applying favicons on your site

1, create the icon file and then place it within the files on your server
2, tell browsers how to locate the file

Creating the favicon file

1. Create a 16x16 pixels image file [Paint works]. Yes, it is that small and you really cant draw much in it. Restrict yourself to 16 colors, but 256 colors should work fine.

2. Save the image as an ICO file (named "favicon.ico", of course). Newer browsers can display favicons saved with other extensions like Gif or Png or even Jpg. But this must be specified in the <link> tag used to direct browsers to display favicons [more below]

3. Upload the favicon file to your website's server [preferably in the document root where your home page is located].



Telling Browsers how to locate the favicon file

If you place the favicon file in a location other than the default web directory [the document root directory], then you'll need to help browsers locate the file with an html tag in the <head> section of your html code

e.g. <link rel="shortcut icon" href="/favicon.Bleep" type="image/x-icon" />

Replace "/favicon.Bleep" in the above example with the precise location and file extension of your favicon file, for example, "/images/favicon.ico" if you have placed it in your "/images/" directory, or “/images/icons/favicon.png” if the file is in Png format and is located in a folder called icons which is inside another folder named images folder'


That step is optional if you have put your "favicon.Bleep" file in the standard locations, i.e., in the same directory as the web page or in the root directory of your website. Otherwise you will need to modify all your existing web pages to take advantage of the favicon facility.

Points to note

--The common/default filetype for favicon implementation is .ico

--The default location of the favicon file is the web root or site root

If both of the points above are to be circumvented for any reason, then the almighty <link> tag must be properly constructed to reflect the designers changes.

(1) (Reply)

Please Help Review Mooreadvice New Website / Нужна робота? Тогда вам кнам. / My Promise Delivered

(Go Up)

Sections: politics (1) business autos (1) jobs (1) career education (1) romance computers phones travel sports fashion health
religion celebs tv-movies music-radio literature webmasters programming techmarket

Links: (1) (2) (3) (4) (5) (6) (7) (8) (9) (10)

Nairaland - Copyright © 2005 - 2024 Oluwaseun Osewa. All rights reserved. See How To Advertise. 10
Disclaimer: Every Nairaland member is solely responsible for anything that he/she posts or uploads on Nairaland.