Τετάρτη, 25 Μαρτίου 2015

Δημιουργία favicon

Το favicon είναι το εικονίδιο της ιστοσελίδας μας, αυτό που εμφανίζεται στις καρτέλες του browser όταν ανοίγει κάποιος το site μας. Για να έχει η σελίδα μας λοιπόν μία πιο επαγγελματική όψη, καλό θα είναι να αντικαθιστούμε το default favicon του joomla με το δικό μας.












Πριν ξεκινήσουμε φυσικά, θα πρέπει να έχουμε δημιουργήσει ένα favicon, το οποίο (αν και δεν είναι απαραίτητο), καλό θα είναι να δημιουργηθεί από το logo μας. Η συμβουλή μου είναι να μην φορτώνετε το συγκεκριμένο εικονίδιο με πολλά γράμματα ή πολύπλοκα σχέδια, μιας και οι διαστάσεις του είναι πολύ μικρές και το τελικό αποτέλεσμα στον Browser θα είναι μάλλον απογοητευτικό. Ακολουθήστε έναν λιτό σχεδιασμό, λίγα και έντονα χρώματα (2-3 χρωματισμοί maximum) και λίγους χαρακτήρες.

Υπάρχουν αρκετές ιστοσελίδες που δημιουργούν favicon από δικές μας φωτογραφίες που κάνουμε εμείς upload, ο τρόπος που προτιμώ εγώ όμως είναι μέσω photoshop.

Ανοίξτε λοιπόν το photoshop και δημιουργήστε ένα νέο project με διαστάσεις 48x48. 


Στη συνέχεια ανοίξτε μια φωτογραφία (προφανώς το logo της ιστοσελίδας σας) και σύρετε την μέσα στο project σας. Στη συνέχεια προσαρμόστε το μέγεθος της ώστε να χωρέσει ακριβώς. Αποθηκεύστε την σαν .jpg και στη συνέχεια απλά αλλάξτε την επέκταση του αρχείου σε .ico και είστε έτοιμοι!


Επόμενο βήμα είναι να ανεβάσουμε το favicon στον φάκελο του template του joomla που χρησιμοποιούμε. Στα tutorial που διαβάζετε χρησιμοποιώ το template protostar που εγκαθίσταται μαζί με το joomla, άρα θα πρέπει να βάλω το Favicon μου μέσα στο φάκελο του συγκεκριμένου template. Όλα τα templates που εγκαθιστάτε στο joomla, βρίσκονται μέσα στον φάκελο templates της ιστοσελίδας σας.


Αφού βρούμε το Template που χρησιμοποιούμε και ανοίξουμε τον φάκελο, θα δούμε πως μέσα υπάρχει ήδη ένα favicon με την ονομασία favicon.ico. Δίνουμε το ίδιο όνομα στο δικό μας και απλά αντικαθιστούμε αυτό που υπάρχει εκεί και είμαστε έτοιμοι!


Κάντε έναν καθαρισμό της cache του browser που χρησιμοποιείτε για πρόσβαση στον ίντερνετ, ανοίξτε την ιστοσελίδα σας και θα δείτε το favicon να εμφανίζεται.


Δεν υπάρχουν σχόλια:

Δημοσίευση σχολίου