Η σημασία των Favicons
Σίγουρα θα έχετε παρατηρήσει πως κάποια websites έχουν ένα εικονίδιο που τα χαρακτηρίζει και βρίσκεται πριν από το domain name τους, στην address bar. Για παράδειγμα, το εικονίδιο του www.webdesignblog.gr είναι μια μικρογραφία του λογοτύπου. Για να το δείτε πρέπει να χρησιμοποιείτε οποιονδήποτε browser εκτός του internet explorer 6.0.
Πόσο σημαντικό όμως είναι το εικονίδιο αυτό και πώς ονομάζεται; Η πιο γνωστή ονομασία είναι Favicon από το Favorites + Icon. Άλλοι τα ονομάζουν website icon ή ακόμα και page icon αλλά πιο γνωστό και γνώριμο είναι το πρώτο. Το Favicon δεν φαίνεται μόνο στο address bar στο πάνω μέρος του browser σας, αλλά και στον κατάλογο με τα αγαπημένα σας (Bookmarks, Favorites ανάλογα με ποιον browser χρησιμοποιείτε).
Καταλαβαίνετε, λοιπόν, πόσο σημαντικά είναι αφού από τα σημεία στα οποία φαίνονται μπορούν και βοηθούν το χρήστη να αναγνωρίζει ένα website χωρίς δυσκολία ανάμεσα σε μια σειρά από ανοιχτά TABS ή στη συνήθως μακριά λίστα με τα αγαπημένα του. Αυτό όμως που καταφέρνει έμμεσα είναι να πετυχαίνει ένα πολύ δυνατό και μόνιμο branding στο μυαλό του χρήστη.
Μερικές φορές όμως, όταν χρησιμοποιείτε το ίδιο Favicon για περισσότερα από 1 sites, υπάρχει μεγάλη πιθανότητα να μπερδευτεί ο χρήστης σας. Χαρακτηριστικό παράδειγμα αυτού είναι αυτό που φαίνεται στην παρακάτω εικόνα. Ίσως αν χρησιμοποιούσε το Google παρόμοια εικονίδια για κάθε website και όχι ίδια, θα πετύχαινε καλύτερα τον στόχο του.
Εάν θέλετε να εφαρμόσετε ένα Favicon στο website σας δεν έχετε παρά να κάνετε upload στο root του διαδικτυακού σας τόπου ένα εικονίδιο το οποίο να είναι είτε της μορφής .ico, είτε της μορφής .gif ή της μορφής .png στα 16×16 pixels και να προσθέσετε τον εξής κώδικα στο <HEAD></HEAD> της σελίδας σας:
Για σελίδα HTML 4.01
<!DOCTYPE html
PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en-US">
<head profile="http://www.w3.org/2005/10/profile">
<link rel="icon"
type="image/png"
href="http://example.com/myicon.png">
[…]
</head>
[…]
</html>
Για σελίδα XHTML 1.0
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html
xmlns="http://www.w3.org/1999/xhtml"
xml:lang="en-US"
lang="en-US">
<head profile="http://www.w3.org/2005/10/profile">
<link rel="icon"
type="image/png"
href="/somewhere/myicon.png" />
[…]
</head>
[…]
</html>
Περισσότερα μπορείτε να δείτε στα παρακάτω χρήσιμα links:
ΧΡΗΣΙΜΗ ΠΛΗΡΟΦΟΡΙΑ: Το άρθρο Η σημασία των Favicons γράφτηκε από το WebDesignBlog. Η ομάδα μας σας υπενθυμίζει πως αν θέλετε να ενημερώνεστε για τα νέα του διαδικτύου και για επιλεγμένα άρθρα μας, μπορείτε να γραφτείτε εύκολα στο Newsletter μας ή στο RSS Feed μας.
