Κάποια επισκέπτρια του blog, μου έστειλε ένα email όπου με ρωτούσε πώς κατάφερα να αλλάξω το εικονίδιο ( του Blogger, αυτο το πορτοκαλί ΜΠΙ ) που εμφανίζεται στο πρόγραμμα περιήγησης πριν από την διεύθυνση URL του Blog.
Τι είναι το Favicon.ico.
Όταν ένας επισκέπτης πληκτρολογεί μια διεύθυνση στον σελιδοδείκτη του ( Opera, Safari, Firefox, IE), υπάρχει η πιθανότητα δίπλα από την διεύθυνση, στην μπάρα διευθύνσεων, να εμφανιστεί ένα εικονίδιο, το οποίο εικονίδιο ή θα είναι το default εικονίδιο του σελιδοδείκτη σας ή θα είναι ένα διαφορετικό εικονίδιο, το favicon.ico αρχείο εικόνας που έχει ορίσει ο διαχειριστής του website.
Πως δημιουργούμε το αρχείο Favicon.ico.
Αφού το Favicon.ico θα πρέπει να είναι ένα αρχείο εικόνας, τότε το μόνο που χρειάζεται ένα πρόγραμμα επεξεργασίας εικόνας ( π.χ. Photoshop, PaintShop....κτλ) για την δημιουργία του αρχείου.
Η εικόνα θα πρέπει να έχει μέγεθος 16 X 16 pixels.
Ναι, είναι πολύ μικρή εικόνα για ευνόητους λόγους.
Χωρίς να σημαίνει πως αν βάλετε λίγο μεγαλύτερη δεν θα την εμφανίζει.
Αν θέλετε, μπορείτε επίσης να δημιουργήσετε ένα εικονίδιο 32 X 32 pixel, το μέγεθος του οποίου θα μειωθεί αυτόματα από τον περιηγητή σας.
Μια άλλη λύση είναι....
Ακριβώς από κάτω από το Μενού μας υπάρχουν κάποιες σελίδες που κατά την γνώμη μου τις θεωρώ χρήσιμες & γι αυτό τις πρόσθεσα, για την δική σας βοήθεια!!
Λοιπόν πάτε στην Favicon Generator
Εκεί μπορείτε να δημιουργήσετε το εικονίδιο μέσα από 3-4 επιλογές.
Κατόπιν το περνάτε στο ιστολόγιό σας με την παρακάτω διαδικασία.
Για τις φίλες ή τους φίλους που δε γνωρίζουν πως να κάνουν resize μια εικόνα που τους αρέσει να χρησιμοποιήσουν για εικονίδιο & για αυτό σας έχουμε τη λύση.
Πάλι κάτω από το Μενού μας υπάρχει η σελίδα ResizR
Εκεί θα φορτώσετε την εικόνα σας είτε από τον υπολογιστή σας, είτε από το διαδίκτυο ( Σημείωση: η εικόνα θα πρέπει να είναι σε μορφή .jpg )
Και εκεί που λέει Image width: με την γλύστρα που έχει από κάτω αλλάζετε το πλάτος στο επιθυμητό.
Και πατάτε το ResizR.
Στην κορυφή της σελίδας θα σας δωσει την εικόνα έτοιμη.
Θα την αποθηκεύσετε στην επιφάνεια εργασίας σας.
Το επόμενο βήμα της προσάρτησης της εικόνας στην σελίδα σας, είναι να την ανεβάσετε σε κάποιον image hosting π.χ. tinypic για να πάρετε το direct link & να το περάσετε στον κώδικα που σα δίνω παρακάτω.
Για να το περάσετε θα κάνετε τα εξής απλά βήματα:
1. Θα κάνετε Login στο blog σας & θα μπείτε στον πανόπτη σας --> Διάταξη --> Επεξεργασία HTML
Κοντά στην αρχή θα δείτε μια γραμμή σαν αυτή:
<title><data:blog.pagetitle/></title>
2. Αντιγράψτε και εισάγεται κάτω απ’ αυτή την γραμμή τον παρακάτω κώδικα:
<link href="...direct link of your icon file..." rel="shortcut icon" type="image/vnd.microsoft.icon">
Εάν το αρχείο σας είναι διαφορετικού τύπου (png,ή gif), τότε θα πρέπει να χρησιμοποιήστε έναν από τους παρακάτω κωδικές:
PNG:
<link href="...direct link of your icon file..." rel="shortcut icon" type="image/png"/>
GIF:
<link href="...direct link of your icon file..." rel="shortcut icon" type="image/gif"/>
3. Τέλος πατήστε Προεπισκόπηση & αν δεν σας βγάλει κάποιο λάθος, πατήστε ΑΠΟΘΗΚΕΥΣΗ.
Και κάντε Ανανέωση την σελίδα σας.
OOOOO Πολύ καλό κολπάκι!!!
ΑπάντησηΔιαγραφήΠαλιό κολπάκι αλλά όμορφο. Γιατι δίνει την δυνατότητα να βάλει ο ιδιοκτήτης του blog ένα εικονιδιο που να τον εκφράζει & να ξεχωρίζει.
ΑπάντησηΔιαγραφήΘεώρησα σωστό να μην βάλω κάποια που υπάρχουν σε άλλα ιστολόγια & ρίξαμε το βάρος μαζί με την Σοφία σε πιο εξειδικευμενα tutorials που στα αντίστοιχα Ελληνικά δεν υπάρχουν.
Μόνο & μόνο να μην θεωρηθεί πως τους αντιγράφουμε & τους πάρει ο διάολος μετά.
Αλλά μ αυτά που ζητάτε δε μπορω να κάνω αλλιώς.
Χαίρομαι που σου αρέσει η σελίδα μας & έχεις βρει αρκετά χρήσιμα πραγματάκια.
Παιδια μια βοήθεια...εκανα την διαδικασια κανονικα αλλα δεν μου εμφανιζει την εικονα που εχω ορισει..
ΑπάντησηΔιαγραφή@ Administrator
ΑπάντησηΔιαγραφήΑφου φιλε μου δεν εχεις προσθέσει εικόνα, ΤΙ να σου εμφανισει????
Στο σημειο του κωδικα που λεει ...direct link of your icon file... θα πρεπει να βαλεις το direct link της εικονας που θες, αφου πρωτα την ανεβασεις σε καποιον image hosting
π.χ. tinypic , imageshack , picoodle , photobucket.
Καλη επιτυχια!