Δημιουργία & εισαγωγή favicon χωρίς plugin στο site σας

Ιάκωβος Φρούντας 596 views0

Δημιουργία & εισαγωγή favicon χωρίς plugin στο site σας
Μοιράσου το

Δημιουργία Favicon

Το Favicon είναι το εικονίδιο που εμφανίζεται στα αριστερά του τίτλου της σελίδας που περιηγούμαστε στο παράθυρο του φυλλομετρητή μας.
Μπορεί να δημιουργηθεί χρησιμοποιώντας ένα οποιοδήποτε πρόγραμμα επεξεργασίας/δημιουργίας εικόνας όπως είναι το GIMP, το οποίο δίνει την δυνατότητα αποθήκευσης .ico αρχείων δωρεάν.

Η εικόνα πρέπει να είναι καθαρή και συνήθως σχεδιάζεται για να ταιριάζει με την γενική εικόνα του blog σας και του περιεχομένου σας.

Η προετοιμασία της εικόνας για την δημιουργία του εικονιδίου favicon.ico

  1. Δημιουργούμε μια νέα εικόνα και της δίνουμε τετράγωνο σχήμα.
  2. Επεξεργαζόμαστε το μέγεθος της εικόνας να είναι 16 x 16 pixels.
  3. Σώζουμε το αρχείο με την ονομασία favicon.ico.

Εάν χρησιμοποιείτε κάποιο online πρόγραμμα δημιουργίας favicon όπως το Dynamic Drive ή το favicon.co.uk ακολουθήστε τις οδηγίες που σας δίνει η εκάστοτε σελίδα και αγνοήστε όλα τα παραπάνω.

favicon-demo

Εγκατάσταση του favicon σε σελίδα WordPress

Εάν υπάρχει ήδη ενα αρχείο favicon.ico στον κύριο φάκελο της εγκατάστασης σας τότε διαγράψτε το χρησιμοποιώντας κάποιον FTP Client.

  1. Με τη βοήθεια ενός FTP Client ανεβάστε το αρχείο favicon.ico στον κύριο φάκελο της εγκατάστασης του θέματος της σελίδας WordPress σας. (π.χcom/wp-content/themes/example-theme/favicon.ico)
  2. Ανεβάστε ένα αντίγραφο του favicon.ico στον κύριο φάκελο της εγκατάστασής σας (π.χ. http://example.com/favicon.ico). Αυτό το εικονίδιο θα εμφανίζεται στους αναγνώστες σας.

Στην περίπτωση που θέλετε να εμφανιστεί το favicon σε πιο παλιές εκδόσεις περιηγητών χρειάζεται να επεξεργαστείτε το αρχείο header.php μέσα στο θέμα που χρησιμοποιείτε

  1. Πηγαίνετε στην περιοχή διαχείρισης του WordPress site σας .
  2. Κάνετε κλικ στο Appearance.
  3. Κάνετε κλικ στο Theme Editor.
  4. Επιλέγετε το αρχείο με την ονομασία Headerή php για να το επεξεγραστείτε.
  5. Ψάχνετε για την γραμμή κώδικα που αρχίζει με <link rel=”shortcut icon”και τελειώνει με /favicon.ico” />. Συμπληρώστε την ήδη υπάρχουσα εντολή με τον παρακάτω κώδικα προσέχοντας πάντα να την τοποθετήσουυμε κάτω απο την περιοχή <head>.
<link rel=”shortcut icon” href=”<?php echo get_stylesheet_directory_uri(); ?>/favicon.ico” />

Για να δείτε το νέο favicon.ico καθαρίστε την μνήμη cache απο τον περιηγητή σας. Πιθανόν να χρειαστεί και επανεκκίνηση του περιηγητή για να δείτε τις αλλαγές.

Πλεονεκτήματα χρήσης αρχείων .ico έναντι .png ή .gif

  1. Είναι συμβατό με όλους τους browser συμπεριλαμβανόμενου και του IE 5.0 ο οποίος περιέχει υποστήριξη για .ico αρχεία.
  2. Αποφεύγετε τα 404 λάθη – Όλοι οι μοντέρνοι περιηγητές (δοκιμασμένο με τον Chrome 4, Firefox 3.5, IE8, Opera 10 και Safari 4) συνήθως ζητάνε το αρχείο favicon.ico οπότε είναι καλύτερο για να αποφύγετε τα λάθη “404 page not found”.
  3. Ένα .ico αρχείο μπορεί να κρατήσει περισσότερες διαστάσεις απο ένα εικονίδιο, δεν χρειάζεται να υπάρχουν διπλότυπα αρχεία για εικονίδια  διαστάσεων 16×16 και 48×48 pixels.

Γιατί να μην χρησιμοποιήσω κάποιο Plugin για το Favicon;

Η γενική λογική που δουλεύουμε πάνω σε έναν ιστότοπο είναι να μην τον φορτώνουμε με περιττά πρόσθετα. Εάν ένας ιστότοπος χρησιμοποιεί πάρα πολλά πρόσθετα τότε ο χρόνος φόρτωσης του αυξάνεται σημαντικά πράγμα που απωθεί τους επισκέπτες και κάνει την σελίδα πολύ “βαριά”.

**Update

Μετά την έκδοση WordPress 4.3 η διαδικασία εισαγωγής favicon παρέχεται αυτόματα απο την πλατφόρμα.