RSS

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

21 Ιαν.

Σήμερα θα δούμε πως μπορούμε να δημιουργήσουμε 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 το οποίο δουλεύει με παρόμοιο τρόπο.

Advertisements
 
20 Σχόλια

Posted by στο Ιανουαρίου 21, 2009 in FAVATAR, FAVICONS, HACK, ICONJ, PICASA

 

20 responses to “ΠΩΣ ΝΑ ΦΤΙΑΞΕΤΕ FAVICONS

  1. ntebis

    Ιανουαρίου 21, 2009 at 5:08 μμ

    ee hacka nomizo oti ekanes ena lathaki einai back up

     
  2. hackaday

    Ιανουαρίου 21, 2009 at 5:39 μμ

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

     
  3. Our Greek tv

    Ιανουαρίου 22, 2009 at 5:55 μμ

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

     
  4. hackaday

    Ιανουαρίου 22, 2009 at 6:04 μμ

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

     
  5. Ver@

    Ιανουαρίου 22, 2009 at 6:57 μμ

    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.

     
  6. hackaday

    Ιανουαρίου 22, 2009 at 7:52 μμ

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

     
  7. hackaday

    Ιανουαρίου 22, 2009 at 8:04 μμ

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

     
  8. Our Greek tv

    Ιανουαρίου 22, 2009 at 8:27 μμ

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

     
  9. hackaday

    Ιανουαρίου 22, 2009 at 8:34 μμ

    @Our Greek tv Φυσικά… στείλε όποτε θέλεις.

     
  10. Ver@

    Ιανουαρίου 23, 2009 at 12:37 μμ

    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!

     
  11. hackaday

    Ιανουαρίου 23, 2009 at 12:44 μμ

    @Ver@ Το gadget προς το παρόν δεν υπάρχει. Το blog υπάρχει μόνο μια εβδομάδα οπότε κάποιες αλλαγές θα υπάρξουν στο προσεχές μέλλον. Σ’ ευχαριστώ για τα καλά σου λόγια.

     
  12. Ver@

    Ιανουαρίου 23, 2009 at 1:30 μμ

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

     
  13. miliokas

    Ιανουαρίου 24, 2009 at 1:31 πμ

    Γεια χαρά. Προσπάθησα πολλές φορές αλλά δεν κατάφερα να κανω την εικόνα να φαίνεται κινούμενη. Ούτε αυτή -ξέρω, είναι μεγάλη- αλλά ούτε και κάποια άλλη μικρότερη. Any help???thanx πάντως για τις πληροφορίες…ΥΓ. όταν λέω μικρη κάτι τέτοιο , εννοώ !!! :(Μου εμφανίζει την πρώτη εικόνα αλλά στάσιμη…

     
  14. hackaday

    Ιανουαρίου 24, 2009 at 1:37 πμ

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

     
  15. miliokas

    Ιανουαρίου 24, 2009 at 5:22 μμ

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

     
  16. hackaday

    Ιανουαρίου 24, 2009 at 7:32 μμ

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

     
  17. miliokas

    Ιανουαρίου 24, 2009 at 10:49 μμ

    Ok δεν πειράζει, μέχρι να βρω που κάνω λάθος θα τ’ αφήσω έτσι…όσο για το άλλο -την αναφορα- όχι δε με πειράζει, άλλωστε πρώτη φορά μου συμβαίνει.. και δεν ξέρω πως να αισ8αν8ώ 😀 😀

     
  18. hackaday

    Ιανουαρίου 24, 2009 at 11:59 μμ

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

     
  19. Διομηδης

    Φεβρουαρίου 20, 2010 at 7:42 μμ

    thanx!

     
  20. hackaday

    Φεβρουαρίου 20, 2010 at 7:44 μμ

    @Διομήδης you 're welcome!

     

Σχολιάστε

Εισάγετε τα παρακάτω στοιχεία ή επιλέξτε ένα εικονίδιο για να συνδεθείτε:

Λογότυπο WordPress.com

Σχολιάζετε χρησιμοποιώντας τον λογαριασμό WordPress.com. Αποσύνδεση / Αλλαγή )

Φωτογραφία Twitter

Σχολιάζετε χρησιμοποιώντας τον λογαριασμό Twitter. Αποσύνδεση / Αλλαγή )

Φωτογραφία Facebook

Σχολιάζετε χρησιμοποιώντας τον λογαριασμό Facebook. Αποσύνδεση / Αλλαγή )

Φωτογραφία Google+

Σχολιάζετε χρησιμοποιώντας τον λογαριασμό Google+. Αποσύνδεση / Αλλαγή )

Σύνδεση με %s

 
Αρέσει σε %d bloggers: