Δημιουργήστε ένα πλήρες πακέτο favicon από ένα λογότυπο, ένα εικονίδιο γραμματοσειράς ή ένα μονόγραμμα — favicon.ico, σύγχρονα PNG, εικονίδιο Apple touch, εικονίδια PWA, manifest ιστού και απόσπασμα HTML.

Ανεβάστε ένα λογότυπο, επιλέξτε ένα εικονίδιο γραμματοσειράς ή πληκτρολογήστε ένα μονόγραμμα — δημιουργούμε κάθε favicon που χρειάζεται ένας σύγχρονος ιστότοπος: από το κλασικό favicon.ico έως το εικονίδιο Apple touch, τα εικονίδια PWA και ένα έτοιμο για επικόλληση απόσπασμα HTML.

Αφήστε ένα PNG εδώ ή κάντε κλικ για μεταφόρτωση
Συνιστάται διαφανές PNG · δέχεται επίσης JPG / WebP
64%
Χρώμα φόντου
0%
Χρησιμοποιείται από το περιβάλλον του περιηγητή και το manifest PWA.
Ο ιστότοπός σας
example.com
Σελιδοδείκτης · 32px
Apple touch · 180px
PWA · 512px

Το πακέτο favicon σας είναι έτοιμο
Η λήψη του ZIP ξεκίνησε. Αποσυμπιέστε το στη ρίζα του ιστότοπού σας και επικολλήστε το απόσπασμα HTML στο <head> σας.

Σχετικά με το Δημιουργός Favicon

Ο Favicon Generator δημιουργεί κάθε εικονίδιο που χρειάζεται ένας σύγχρονος ιστότοπος από μία πηγή: ανεβάστε ένα λογότυπο PNG, επιλέξτε ένα εικονίδιο γραμματοσειράς ή πληκτρολογήστε ένα μονόγραμμα. Το πακέτο περιλαμβάνει το κλασικό favicon.ico (16, 32 και 48 px), σύγχρονα favicon PNG, το Apple touch icon 180 px, εικονίδια PWA 192 και 512 px, ένα site.webmanifest και το απόσπασμα HTML head.

Η στυλιστική επεξεργασία γίνεται μέσα στο εργαλείο: επιλέξτε χρώμα φόντου ή κρατήστε διαφάνεια, περικόψτε σε τετράγωνο, στρογγυλεμένο ή κυκλικό σχήμα, ρυθμίστε το padding και το μέγεθος του artwork, και ορίστε το χρώμα θέματος που χρησιμοποιεί το UI του browser και το manifest του PWA. Μια ζωντανή προεπισκόπηση δείχνει το εικονίδιό σας σε πραγματικά πλαίσια — μια καρτέλα browser 16 px, έναν σελιδοδείκτη, το πλακίδιο Apple touch και ένα εικονίδιο PWA.

Όλα αποδίδονται σε ένα canvas στο browser σας, και το Generate συγκεντρώνει ολόκληρο το πακέτο σε ένα ZIP με ένα README. Η εγκατάσταση γίνεται σε δύο βήματα: αποσυμπιέστε στη ρίζα του ιστότοπού σας και επικολλήστε το παρεχόμενο απόσπασμα στο <head> σας.

Πώς να χρησιμοποιήσετε το Δημιουργός Favicon

  1. Επιλέξτε την πηγή σας: ανεβάστε ένα λογότυπο PNG, επιλέξτε ένα εικονίδιο γραμματοσειράς ή πληκτρολογήστε ένα μονόγραμμα.
  2. Στυλίστε το — χρώμα φόντου ή διαφάνεια, σχήμα, padding και μέγεθος artwork.
  3. Συμπληρώστε το όνομα του ιστότοπου, το σύντομο όνομα και το χρώμα θέματος για το manifest PWA.
  4. Ελέγξτε τις προεπισκοπήσεις: καρτέλα browser, σελιδοδείκτης, Apple touch και πλαίσια PWA.
  5. Κάντε κλικ στο "Generate favicons" και αποσυμπιέστε το πακέτο στη ρίζα του ιστότοπού σας.
  6. Επικολλήστε το απόσπασμα HTML από το πακέτο στο <head> της σελίδας σας.

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

Ναι — το πλήρες πακέτο, συμπεριλαμβανομένου του .ico, όλων των μεγεθών PNG, του manifest και του αποσπάσματος HTML, δημιουργείται και κατεβαίνει δωρεάν.

favicon.ico με επίπεδα 16, 32 και 48 px, σύγχρονα favicon PNG, το apple-touch-icon 180 px, εικονίδια PWA 192 και 512 px, ένα site.webmanifest, το έτοιμο προς επικόλληση απόσπασμα HTML και ένα README με βήματα εγκατάστασης.

Ναι. Οι browsers και οι crawlers ακόμα ζητούν το /favicon.ico ως εναλλακτική λύση, και παλαιότεροι clients βασίζονται σε αυτό. Το πακέτο το περιλαμβάνει μαζί με τους σύγχρονους συνδέσμους PNG ώστε κάθε επισκέπτης να παίρνει ένα καθαρό εικονίδιο.

Αποσυμπιέστε το αρχείο στη ρίζα του ιστότοπού σας ώστε τα αρχεία να βρίσκονται στη ρίζα του domain, και μετά επικολλήστε το παρεχόμενο απόσπασμα HTML στο <head> των σελίδων σας. Το README μέσα στο ZIP επαναλαμβάνει αυτά τα βήματα.

Γράφεται στο manifest και στις ετικέτες meta, χρωματίζοντας το UI του browser σε κινητά και την οθόνη εκκίνησης και τη γραμμή τίτλου του εγκατεστημένου PWA ώστε να ταιριάζουν με το brand σας.

Ναι. Πληκτρολογήστε ένα μονόγραμμα ενός ή δύο γραμμάτων και επιλέξτε γραμματοσειρά και χρώματα, ή διαλέξτε ένα glyph από τη βιβλιοθήκη εικονιδίων γραμματοσειράς — ο generator το αποδίδει σε κάθε μέγεθος ακριβώς όπως ένα ανεβασμένο λογότυπο.

Κοινοποίηση

Δημοφιλείς αναζητήσεις
δημιουργία favicon favicon.ico maker δημιουργία favicon online apple touch icon δημιουργία εικονιδίου PWA favicon από λογότυπο
Χρειάζεστε βοήθεια;
Βρήκατε πρόβλημα με αυτό το εργαλείο; Ενημερώστε μας.
Αναφορά προβλήματος

Προσθέστε αυτό το δωρεάν εργαλείο στον δικό σας ιστότοπο — αντιγράψτε και επικολλήστε τον παρακάτω κώδικα.