It is currently Fri Aug 18, 2017 12:06 am




Post new topic Reply to topic  [ 8 posts ] 
 Inserting a favicon to your webpage - Heres How 
Author Message
Moderator
Moderator
User avatar

Joined: Sun Sep 03, 2006 5:31 pm
Posts: 1869
Post Inserting a favicon to your webpage - Heres How
Ever wondered how and why some websites are able to place an icon beside their URL?.
So I’ve finally googled it and found out a few facts about them.
Firstly, the name of the icon is “favicon.ico“. It is only 16 X 16 pixels large.
That’s not a lot of space to work with. However, it is possible to create the
initial design on a larger canvas, and later resize them to 16 X 16 pixels. It is
advisable that the design canvas be a multiply of 16 (eg. 32, 48, 64, 80, 96, ….).

There’s a few ways of creating a favicon.ico. Some sources suggests
downloading a photoshop plugin. The icon can then be exported to the .ico
format. Another way would be to download an executable program to
convert the icon to the .ico format manually.

However, I will be using a web tool to convert my original icon image to
the .ico format for this tutorial. The web tool can be accessed from
http://www.chami.com/html-kit/services/favicon/. The steps to create the favicon.ico is as below:

Step 1: Browse for the original file. Click “Generate Favicon.ico”. A
preview of the icon will be displayed (both animated & non-animated
versions).

Step 2: (optional) Click on “Test in Browser” to view the icon in
action on the same page.

Step 3: Download the favicon files to your local hard drive.

Step 4: Open the zip file. It contains the favicon.ico file, a readme file
(with instructions to install the favicon.ico file) and some extra bits.

Step 5: Upload the “favicon.ico” file to your server into the root
folder (usually “public_html”).

Step 6: (quoted from the readme file included in the zip file):

You can add a favicon to your web page by uploading favicon.ico to your
website and inserting the following HTML tag inside the … section of your
web page.

<link rel="shortcut icon" href="http://www.yourdomain.com/favicon.ico">

Optional: if you would like to display the animated favicon, upload
animated_favicon1.gif as well and insert the following HTML tags.

<link rel="shortcut icon" href="favicon.ico">
<link rel="icon" href="animated_favicon1.gif" type="image/gif">

That’s it! You’re done.

ps. ripped from another site :-)

_________________
Don't Steal!, Become a M.P, Its Not Theft, Its Expenses...


Mon Sep 03, 2007 12:53 pm
Profile
Moderator
Moderator
User avatar

Joined: Mon Sep 04, 2006 12:32 am
Posts: 6421
Post 
great stuff, thanx dan. :D

_________________
LOBAY - LOCAL EBAY BARGAIN FINDER


Mon Sep 03, 2007 2:27 pm
Profile
Moderator
Moderator
User avatar

Joined: Sun Sep 03, 2006 5:31 pm
Posts: 1869
Post 
no probs. ive only just sussed it myself .. been wanting to for ages but never got round to doing it.

www.emsengine.com example

_________________
Don't Steal!, Become a M.P, Its Not Theft, Its Expenses...


Mon Sep 03, 2007 3:01 pm
Profile
Site admin
Site admin
User avatar

Joined: Thu Sep 07, 2006 9:05 pm
Posts: 4116
Location: Behind a V8 engine.
Post 
I stuck one on this site last month - it's a nice touch to any site!

They work slightly differently depending on the browser - IE will only update them if you add to favourites I think - Firefox will show them all the time.

_________________
For local ebay bargains visit - Local Bargain finder


Mon Sep 03, 2007 3:38 pm
Profile WWW
Moderator
Moderator
User avatar

Joined: Sun Sep 03, 2006 5:00 pm
Posts: 4263
Location: England
Post 
Firefox rocks!

_________________
Help Support PowerSellersForum By Using Our ebay bargain finder.

SaleHoo Wholesale - A Specialist Wholesale Directory.

Build A Niche Store Today (Click Here)


Mon Sep 03, 2007 4:11 pm
Profile WWW
member
member
User avatar

Joined: Fri Aug 29, 2008 6:55 pm
Posts: 12
Location: UK
Post 
Favicons are more important than ever now, with both Firefox and IE7+ displaying the icons in the Favorites list and Links list. Get your branding out there!


Sun Aug 31, 2008 5:43 pm
Profile WWW
Just registered
Just registered

Joined: Fri Jun 02, 2017 5:58 am
Posts: 1
Post Re: Inserting a favicon to your webpage - Heres How
A Favicon is a little symbol that programs show alongside a page's title on a program tab, or in the deliver bar beside its URL. It likewise is utilized when you bookmark a page dissertation editing online. Here are a few cases, But it doesn't stop there.


Fri Jun 02, 2017 6:05 am
Profile
Just registered
Just registered

Joined: Fri Jun 09, 2017 5:17 am
Posts: 2
Post Re: Inserting a favicon to your webpage - Heres How
If you want to take advantage of transparency, use the .gif or .png format when creating your image. Once you have your 16x16 image, go use a free service like favicon.cc to convert your image. Use the Import Image option to upload your original image: You'll get to see a preview of your new icon.


Sir M Visvesvaraya Institute of Technology admission
Sapthagiri college of Engineering Bangalore admission
Nitte Meenakshi Institute of Technology Bangalore admission


Fri Jun 09, 2017 5:26 am
Profile
Display posts from previous:  Sort by  
Post new topic Reply to topic  [ 8 posts ] 


Who is online

Users browsing this forum: No registered users and 1 guest


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum

Search for:
Jump to:  
cron
Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group.
Web Design Wigan Dog Kennels and Runs