Δημιουργία favicon για ιστότοπους

Όλα τα εικονίδια που χρειάζεται ο ιστότοπός σας, από το λογότυπό σας και έτοιμα για ανέβασμα.

Άλλα εργαλεία: JPEG σε JPG Συμπίεση JPG Συμπίεση PNG Συμπίεση WebP Αλλαγή μεγέθους εικόνας Περικοπή εικόνας Ένωση εικόνων Συγχώνευση PDF Συμπίεση PDF Διαχωρισμός PDF Εξαγωγή εικόνων από PDF Περιστροφή PDF

Επιλέξτε την εικόνα PNG, JPG, WebP ή SVG

Ένα αρχείο τη φορά, έως 20 MB.

Προσαρμογή σε τετράγωνο

Προσαρμογή Ολόκληρη η εικόνα Γέμισμα Κόβει τις άκρες

Τα εικονίδια είναι τετράγωνα. Αν η εικόνα σας δεν είναι, επιλέξτε αν θα φαίνεται ολόκληρη (με διάφανα περιθώρια) ή θα γεμίζει το τετράγωνο.

Χρώμα φόντου

Για το εικονίδιο της Apple, που δεν μπορεί να είναι διάφανο, και ως χρώμα θέματος στο Android.

Τα αρχεία σας διαγράφονται αυτόματα μετά τη μετατροπή και το αργότερο μία ώρα μετά τη μεταφόρτωση. Πώς χειριζόμαστε τα αρχεία σας

Φτιάξτε ένα πλήρες favicon για τον ιστότοπό σας από το λογότυπό σας: το εικονίδιο της καρτέλας του browser, τα εικονίδια για την αρχική οθόνη σε iPhone και Android, το manifest και τον κώδικα HTML που τα συνδέει. Ανεβάστε μια εικόνα PNG, JPG, WebP ή SVG και κατεβάστε ένα ZIP με όλα, χωρίς λογαριασμό και χωρίς υδατογράφημα.

Πώς να δημιουργήσετε ένα favicon

Επιλέξτε το λογότυπο ή το εικονίδιό σας σε PNG, JPG, WebP ή SVG· ιδανικά τετράγωνο και τουλάχιστον 512 pixel.
Επιλέξτε αν η εικόνα θα φαίνεται ολόκληρη ή θα γεμίζει το τετράγωνο, και το χρώμα φόντου για το εικονίδιο της Apple.
Πατήστε «Δημιουργία favicon» και κατεβάστε το ZIP.
Ανεβάστε τα αρχεία στον βασικό φάκελο του ιστότοπου και επικολλήστε τον κώδικα του head.html στην ετικέτα head των σελίδων σας.

Τι περιέχει το πακέτο

Αρχείο	Σε τι χρησιμεύει
`favicon.ico`	Το κλασικό εικονίδιο της καρτέλας, με τα μεγέθη 16, 32 και 48 pixel σε ένα αρχείο. Οι browser το αναζητούν ακόμη κι αν δεν το δηλώσετε.
`favicon-16x16.png` και `favicon-32x32.png`	Τα εικονίδια για καρτέλες και σελιδοδείκτες στους σύγχρονους browser.
`apple-touch-icon.png`	Το εικονίδιο 180 pixel που χρησιμοποιούν το iPhone και το iPad όταν ο ιστότοπός σας προστίθεται στην αρχική οθόνη.
`android-chrome-192x192.png` και `android-chrome-512x512.png`	Τα εικονίδια για Android και για εγκαταστάσιμες διαδικτυακές εφαρμογές.
`site.webmanifest`	Το manifest που δηλώνει τα εικονίδια Android και το χρώμα του ιστότοπού σας.
`head.html`	Οι ετικέτες που συνδέουν τα εικονίδια από τις σελίδες σας.

Πώς το εγκαθιστάτε στον ιστότοπό σας

Αποσυμπιέστε το αρχείο και ανεβάστε όλα τα αρχεία, εκτός από το head.html, στον βασικό φάκελο του ιστότοπου (εκεί όπου βρίσκεται η αρχική σελίδα).
Αντιγράψτε αυτές τις ετικέτες, που υπάρχουν και στο head.html, μέσα στην ετικέτα head των σελίδων σας:

<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

Αν θέλετε, γράψτε το όνομα του ιστότοπου στα name και short_name του site.webmanifest.

