tigtools

Γεννήτρια Favicon

Δημιουργήστε ένα πλήρες σύνολο favicon από το λογότυπό σας ή από ένα ή δύο γράμματα σε έγχρωμο φόντο και αντιγράψτε τις ετικέτες HTML. Τα εικονίδια δημιουργούνται στο πρόγραμμα περιήγησής σας.

Εκτελείται στον περιηγητή σας Χωρίς εγγραφή

Δημιουργία από

Ένας ή δύο χαρακτήρες δίνουν το καλύτερο αποτέλεσμα· χρησιμοποιούνται μόνο οι δύο πρώτοι.

62%
Σχήμα

Πώς να το χρησιμοποιήσετε

  1. Επιλέξτε Γράμματα και πληκτρολογήστε έναν ή δύο χαρακτήρες με τα χρώματά σας ή επιλέξτε Εικόνα και διαλέξτε ένα λογότυπο (ιδανικά τετράγωνο, τουλάχιστον 512 px).
  2. Ελέγξτε τις προεπισκοπήσεις κάθε μεγέθους, ειδικά των 16 και 32 px, που εμφανίζονται στις καρτέλες του προγράμματος περιήγησης.
  3. Κατεβάστε το ZIP και ανεβάστε τα αρχεία του στη ρίζα του ιστότοπού σας.
  4. Επικολλήστε τις ετικέτες HTML στην ενότητα head των σελίδων σας και προσαρμόστε το όνομα στο site.webmanifest αν χρειάζεται.

Πώς λειτουργεί

Οι περιηγητές και οι συσκευές αναζητούν εικονίδια σε διαφορετικά σημεία. Το σετ που δημιουργείται εδώ καλύπτει τις συνηθισμένες περιπτώσεις: favicon.ico με εικόνες 16, 32 και 48 px για καρτέλες περιηγητή, σελιδοδείκτες και παλαιότερο λογισμικό που ζητά αυτόματα το /favicon.ico· αρχεία PNG 16 και 32 px στα οποία παραπέμπουν ετικέτες link· ένα apple-touch-icon 180 × 180 που χρησιμοποιείται όταν κάποιος προσθέτει τον ιστότοπό σας στην αρχική οθόνη iPhone ή iPad· και εικονίδια 192 και 512 px στα οποία γίνεται αναφορά από το site.webmanifest για αρχικές οθόνες Android και εγκαταστάσιμες εφαρμογές web.

Το αρχείο favicon.ico αποθηκεύει τα εικονίδια ως εικόνες PNG μέσα σε ένα κοντέινερ ICO, το οποίο μπορούν να διαβάσουν όλοι οι σύγχρονοι περιηγητές και τα Windows Vista ή νεότερα. Τα αρχεία ICO και ZIP δημιουργούνται από κώδικα σε αυτή τη σελίδα· τίποτα δεν αποστέλλεται σε διακομιστή.

Τα μικρά μεγέθη απαιτούν απλό σχεδιασμό: στα 16 × 16 εικονοστοιχεία οι λεπτές γραμμές και το μικρό κείμενο χάνονται, οπότε ένα έντονο γράμμα ή ένα απλοποιημένο λογότυπο λειτουργεί καλύτερα από ένα πλήρες λογότυπο με λέξεις. Η εικόνα σμικρύνεται σε πολλά βήματα υψηλής ποιότητας. Το apple-touch-icon έχει πάντα συμπαγές χρώμα φόντου, επειδή το iOS γεμίζει τις διαφανείς περιοχές με μαύρο και στρογγυλεύει μόνο του τις γωνίες.

Μετά τη μεταφόρτωση νέων εικονιδίων, οι περιηγητές μπορεί να συνεχίσουν να εμφανίζουν το παλιό favicon για λίγο, επειδή το αποθηκεύουν επιθετικά στην κρυφή μνήμη. Η αναγκαστική ανανέωση ή το απευθείας άνοιγμα του /favicon.ico συνήθως βοηθά.

Παραδείγματα

Εικονίδιο με γράμμα για ένα νέο έργο

Πληκτρολογώντας "TG" με λευκά γράμματα σε σκούρο πράσινο στρογγυλεμένο τετράγωνο δίνει ένα καθαρό εικονίδιο που παραμένει ευανάγνωστο στα 16 × 16 px σε καρτέλα περιηγητή, χωρίς να απαιτείται σχεδιασμένο λογότυπο.

Εικονίδιο από υπάρχον λογότυπο

Ένα λογότυπο PNG 1024 × 1024 με διαφανές φόντο, με ρύθμιση «Προσαρμογή ολόκληρης της εικόνας», δημιουργεί διαφανή εικονίδια καρτέλας και ένα apple-touch-icon στο χρώμα της επωνυμίας σας.

Φαρδύ λογότυπο

Σε ένα λογότυπο κειμένου 1200 × 300, η περικοπή στο κέντρο κρατά μόνο τα μεσαία γράμματα. Η προσαρμογή ολόκληρης της εικόνας διατηρεί τα πάντα αλλά την κάνει πολύ μικρή· ένα ξεχωριστό τετράγωνο έμβλημα συνήθως φαίνεται καλύτερα.

Συχνές ερωτήσεις

Χρειάζεται ακόμα το favicon.ico;

Εξακολουθεί να είναι χρήσιμο. Ορισμένα προγράμματα περιήγησης, αναγνώστες ροών και εργαλεία ζητούν το /favicon.ico από τη ρίζα του ιστότοπου ακόμη και χωρίς ετικέτα link. Τα σύγχρονα προγράμματα περιήγησης χρησιμοποιούν επίσης τα εικονίδια PNG που αναφέρονται στο HTML.

Πού πρέπει να βάλω τα αρχεία;

Ανεβάστε τα στον ριζικό φάκελο του ιστότοπού σας, δίπλα στην αρχική σελίδα, ώστε να λειτουργούν το /favicon.ico και οι υπόλοιπες διαδρομές στον HTML. Αν χρησιμοποιήσετε υποφάκελο, αλλάξτε τις διαδρομές στις ετικέτες link και στο site.webmanifest.

Γιατί εξακολουθεί να εμφανίζεται το παλιό μου favicon;

Τα προγράμματα περιήγησης αποθηκεύουν τα favicon στην προσωρινή μνήμη ξεχωριστά και για μεγάλο διάστημα. Δοκιμάστε μια πλήρη ανανέωση, ανοίξτε το /favicon.ico σε νέα καρτέλα ή ελέγξτε σε ιδιωτικό παράθυρο. Η μετονομασία των αρχείων, για παράδειγμα favicon-v2.ico, επιβάλλει επίσης επαναφόρτωση.

Δημιουργεί αυτό ένα favicon SVG;

Όχι. Δημιουργεί αρχεία PNG και ICO, τα οποία λειτουργούν παντού. Αν έχετε ήδη λογότυπο SVG, μπορείτε να το προσθέσετε μόνοι σας με μια ετικέτα link τύπου image/svg+xml επιπλέον αυτών των αρχείων.

Απόρρητο

Τα εικονίδια, το αρχείο ICO και το ZIP δημιουργούνται στο πρόγραμμα περιήγησής σας. Η εικόνα και το κείμενό σας δεν μεταφορτώνονται, δεν αποθηκεύονται ούτε περιλαμβάνονται στα αναλυτικά στοιχεία.