Δημιουργία favicon
Μετατρέψτε μια απλή εικόνα σε ένα ιστότοπο πίνακα εικονίδιο (favicon) και πακέτο ιστότοπου εικονιδίου. Βεβαιωθείτε ότι το σχέδιο παραμένει αναγνωρίσιμο σε μικρά μεγέθη, κατεβάστε τα αρχεία και ακολουθήστε το παράδειγμα εγκατάστασης που περιλαμβάνεται.
Πριν ξεκινήσεις
- Εισαγωγή
- Ένα JPG, PNG ή στατική WebP εικόνα.
- ΕΞΕΛΙΞΗ
- Ένα ZIP με ICO, PNG εικονίδια, ένα manifest και HTML παράδειγμα.
Το εργαλείο φόρτισης...
Πώς να χρησιμοποιήσετε αυτό το εργαλείο
- Επιλέξτε μια JPG, PNG ή στατική WebP εικόνα.
- Καλλιεργήστε σε ένα τετραγωνικό ή προσθέστε πατινγκ και ελέγξτε τις προβολές του εικονιού.
- Κατεβάστε το ZIP και προσαρμόστε τα παραδείγματα δρόμων στον ιστότοπό σας.
Κατανοήστε το αποτέλεσμα
Ένα εικονίδιο καρτέλ ιστότοπου (favicon) εμφανίζεται συχνά σε πολύ μικρό μέγεθος. Ένα σαφές σύμβολο ή γράμμα συνήθως λειτουργεί καλύτερα από ένα λεπτομερές έργο τέχνης ή μικρό κείμενο. Τα γεννημένα αρχεία εξακολουθούν να πρέπει να ανεβάζονται και να αναφέρονται από τον ιστότοπό σας.
Γιατί το εικονίδιο καρτέλ της ιστοσελίδας μου (favicon) μοιάζει μπλε ή πολύ μικρό;
Ένα ευρύ σήμα ή μια λεπτομερή φωτογραφία μπορεί να γίνει απαράδεκτη σε ένα μικρό πρόγραμμα περιήγησης κάρτα. Ξεκινήστε με ένα απλό τετραγωνικό σύμβολο και ελέγξτε τις πραγματικές προβολές 16-pixel και 32-pixel. Το Padding διατηρεί την πλήρη πηγή, αλλά μπορεί να αφήσει ένα ευρύ λογότυπο πολύ μικρό. τετραγωνική κούρεμα γεμίζει το εικονίδιο και μπορεί να κόψει τα άκρα του. Ελέγξτε και τις δύο επιλογές πριν εγκαταστήσετε το αποτέλεσμα.
Ποια αρχεία ετικέτας ιστοσελίδας (favicon) πρέπει να ανεβάσω στην ιστοσελίδα μου;
Το ZIP περιλαμβάνει favicon.ico, PNG icons, apple-touch-icon.png, site.webmanifest and install.html.txt Για παράδειγμα, το link tags. Πρώτα αφαιρέστε το αρχείο. η λήψη του ZIP μόνο δεν εγκαθιστά το εικονίδιο. Τα παραδείγματα μονοπάτια υποθέτουν ότι τα αρχεία βρίσκονται στην ρίζα της ιστοσελίδας. Προσαρμόστε αυτά τα μονοπάτια για ένα άλλο φάκελο, ή χρησιμοποιήστε τη ρύθμιση του εικονικού τοποθεσίας της πλατφόρμας σας, στη συνέχεια ελέγξτε την δημοσιευμένη σελίδα και το cache της.
Δοκιμάστε ένα δείγμα
Δοκιμάστε ένα πρωτότυπο δείγμα για να ελέγξετε την υποστηριζόμενη ροή εργασίας. Ένα επιτυχημένο δείγμα δεν είναι εγγύηση για κάθε εισαγωγή.
Πρωτότυπο δείγμα εικόνας ↓Αν το αποτέλεσμα δεν είναι αυτό που περιμένετε
Η ιστοσελίδα εξακολουθεί να εμφανίζει το παλιό εικονίδιο.
Η δημιουργία αρχείων δεν τα εγκαθιστά. Ελέγξτε τις διευθύνσεις URL του εικονιού και τη σήμανση της σελίδας, στη συνέχεια διαγράψτε το cache της τοποθεσίας και δοκιμάστε μια νέα συνεδρία του προγράμματος περιήγησης. Το πρόγραμμα περιήγησης και τα εικονίδια αποτελεσμάτων αναζήτησης μπορούν να ενημερωθούν σε διαφορετικές ώρες.
Επόμενο Χρήσιμο εργαλείο: Μετατροπή SVG σε PNG →Σημαντικά όρια
- Εισαγωγή εικόνας μόνο. μετατρέψτε ένα SVG σε PNG πρώτα.
- Το εργαλείο δεν αλλάζει τη διαμόρφωση της ιστοσελίδας σας.
- Ελέγξτε τη δική σας ιστοσελίδα μετά την εγκατάσταση των εικονιών, επειδή η συμπεριφορά caching και πλατφόρμα μπορεί να διαφέρουν.
- Μέγιστο 10 MB 12 εκατομμύρια pixels. Η έξοδο περιλαμβάνει ICO, PNG εικονίδια, ένα webmanifest και παράδειγμα HTML σε ένα ZIP.
Συχνές ερωτήσεις
Αυτό θα εγκαταστήσει το εικονίδιο καρτέλ ιστοσελίδας (favicon) στον ιστότοπό μου;
ΟΧΙ Ετοιμάζει αρχεία και ένα παράδειγμα. Κατεβάστε τα αρχεία και ενημερώστε τις διαδρομές ή τις ρυθμίσεις της ιστοσελίδας σας.
Το πακέτο κάνει την ιστοσελίδα μου ένα PWA;
ΟΧΙ Τα αρχεία εικονίδων και ένα βασικό webmanifest είναι μόνο μέρος μιας εγκατάστασης web app.
Γιατί το λογότυπό μου είναι δύσκολο να διαβάσει σε 16 pixel;
Οι λεπτομέρειες μπορεί να εξαφανιστούν σε αυτό το μέγεθος. Δοκιμάστε ένα απλούστερο σύμβολο, μια ισχυρότερη μορφή ή περισσότερο χώρο γύρω από το σήμα.
Σχετικές Οδηγίες
Ερωτήσεις ή διορθώσεις; mrkcal@mrkcal.com