Τετάρτη, 21 Ιανουαρίου 2009

Print this post

ΠΩΣ ΝΑ ΦΤΙΑΞΕΤΕ FAVICONS

Σήμερα θα δούμε πως μπορούμε να δημιουργήσουμε favicons. Τι είναι τα favicons; Είναι τα εικονίδια που εμφανίζονται δίπλα στη μπάρα διευθύνσεων. Επίσης όταν σ' ένα φυλλομετρητή (browser) έχουμε δύο και παραπάνω καρτέλες ανοιγμένες τα favicons εμφανίζονται και εκεί Δείτε τις εικόνες ακριβώς από κάτω (κλικ για να τις μεγενθύνετε):


Ένα site στο internet όπου μπορούμε να κατεβάσουμε έτοιμα favicons στατικά και animated είναι το ICONJ. Αλλά κακά τα ψέματα όλοι θέλουμε να έχουμε κάτι μοναδικό που δε χρησιμοποιείται από άλλον. Για να επιτευχθεί αυτό πρέπει να το δημιουργήσουμε οι ίδιοι. Το site που προανέφερα μας δίνει και αυτή τη δυνατότητα όπως και hosting (φιλοξενία) για τα εικονίδια μας.
Για να δημιουργήσουμε ένα favicon πρέπει να έχουμε κάποιο πρόγραμμα επεξεργασίας φωτογραφίας. Όσοι έχουν το Photoshop, το PhotoImpact ή οποιοδήποτε άλλο πρόγραμμα μπορούνε να ξεκινήσουν αμέσως. Όσοι δεν έχουν και δε θέλουν να πληρώσουν για να αγοράσουν κάποιο, υπάρχει και το Picasa της Google το οποίο είναι δωρεάν μπορείτε να το κατεβάσετε από εδώ. Υπάρχουν πολλές δωρεάν εφαρμογές που μπορείτε να βρείτε μέσω της μπάρας αναζήτησης της Google ή αν αγοράζετε περιοδικά για computers θα βρείτε άφθονα στα DVDs που δίνουν.
Για να δημιουργήσουμε το favicon πρέπει να δημιουργήσουμε λογαριασμό στο ICONJ. Μετά πρέπει να δημιουργήσουμε ένα εικονίδιο διαστάσεων 16x16px (pixels) με το πρόγραμμα επεξεργασίας εικόνας που έχουμε στον υπολογιστή μας. Μετά τη δημιουργία του το σώζουμε (save) κάπου που είναι εύκολο να το βρούμε. Εφόσον είμαστε στο ICONJ και έχουμε κάνει login κάνουμε upload το εικονίδιο που δημιουργήσαμε προηγουμένως. Μετά από μερικά δευτερόλεπτα αναμονής το εικονίδιο μας έχει σηκωθεί στο site. Στα δεξιά πατάμε το κουμπί Get Code και εκεί βλέπουμε τον κώδικα που πρέπει να κάνουμε αντιγραφή - επικόληση (copy-paste) στον κώδικα του template μας.
Μπαίνουμε μέσα στο λογαριασμό του blogspot και από τον πανόπτη πάμε διάταξη και επεξεργασία HTML. Πρώτα παίρνουμε ένα αντίγραφο ασφαλείας του κώδικα μας (Back Up). Βρίσκουμε (CTRL+F) το </head> και ακριβώς πριν απ' αυτό κάνουμε επικόλληση των κώδικα που πήραμε από το ICONJ. Πατάμε προεπισκόπηση και βλέπουμε τ' αποτελέσματα. Αν μας ικανοποιούν πατάμε αποθήκευση (save) και τέλος.
Άλλο ένα site για favicons είναι το myfavatar το οποίο δουλεύει με παρόμοιο τρόπο.

