Αρχική
Δωρεάν εργαλείο

Favicon generator: όλα τα εικονίδια της ιστοσελίδας σας σε ένα ZIP

Ανεβάστε το λογότυπό σας ή γράψτε ένα-δύο γράμματα. Δείτε πώς φαίνεται στην καρτέλα του browser, σε φωτεινό και σκούρο θέμα, και κατεβάστε το favicon.ico, τα PNG, το εικονίδιο για iPhone και Android και τον κώδικα HTML για την ιστοσελίδα σας.

Από τι θα φτιαχτεί
Γραμματοσειρά

Ένας ή δύο χαρακτήρες: το αρχικό της επιχείρησης, δύο αρχικά ή ένα emoji.

Φόντο
Χρώμα γραμμάτων
Σχήμα

Προεπισκόπηση

Η ιστοσελίδα σας
Φωτεινό θέμα browser
Η ιστοσελίδα σας
Σκούρο θέμα browser
iPhone
Android
Πραγματικό μέγεθος

Το ZIP περιέχει: favicon.ico (16, 32, 48), PNG 16, 32 και 48, apple-touch-icon 180, εικονίδια 192 και 512 για Android, site.webmanifest και ένα README με τον κώδικα.

Κώδικας για το <head>

Ανεβάστε τα αρχεία στον κεντρικό φάκελο της ιστοσελίδας και βάλτε αυτές τις γραμμές μέσα στο <head>.

<link rel="icon" href="/favicon.ico" sizes="16x16 32x32 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" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#2f5bd6">

Στο WordPress δεν χρειάζεται κώδικας: Εμφάνιση → Προσαρμογή → Ταυτότητα ιστότοπου → Εικονίδιο ιστότοπου, και ανεβάστε το icon-512.png.

  • Φτιάχνεται στον browser σας
  • Η εικόνα δεν ανεβαίνει πουθενά
  • Πραγματικό favicon.ico
Τι είναι

Τι είναι το favicon και γιατί χρειάζεστε περισσότερα από ένα

Το favicon είναι το μικρό εικονίδιο δίπλα στον τίτλο της σελίδας σας: στην καρτέλα του browser, στους σελιδοδείκτες, στο ιστορικό, και στα αποτελέσματα της Google στο κινητό. Είναι συχνά το πρώτο σημάδι της επωνυμίας σας που βλέπει κάποιος.

Κάθε σημείο θέλει άλλο μέγεθος: 16 και 32 pixels για την καρτέλα, 180 για το iPhone όταν κάποιος προσθέτει τη σελίδα στην αρχική οθόνη, 192 και 512 για το Android. Εδώ τα φτιάχνετε όλα μαζί από μία εικόνα, μαζί με τον κώδικα που τα συνδέει.

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

  1. 1

    Ανεβάζετε λογότυπο ή γράφετε γράμματα

    PNG, JPG, SVG ή WebP, ή ένα-δύο αρχικά με το χρώμα της επιχείρησής σας.

  2. 2

    Ρυθμίζετε σχήμα και φόντο

    Τετράγωνο, στρογγυλεμένο ή κύκλος, με διάφανο ή χρωματιστό φόντο.

  3. 3

    Ελέγχετε την προεπισκόπηση

    Σε φωτεινή και σκούρα καρτέλα browser, γιατί ένα σκούρο λογότυπο σε διάφανο φόντο χάνεται στο σκούρο θέμα.

  4. 4

    Κατεβάζετε και ανεβάζετε

    Το ZIP στον κεντρικό φάκελο της ιστοσελίδας και τις γραμμές HTML στο <head>.

Γιατί να το κάνετε

Γιατί αξίζει ένα σωστό favicon

  • Σας βρίσκουν ανάμεσα στις καρτέλες

    Με δέκα καρτέλες ανοιχτές, οι τίτλοι κόβονται και μένει μόνο το εικονίδιο. Χωρίς favicon, η σελίδα σας είναι ένα γκρι κενό.

  • Εμφανίζεται στη Google

    Στα αποτελέσματα αναζήτησης η Google δείχνει το favicon δίπλα στο όνομα της ιστοσελίδας. Ένα καθαρό εικονίδιο κάνει το αποτέλεσμα να μοιάζει πιο αξιόπιστο.

  • Επαγγελματική εικόνα

    Το προεπιλεγμένο εικονίδιο του WordPress ή του κατασκευαστή της σελίδας δείχνει ότι κάτι έμεινε μισό. Το δικό σας δείχνει φροντίδα.

Τι παίρνετε

Ένα πλήρες σετ εικονιδίων για κάθε browser και κινητό

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

  • Για την καρτέλα του browser

    Τα μικρά μεγέθη, εκεί που το εικονίδιο φαίνεται συνέχεια.

    • favicon.ico με 16, 32 και 48 pixels μέσα
    • PNG 16×16, 32×32 και 48×48
    • SVG favicon αν ανεβάσετε SVG

  • Για iPhone και Android

    Όταν κάποιος προσθέτει τη σελίδα στην αρχική οθόνη.

    • apple-touch-icon 180×180 με συμπαγές φόντο
    • Εικονίδια 192×192 και 512×512
    • site.webmanifest με όνομα και χρώμα

  • Έτοιμο για ανέβασμα

    Όλα σε ένα αρχείο, με οδηγίες.

    • Ένα ZIP με όλα τα αρχεία
    • Οι γραμμές HTML για το <head>
    • Οδηγίες και για WordPress
Συχνές ερωτήσεις

Για το favicon

Τι μέγεθος πρέπει να έχει το favicon;

Δεν υπάρχει ένα μέγεθος. Η καρτέλα του browser δείχνει 16×16 ή 32×32, το iPhone θέλει 180×180 και το Android 192×192 και 512×512. Γι' αυτό το εργαλείο φτιάχνει όλα τα μεγέθη από μία εικόνα. Ξεκινήστε από ένα τετράγωνο λογότυπο τουλάχιστον 512×512 ή από SVG.

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

Ναι, αξίζει να υπάρχει. Πολλά εργαλεία, προγράμματα RSS και παλιότεροι browsers ζητούν απευθείας το /favicon.ico χωρίς να διαβάσουν τον κώδικα της σελίδας. Το favicon.ico που φτιάχνουμε εδώ περιέχει τρία μεγέθη (16, 32 και 48 pixels), ώστε κάθε πρόγραμμα να διαλέγει το κατάλληλο.

Ανέβασα νέο favicon αλλά βλέπω ακόμα το παλιό. Γιατί;

Οι browsers κρατούν το favicon στη μνήμη τους για καιρό. Ανοίξτε τη σελίδα σε ιδιωτικό παράθυρο για να δείτε το νέο. Στα αποτελέσματα της Google η αλλαγή φαίνεται όταν η Google ξαναπεράσει από την αρχική σας σελίδα, κάτι που μπορεί να πάρει από μέρες έως λίγες εβδομάδες.

Πώς βάζω favicon στο WordPress;

Από το διαχειριστικό: Εμφάνιση → Προσαρμογή → Ταυτότητα ιστότοπου → Εικονίδιο ιστότοπου. Ανεβάστε το icon-512.png από το ZIP και το WordPress φτιάχνει μόνο του τα υπόλοιπα μεγέθη. Σε θέματα με επεξεργαστή ιστότοπου, η ίδια ρύθμιση βρίσκεται στο μπλοκ «Λογότυπος ιστότοπου».

Ανεβαίνει κάπου η εικόνα μου;

Όχι. Η εικόνα επεξεργάζεται μέσα στον browser σας και τα αρχεία φτιάχνονται στη συσκευή σας. Καταγράφουμε μόνο ότι χρησιμοποιήθηκε το εργαλείο, με τις ρυθμίσεις και το όνομα του αρχείου, όχι την ίδια την εικόνα.

Το favicon είναι η αρχή. Η υπόλοιπη εικόνα σας;

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

Επικοινωνήστε μαζί μας