Χωρίς μεταφόρτωση, 100% τοπικά, χωρίς λογαριασμό

Γεννήτρια Favicon

Ανεβάστε το λογότυπο ή εικονίδιό σας και λάβετε όλα τα τυπικά μεγέθη favicon ως PNG. Περιλαμβάνει Apple Touch Icon και εικονίδια PWA. Τίποτα δεν εγκαταλείπει τη συσκευή σας.

Πώς λειτουργεί το Γεννήτρια favicon

Το Favicon Generator παίρνει οποιαδήποτε εικόνα παρέχετε και την αλλάζει σε μέγεθος στις τυπικές διαστάσεις favicon χρησιμοποιώντας το Canvas drawImage API: 16x16, 32x32, 48x48, 180x180 (εικονίδιο αφής Apple), 192x192 (Android Chrome) και 512x512 (μανιφέστο PWA). Και τα έξι μεγέθη δημιουργούνται στο πρόγραμμα περιήγησής σας, μαζί με ένα favicon.ico πολλαπλών μεγεθών που συνδυάζει τις εικόνες 16x16, 32x32 και 48x48 σε ένα ενιαίο παλαιού τύπου αρχείο. Η εικόνα πηγής σας δεν φεύγει ποτέ από τη συσκευή σας.

Ένα πλήρες σύνολο favicon καλύπτει το πλήρες εύρος εικονιδίων καρτέλας προγράμματος περιήγησης, σελιδοδεικτών, συντομεύσεων αρχικής οθόνης και οθονών εκκίνησης PWA. Η χρήση μιας εικόνας πηγής υψηλής ανάλυσης (τουλάχιστον 512x512 εικονοστοιχεία) δίνει στον αλγόριθμο υποβάθμισης την περισσότερη λεπτομέρεια για να δουλέψει. Οι ετικέτες σύνδεσης HTML που χρειάζεστε για να αναφέρετε κάθε δημιουργημένο αρχείο εμφανίζονται σε ένα απόσπασμα που μπορείτε να αντιγράψετε απευθείας στο στοιχείο head της σελίδας σας.

Συγγραφή από Bastien Sulyan

Γεννήτρια favicon: οδηγός βήμα προς βήμα

  1. Ρίξτε την εικόνα πηγής σας στην περιοχή μεταφόρτωσης. Χρησιμοποιήστε μια τετράγωνη εικόνα στα 512 px ή μεγαλύτερη για καλύτερα αποτελέσματα.
  2. Κάντε προεπισκόπηση των έξι δημιουργημένων μεγεθών στον πίνακα αποτελεσμάτων.
  3. Κατεβάστε τα έξι αρχεία PNG και το favicon.ico από τον πίνακα αποτελεσμάτων.
  4. Αντιγράψτε το απόσπασμα HTML που δείχνει τις ετικέτες σύνδεσης για όλα τα μεγέθη.
  5. Τοποθετήστε τα αρχεία PNG στη ρίζα του ιστότοπού σας και επικολλήστε τις ετικέτες σύνδεσης στο head της σελίδας σας.

Συνήθεις περιπτώσεις χρήσης

  • Ένας προγραμματιστής στήνει έναν νέο ιστότοπο και χρειάζεται όλα τα μεγέθη favicon δημιουργημένα από το λογότυπο της μάρκας χωρίς συνδρομή σε εργαλείο σχεδίασης.
  • Ένας συγγραφέας PWA δημιουργεί τα εικονίδια 192x192 και 512x512 που απαιτούνται στο μανιφέστο της εφαρμογής ιστού για εγκατάσταση στην αρχική οθόνη.
  • Ένας blogger ανανεώνει την ταυτότητα του ιστότοπού του και αντικαθιστά το προεπιλεγμένο favicon με ένα προσαρμοσμένο εικονίδιο φτιαγμένο από το λογότυπό του.
  • Ένας ελεύθερος επαγγελματίας παράγει γρήγορα το πλήρες σύνολο favicon για ένα έργο πελάτη χωρίς να περιμένει να εγκαταστήσει λογισμικό σχεδίασης εκτός σύνδεσης.

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