20 σχόλια:

  1. @ntebis Ουπς... Κεκτημένη ταχύτητα. Το διορθώνω αμέσως.

    ΑπάντησηΔιαγραφή
  2. Γιατί δεν τα καταφέρνω; Δοκίμασα με τον τρόπο που προτείνεις, δοκίμασα με έναν άλλο πάλι δεν φαίνεται!!

    ΑπάντησηΔιαγραφή
  3. @Our Greek tv Κάτι κάνεις λάθος. Εγώ με τον ίδιο τρόπο το έβαλα σε τρία blogs και άλλα άτομα το έκανα επίσης. Μόλις βρεις το /head> κάνε κλικ αμέσως ΠΡΙΝ απ' αυτό και πάτα μια φορά το enter. Το κομμάτι του κώδικα που προανέφερα πήγε μια γραμμή παρακάτω. Εκεί που βρισκόταν το τελευταίο (/head>) κάνε copy-paste τον κώδικα του favicon που δημιούργησες. Πάτα προεπισκόπηση για να δεις. Μετά αποθήκευση και τέλος.

    ΑπάντησηΔιαγραφή
  4. Xeretismata apo tin Kipro! Apo oti katalava kapoia favicons den litourgoun sto explorer 7 giati kai egw oses fores dokimasa den leitourgousan sto PC mou omws se kapoio allo PC litourgoun. Entometa3i einai poli oraio to tag cloud sas pragmatika en8ousiastika me auto! An den einai diskolo mporeite na grayete ton kwdiko HTML kai pws mporoume na to ftia3oume.

    ΑπάντησηΔιαγραφή
  5. @Ver@ Την καλησπέρα μου στο πανέμορφο νησί της Αφροδίτης. Αφόσον σου άρεσε τόσο πολύ το tag cloud η αυριανή ανάρτηση θα έχει θέμα αυτό το tag cloud.

    ΑπάντησηΔιαγραφή
  6. @Ver@ Ξ'εχασα να σου απαντήσω σχετικά με τα favicons. Η αλήθεια είναι ότι ο ΙΕ7 και γενικότερα ο ΙΕ συμπεριφέρεται όπως να 'ναι. Καλύτερα να χρησιμοποιείς Mozilla Firefox.

    ΑπάντησηΔιαγραφή
  7. Ίσως φοβάμαι μην κάνω καμιά βλακεία στα html αλλά προφανώς κάτι κάνω λάθος! Να σου στείλω με την πρώτη ευκαιρία mail εκτενέστερα αν μπορείς;

    ΑπάντησηΔιαγραφή
  8. @Our Greek tv Φυσικά... στείλε όποτε θέλεις.

    ΑπάντησηΔιαγραφή
  9. Euxaristw para poli hackaday! Episis 8a itan poli kalitera an ipirxe to gadget me tous anagnostes tou blog (ektos an iparxei kai den to prose3a). 8a itan poli pio eukolo na parakolou8oume to blog auto apo ton panopti tou blogger. Sigxaritiria einai para poli endiaferon to blog locusblogus!

    ΑπάντησηΔιαγραφή
  10. @Ver@ Το gadget προς το παρόν δεν υπάρχει. Το blog υπάρχει μόνο μια εβδομάδα οπότε κάποιες αλλαγές θα υπάρξουν στο προσεχές μέλλον. Σ' ευχαριστώ για τα καλά σου λόγια.

    ΑπάντησηΔιαγραφή
  11. Για μια εβδομάδα ύπαρξης του blog είναι πολύ καλά φαντάζομαι σε ένα χρόνο πώς θα είναι το blog! Ευχαριστώ και εγώ για τις συμβουλές και εύχομαι καλή συνέχεια!

    ΑπάντησηΔιαγραφή
  12. Γεια χαρά. Προσπάθησα πολλές φορές αλλά δεν κατάφερα να κανω την εικόνα να φαίνεται κινούμενη. Ούτε αυτή -ξέρω, είναι μεγάλη- αλλά ούτε και κάποια άλλη μικρότερη. Any help???
    thanx πάντως για τις πληροφορίες...

    ΥΓ. όταν λέω μικρη κάτι τέτοιο , εννοώ !!! :(
    Μου εμφανίζει την πρώτη εικόνα αλλά στάσιμη...

    ΑπάντησηΔιαγραφή
  13. @miliokas Αν την πήρες από site για favicons πρέπει να κάνεις ότι λέει. Αν την βρήκες αλλού πρέπει να την ανεβάσεις πρώτα στο ICONJ αλλά ως animation.

    ΑπάντησηΔιαγραφή
  14. μάλλον κάτι δεν κάνω καλά.. το άφησα "ακίνητο" δες, αν θέλεις να μου πεις..
    και πάλι θενξ για το χρόνο σου

    ΑπάντησηΔιαγραφή
  15. @miliokas Sorry που άργησα να απαντήσω αλλά μόλις τώρα βρήκα ευκαιρία. Μπήκα στο blog σου (πολύ καλό. έκανα αναφορά γι' αυτό στο άλλο μου blog το ΘΕΜΑ αν δε σε πειράζει) και είδα. Δεν ξέρω τι ακριβώς κάνεις στον κώδικα και από που πήρες το εικονίδιο. Δοκίμασες να κάνεις κλικ στο κουτάκι δίπλα στην επέκταση γραφικών στοιχείων; Να θυμάσαι να παίρνεις πάντα back up του template σου πριν κάνεις οτιδήποτε.

    ΑπάντησηΔιαγραφή
  16. Ok δεν πειράζει, μέχρι να βρω που κάνω λάθος θα τ' αφήσω έτσι...
    όσο για το άλλο -την αναφορα- όχι δε με πειράζει, άλλωστε πρώτη φορά μου συμβαίνει.. και δεν ξέρω πως να αισ8αν8ώ :D :D

    ΑπάντησηΔιαγραφή
  17. @miliokas Η διαύθυνση για να δεις την αναφορά που έκανα στο blog σου είναι: http://hackaday-thema.blogspot.com/2009/01/bloggers.html

    ΑπάντησηΔιαγραφή

back to top