24Ιούν

Η σημασία των Favicons

, 24 Ιουνίου 2008 | WEBSITE TIPS | 7 Σχόλια

Σίγουρα θα έχετε παρατηρήσει πως κάποια 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 μας.

Ο Σπύρος Παπασπυρόπουλος είναι βραβευμένος Web Professional που δραστηριοποιείται στον χώρο του επαγγελματκού Web Design και του Search Engine Optimisation (SEO) από το 1999. Το 2004 ίδρυσε μαζί με τον Γιάννη Ευσταθίου την βραβευμένη εταιρία x2interactive Web Agency και το 2008 το Web Design Blog.

7 comments so far

  • spdd Says: Ιούνιος 24, 2008 at 10:16 πμ

    Μια πολύ καλή online εφαρμογή η οποία σε λίγα βήματα σου φτιάχνει το favicon για το site σας, είναι το http://favikon.com/

    Αφού δώσεις το URL του image που θέλεις να έχεις ως πρότυπο του favicon σου, ή εναλλακτικά το κάνεις upload από τον υπολογιστή σου, εμφανίζεται στη δεξιά περιοχή, όπου σου επιτρέπει να κάνεις crop την περιοχή που θέλεις να δημιουργηθεί (στις σωστές αναλογίες).

    Μόλις είσαι ευχαριστημένος με το αποτέλεσμα, πατάς το Capture & Preview και το favicon σου είναι έτοιμο. Μπορείς να το κάνεις download στον υπολογιστή σου και παράλληλα σου δίνει και το σωστό κώδικα για να τον ενσωματώσεις στις σελίδες σου.

    Επίσης, η υπηρεσία αυτή είναι δωρεάν! :)
    Enjoy (and be creative)!

    Απάντηση
  • Σπύρος Παπασπυρόπουλος | Internet Specialist Says: Ιούνιος 24, 2008 at 10:33 πμ

    Thanks @spdd! :)
    Πολύ καλό φαίνεται το site που μοιράστηκες μαζί μας! Γλυτώνεις χρόνο από αρκετές μη παραγωγικές ενέργειες, δίνοντας έτσι σημασία μόνο στο δημιουργικό κομμάτι του Favicon.
    Είναι ένα site που αξίζει να μπει στα favorites κάθε web designer.

    Απάντηση
  • Ιωάννης Α. Says: Ιούλιος 1, 2008 at 9:23 μμ

    γεια χαρά σας,
    πολύ ωραίο το webdesignblog , διαβάζοντας το άρθρο σας εδώ, έχω μια απορία καλύτερα είναι να χρη/ούμε .png ή .ico ;

    Είναι κλειστό standart το ico μήπως ;

    Δώστε μια απάντηση ,
    μετά τιμής ευχαριστώ

    Απάντηση
  • Ιωάννης Α. Says: Ιούλιος 1, 2008 at 9:36 μμ

    + κάτι άλλο ποιό σωστό είναι να γράφουμε :

    link rel=»shortcut icon» href=»favicon.ico» type=»image/x-icon»

    ή

    link rel=»icon» type=»image/png» href=»http://example.com/myicon.png»

    ?

    Απάντηση
  • Σπύρος Παπασπυρόπουλος | Internet Specialist Says: Ιούλιος 2, 2008 at 11:00 πμ

    Αγαπητέ Ιωάννη,

    Σχετικά με το .png ή το .ico format προτείνουμε την χρήση του .ico γιατί υποστηρίζεται και από παλαιότερους browser σε αντίθεση με το .png format που υποστηρίζεται τα τελευταία χρόνια.

    Όσον αφορά την σύνταξη αν αναφέρεσαι σε HTML 4.01 doctype, τότε το πιο σωστό είναι το:

    link rel=”icon” type=”image/png” href=http://example.com/myicon.png”.

    Σύμφωνα με τα Web Standards πρέπει να δηλώνεται με rel. Λεπτομέρειες σχετικά μπορείς να δεις στο http://www.w3.org/2005/10/howto-favicon.

    Απάντηση
  • Silverthan Says: Ιούλιος 8, 2008 at 9:40 πμ

    To «profile=»http://www.w3.org/2005/10/profile» χρειάζεται? Δουλεύει και χωρίς…

    Απάντηση
  • Σπύρος Παπασπυρόπουλος | Internet Specialist Says: Ιούλιος 8, 2008 at 10:37 πμ

    Ο παραπάνω κώδικας είναι από τα W3 και είναι σύμφωνος με τα Web Standards που ορίζει το http://www.w3.org. Σε περίπτωση που επιθυμείς να αφαιρέσεις μια γραμμή κώδικα και αυτή η ενέργεια δεν επηρεάζει το validation σου, τότε δεν βρίσκουμε λόγο γιατί να μην μπορείς να το κάνεις. Η τελική απόφαση βέβαια είναι πάντα δική σου.

    Απάντηση

Σχολιάστε

Back to top

Recent comments

  • Ευχαριστούμε για το σχόλιο Ευγενία. Δυστυχώς δεν γνωρίζουμε αν υπάρχει παρόμοια γραμματοσειρά με την ENGLAND HAND στα Ελληνικά.

    10 δωρεάν καλλιγραφικές γραμματοσειρές
  • Πολύ χρήσιμο άρθρο. Ο αλγόριθμος της Google εξελίσσεται και μαζί του και η τέχνη του seo. Θα έλεγα ότι ωθεί τους seo experts σε μια πιο ολιστική προσέγγιση της online παρουσίας των πελατών τους. Αυτο σημαίνει ότι θα πρέπει να εμπλακούν σε θέματα content strategy, branding και social media γιατί η Google συνυπολογίζει όλα αυτά όταν αποφασίζει για το ranking μιας ιστοσελίδας. Ειδικά το content είναι το κλειδί στην νέα εποχή του search engine optimization. Θα πρέπει να δημιουργείται έχοντας στο μυαλό μας κυρίως τον επισκέπτη της ιστοσελίδας μας και λιγότερο τις μηχανές αναζήτησης. Θα πρέπει να προσθέτει πραγματικό value στους αναγνώστες του και ιδεατά να έχει χαρακτηριστικά που να συμβάλλουν στη δημιουργία buzz στα social media. Με τον τρόπο αυτό θα δημιουργηθούν με φυσικό τρόπο

    Google Panda 3.3, Google Venice και 38 επιπλέον αλλαγές στον αλγόριθμο της Google

Latest From Twitter