Custom εικονίδιο για το blog σας (Favicon για τους χρήστες Blogspot)

Έχω μια τρέλα με τις σελίδες μου. Μου αρέσει να είναι περιποιημένες, προσεγμένες, και έχω σπαταλήσει πολλές πολλές ώρες με το να ασχολούμαι με την κάθε λεπτομέρεια. Κάτι που μου τη δίνει απίστευτα, είναι όταν κάποια πλατφόρμα μου δίνει περιορισμένες δυνατότητες τροποποίησης στη σελίδα μου. Γι αυτό έχω επιλέξει άλλωστε να χρησιμοποιώ WordPress σε server επι πληρωμή, ώστε να έχω την απόλυτη ελευθερία να επέμβω στη σελίδα και να την τροποποιήσω όπως εγώ θέλω. Εκτός απο το Stupidity.gr και το Συρτάρι, έχω δημιουργήσει και ένα blog στην πλατφόρμα του Blogger σαν photo gallery, όπου ανεβάζω διάφορες φωτογραφίες, κυρίως «καλλιτεχνικές» απόπειρες. (Για όποιον θέλει να το επισκεφθεί θα το βρείτε εδώ: «Through my eyes»).  Ευτυχώς οι χρήστες που έχουν blog της μορφής «.blogspot» έχουν τη δυνατότητα να επιλέξουν ανάμεσα σε εκατοντάδες έτοιμα themes που μπορούν πολύ εύκολα να εγκαταστήσουν και να ομορφύνουν τη σελίδα τους. Όσοι έχουν γνώσεις html μπορούν επίσης να πειράξουν πολλά πράγματα στην εμφάνιση της σελίδας μέσω του html editor.

Κάτι που θεωρώ πολύ σημαντικό σε ένα site, είναι το favicon. Τί είναι το favicon;.. Είναι ένα μικρό εικονίδιο που εμφανίζεται στον browser δίπλα στο url, εμφανίζεται στο tab της σελίδας, καθώς και στους σελιδοδείκτες μας δίπλα στον τίτλο του blog. Έχει διαστάσεις 16×16 pixels, και είναι της μορφής .ico, .png ή .gif. Ναι, χαίρω πολύ, όλοι τα έχετε δει. Απλώς το αναφέρω επειδή πολλοί δεν γνωρίζουν οτι αυτά τα εικονιδιάκια λέγονται «favicons». Είναι χρήσιμο να έχουμε ένα ξεχωριστό favicon για το blog μας και όχι το κλασσικό πορτοκαλί σηματάκι του blogspot, πρώτα απ’ όλα για λόγους αισθητικής. Απο τη στιγμή που βάζουμε ένα ωραίο theme στη σελίδα μας, είναι όμορφο στο μάτι το να προσθέσουμε και ένα σχετικό εικονίδιο να φαίνεται στον browser δίπλα στον τίτλο του blog μας. Επίσης, βοηθάει να ξεχωρίζει η σελίδα μας ανάμεσα στα bookmarks, στους RSS readers, όταν ένας χρήστης έχει πολλά ανοιχτά tabs, ή στα διάφορα blogrolls που τυχόν μας έχουν προσθέσει φίλοι. Τέλος, ένα όμορφο favicon παροτρύνει τον επισκέπτη να προσθέσει τη σελίδα μας στους σελιδοδείκτες του! Σήμερα λοιπόν που βελτίωσα λίγο την εμφάνιση της σελίδας μου στο Blogger, έψαξα να βρω έναν τρόπο να προσθέσω και ένα favicon, αφού η πλατφόρμα δεν δίνει έτοιμη αυτή την επιλογή. Έβγαλα άκρη τελικά, και είπα να μοιραστώ μαζί σας τον τρόπο, αφού πολλοί φίλοι μου και bloggers που διαβάζω χρησιμοποιούν την συγκεκριμένη πλατφόρμα και ίσως το βρουν ενδιαφέρον. Αρκετά σας κούρασα όμως με το μπλα-μπλα, στο ψητό:

Το Blogger παλιότερα επέτρεπε στους χρήστες να προσθέσουν favicon μέσω του html editor. Όμως κάποια στιγμή έγιναν αλλαγές, και πολλοί bloggers είδαν τα εικονίδιά τους να εξαφανίζονται. Υπάρχει όμως ακόμα συγκεκριμένη θέση μέσα στον κώδικα που μπορούμε να προσθέσουμε το εικονίδιο και να λειτουργήσει κανονικότατα. Για όσους δεν ασχολείστε με html μην σας τρομάζει καθόλου η λέξη «κώδικας», δεν χρειάζεται να κάνετε τίποτα πολύπλοκο. Ακολουθώντας τις οδηγίες και τις εικόνες παρακάτω μπορείτε πολύ εύκολα να προσθέσετε τις δύο γραμμές που χρειάζεται κάνοντας ένα απλό copy-paste.