Ποιες μορφές εικόνας μπορώ να χρησιμοποιήσω ως πηγή;

Οποιαδήποτε μορφή μπορεί να αποκωδικοποιήσει το πρόγραμμα περιήγησης λειτουργεί ως είσοδος: JPEG, PNG, WebP, GIF και SVG. Για πηγές SVG, το πρόγραμμα περιήγησης ραστεροποιεί το διάνυσμα σε ένα Canvas πριν την αλλαγή μεγέθους, οπότε τα PNG εξόδου είναι εικόνες ράστερ ανεξαρτήτως.

Γιατί το favicon μου είναι θολό στην καρτέλα του προγράμματος περιήγησης;

Τα μεγέθη 16x16 και 32x32 είναι πολύ μικρά. Αν η εικόνα πηγής περιέχει λεπτές λεπτομέρειες ή λεπτές γραμμές, αυτές δεν θα επιβιώσουν στην υποβάθμιση. Ένα απλό, έντονο σχέδιο με καθαρά σχήματα λειτουργεί πολύ καλύτερα σε μικρά μεγέθη από μια σύνθετη εικονογράφηση.

Δημιουργεί το εργαλείο αρχεία ICO;

Ναι. Εκτός από τα έξι PNG, το εργαλείο συναρμολογεί ένα favicon.ico που περιέχει τις εικόνες 16x16, 32x32 και 48x48 σε ένα ενιαίο αρχείο, το οποίο ακόμη αναζητούν στη ρίζα του ιστότοπου τα παλαιότερα προγράμματα περιήγησης Windows και ορισμένα crawlers. Τα σύγχρονα προγράμματα περιήγησης είναι ικανοποιημένα με τους συνδέσμους PNG, οπότε η δημοσίευση και των δύο δεν κοστίζει τίποτα και αφήνει κάθε πελάτη να διαλέξει.

Επεξεργάζεται η εικόνα πηγής σε διακομιστή;

Όχι. Οι κλήσεις Canvas drawImage που παράγουν κάθε μέγεθος τρέχουν στην καρτέλα του προγράμματος περιήγησής σας. Η εικόνα πηγής διαβάζεται από τον τοπικό σας δίσκο και οι έξι έξοδοι PNG δημιουργούνται στη μνήμη και προσφέρονται για λήψη. Κανένα δεδομένο αρχείου δεν περνά μέσα από διακομιστή.

Ποιο μέγεθος να χρησιμοποιήσω για το εικονίδιο αφής Apple;

Το iOS και το iPadOS χρησιμοποιούν το PNG 180x180 εικονοστοιχείων που αναφέρεται από την ετικέτα σύνδεσης apple-touch-icon. Αυτό το μέγεθος χρησιμοποιείται όταν ένας χρήστης προσθέτει τον ιστότοπό σας στην αρχική του οθόνη σε μια συσκευή Apple. Το εργαλείο δημιουργεί αυτό το αρχείο μαζί με τα άλλα μεγέθη.

Μπορώ να χρησιμοποιήσω μια ορθογώνια εικόνα ως πηγή;

Ναι, αλλά η έξοδος θα τοποθετηθεί σε πλαίσιο με κενά πάνω και κάτω ή αριστερά και δεξιά για να χωρέσει στον τετράγωνο καμβά. Για καλύτερα αποτελέσματα, ξεκίνα με μια τετράγωνη εικόνα ή περίκοψε την εικόνα πηγής σε τετράγωνο πριν χρησιμοποιήσεις το εργαλείο.

Σχετικά εργαλεία

Κρατήστε τα πάντα τοπικά, εξερευνήστε συμπληρωματικά εργαλεία.

Όλα τα εργαλεία εικόνας