Οι browser κρατούν το favicon στην προσωρινή μνήμη: αν δεν δείτε αμέσως το νέο, ανανεώστε πλήρως τη σελίδα ή περιμένετε λίγο.

Προσαρμογή ή γέμισμα

Όλα τα εικονίδια είναι τετράγωνα. Αν η εικόνα σας δεν είναι, μπορείτε να την προσαρμόσετε, ώστε να φαίνεται ολόκληρη με διάφανα περιθώρια, ή να την αφήσετε να γεμίσει το τετράγωνο, οπότε κόβεται ό,τι περισσεύει στις άκρες. Για ένα οριζόντιο λογότυπο με κείμενο, συνήθως λειτουργεί καλύτερα να χρησιμοποιήσετε μόνο το σύμβολο του λογότυπου, περικομμένο σε τετράγωνο.

Το εικονίδιο της Apple δεν μπορεί να είναι διάφανο: το iOS θα γέμιζε το φόντο με μαύρο. Γι’ αυτό το φτιάχνουμε με το χρώμα φόντου που επιλέγετε, που χρησιμοποιείται και ως χρώμα του ιστότοπού σας στο Android. Τα υπόλοιπα εικονίδια κρατούν τη διαφάνειά τους.

Συμβουλές για καλό αποτέλεσμα

Ξεκινήστε από μεγάλη εικόνα, τουλάχιστον 512 × 512 pixel, ή ακόμη καλύτερα από SVG: τα μικρά εικονίδια υπολογίζονται από αυτήν.
Κρατήστε το απλό: στα 16 pixel δεν διαβάζεται κείμενο ούτε φαίνονται λεπτές λεπτομέρειες. Ένα σύμβολο ή ένα αρχικό γράμμα σε χρώματα με αντίθεση λειτουργεί πολύ καλύτερα.

Αν χρειάζεστε μόνο το αρχείο .ico, μπορείτε να μετατρέψετε το PNG σε ICO.

Περιορισμοί

Μία εικόνα τη φορά, έως 20 MB και 100 megapixel.
Δεν αλλάζουμε τον ιστότοπό σας: πρέπει εσείς να ανεβάσετε τα αρχεία και να προσθέσετε τις ετικέτες, ή να το ζητήσετε από όποιον τον διαχειρίζεται.

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

Τι μέγεθος πρέπει να έχει η εικόνα για να φτιάξω favicon;

Όσο μεγαλύτερη τόσο καλύτερα: τουλάχιστον 512 × 512 pixel, ή ένα SVG. Όλα τα εικονίδια, από 512 έως 16 pixel, υπολογίζονται από αυτήν.

Πού ανεβάζω τα αρχεία του favicon;

Στον βασικό φάκελο του ιστότοπου, τον ίδιο φάκελο με την αρχική σελίδα. Μετά επικολλήστε τις ετικέτες του head.html στην ετικέτα head των σελίδων σας.

Γιατί δεν βλέπω το νέο favicon στον browser μου;

Επειδή οι browser κρατούν το favicon στην προσωρινή μνήμη. Ανανεώστε πλήρως τη σελίδα, ανοίξτε τη σε ιδιωτικό παράθυρο ή περιμένετε λίγο να ενημερωθεί.

Γιατί το εικονίδιο της Apple έχει χρωματιστό φόντο;

Επειδή το iOS δεν υποστηρίζει διαφάνεια στα εικονίδια της αρχικής οθόνης και θα γέμιζε το φόντο με μαύρο. Το φτιάχνουμε με το χρώμα φόντου που επιλέγετε, ώστε να φαίνεται ωραίο.

Μπορώ να φτιάξω το favicon του ιστότοπού μου στο WordPress;

Το WordPress έχει δική του επιλογή, το «Εικονίδιο ιστότοπου» (στο Εμφάνιση › Προσαρμογή › Ταυτότητα ιστότοπου ή, ανάλογα με την έκδοση και το θέμα, στις γενικές ρυθμίσεις): ανεβάζετε μια τετράγωνη εικόνα και τα μεγέθη δημιουργούνται αυτόματα. Το πακέτο αυτού του εργαλείου είναι για ιστότοπους όπου μπορείτε να ανεβάσετε αρχεία και να επεξεργαστείτε τον κώδικα.