1. Φυσικά θα χρειαστούμε ένα εικονίδιο. Βρείτε μια εικόνα που σας αρέσει, και με κάποιον image editor αλλάξτε τις διαστάσεις σε 16×16 pixels. Επειδή το εικονίδιο θα είναι πολύ μικρό, αν επιλέξετε κάποια μεγάλη φωτογραφία, με τη μετατροπή δεν θα φαίνεται τίποτα. Επιλέξτε κάποιο σύμβολο, κάποιο γράμμα, ή κάποιο απλό σήμα που θα φαίνεται καθαρά ακόμα και σε μικρό μέγεθος. Επίσης, φροντίστε η κατάληξη του αρχείου να είναι .ico, .png ή .gif. Κατα προτίμηση .png ή .gif, αφού είναι τύποι αρχείων που υποστηρίζουν πολλές υπηρεσίες και θα μπορείτε πιο εύκολα να τις κάνετε upload. Αν δεν θέλετε να μπείτε στη διαδικασία, με μια αναζήτηση στο google θα βρείτε πολλά έτοιμα favicons σε διάφορα site, τα οποία μπορείτε να κατεβάσετε δωρεάν.

2. Θα πρέπει να ανεβάσουμε το εικονίδιο σε κάποια υπηρεσία όπως flickr, photobucket, picassa, imageshack κλπ (ή φυσικά στον δικό του server όποιος έχει). Οι υπηρεσίες αυτές μας επιτρέπουν να ανεβάζουμε εικόνες, και μας δίνουν ένα link το οποίο μπορούμε να κάνουμε paste ωστε να εμφανίσουμε τις εικόνες μας σε blogs, forums κλπ. Κάνουμε λοιπόν upload το εικονίδιο, και κρατάμε το link που μας δίνει.

3. Ανοίγουμε το panel του Blogger, και πηγαίνουμε στην κατηγορία «Layout», στην καρτέλα «Edit ΗΤΜL» (Κατηγορία «Διάταξη», καρτέλα «Επεξεργασία HTML»). Καλό θα ήταν πριν πειράξουμε οτιδήποτε στον κώδικα, να κατεβάσουμε ένα backup απο την αντίστοιχη επιλογή, ώστε αν κάτι πάει στραβά να επαναφέρουμε το theme στην αρχική του κατάσταση.

4. Μέσα στον κώδικα, ψάχνουμε να βρούμε το σημείο που λέει ]]></b:skin>. Ανοίξτε απλώς την αναζήτηση του browser και γράψτε ]], θα το εντοπίσετε εύκολα.

Ακριβώς απο κάτω απο αυτή τη σειρά προσθέτουμε αυτές τις δύο γραμμές:

<link href='http://to-url-του-εικονιδίου.png' rel='shortcut icon'/>
<link href='http://to-url-του-εικονιδίου.png' rel='icon'/>

Φυσικά όπου λέει «to-url-του-εικονιδίου.png» εσείς θα προσθέσετε το δικό σας link, απο το εικονίδιο που κάνατε upload στο δεύτερο βήμα. Στα δύο παρακάτω screenshot μπορείτε να δείτε τη μορφή του κώδικα αρχικά, και τη μορφή που θα έχει ο κώδικας μετά την επικόλληση (με γαλάζιο είναι τονισμένες οι σειρές που προστέθηκαν):

Πατάμε αποθήκευση και είμαστε έτοιμοι, το πορτοκαλί σήμα του Blogger έχει αντικατασταθεί με το δικό σας custom favicon.

Ελπίζω όσοι bloggers χρησιμοποιείτε την πλατφόρμα του blogspot να βρείτε χρήσιμες τις σημερινές οδηγίες, και φυσικά μπορείτε να αφήσετε στα σχόλια οποιαδήποτε απορία ή δυσκολία συναντήσετε!
 
Update: Σε περίπτωση που αντιμετωπίσετε πρόβλημα με τον κώδικα, ίσως να ευθύνονται τα εισαγωγικά. Αν δεν λειτουργήσει κάνοντας copy-paste το παραπάνω, δοκιμάστε να το πληκτρολογήσετε μόνοι σας χρησιμοποιώντας μονά εισαγωγικά και ίσια ( ' ), και όχι τα πλάγια ( ΄ ). Thanks Εξύμνος!

Update 2: Πλέον το Blogger υποστηρίζει favicons και επισήμως. Μπορείτε λοιπόν απλώς να πάτε στις Ρυθμίσεις > Design > Page elements, και να ανεβάσετε από ‘κει το εικονίδιο που θέλετε.