Ποια μεγέθη favicon χρειάζεστε το 2026; Το ιδανικό σετ

Το 2026 το ιδανικό σετ favicon είναι: ένα favicon.ico που περιέχει εικόνες 16, 32 και 48 px, ένα PNG 96x96 (για το Google Search), ένα προαιρετικό favicon SVG, ένα apple-touch-icon.png 180x180 και PNG 192x192 και 512x512 (μαζί με ένα maskable 512) δηλωμένα σε ένα web app manifest. Τα Windows tiles και τα παλαιότερα μεγέθη της Apple χρειάζονται μόνο αν πρέπει να υποστηρίξετε πολύ παλιές συσκευές. Παρακάτω εξηγούμε το γιατί, με πίνακα μεγεθών, έτοιμο προς χρήση HTML και συνηθισμένα λάθη που πρέπει να αποφύγετε.

Το τοπίο των favicon ήταν παλιότερα χαοτικό: κάθε πρόγραμμα περιήγησης και λειτουργικό σύστημα ζητούσε δικό του μέγεθος, κάτι που οδήγησε στα διαβόητα μπλοκ <head> των 20 γραμμών. Σήμερα το μεγαλύτερο μέρος αυτών έχει καταργηθεί. Τα σύγχρονα προγράμματα περιήγησης κλιμακώνουν ένα καλό εικονίδιο, το iOS θέλει ένα μόνο μέγεθος και το Android διαβάζει το manifest. Αυτό το άρθρο ξεχωρίζει ό,τι χρειάζεται πραγματικά από ό,τι είναι απλώς ευχάριστο να υπάρχει.

Η σύντομη απάντηση: το ιδανικό σετ αρχείων favicon

• favicon.ico (16, 32, 48 px σε ένα αρχείο) στον ριζικό φάκελο του site. Τα προγράμματα περιήγησης, οι αναγνώστες feed και πολλά εργαλεία εξακολουθούν να ζητούν αυτόματα το /favicon.ico.
• favicon.svg (προαιρετικό αλλά συνιστώμενο) για καθαρή απεικόνιση σε οποιοδήποτε μέγεθος και υποστήριξη σκούρου θέματος.
• PNG 16x16, 32x32 και 96x96 ως ρητές εναλλακτικές. Η έκδοση των 96 px βοηθά το Google Search, που απαιτεί πολλαπλάσιο των 48 px.
• apple-touch-icon.png στα 180x180, αδιαφανές, χωρίς διαφάνεια.
• PNG 192x192 και 512x512 στο manifest.json, μαζί με ένα maskable εικονίδιο 512x512 για το Android.
• Meta tag theme-color για την απόχρωση του περιβάλλοντος του προγράμματος περιήγησης σε κινητά.
• Windows tiles (70, 150, 310 px) με browserconfig.xml μόνο για παλαιότερα Windows και καρφιτσωμένα sites του IE11.

Πίνακας μεγεθών favicon: σκοπός, ονόματα αρχείων και προτεραιότητα

Χρησιμοποιήστε αυτόν τον πίνακα ως λίστα ελέγχου. Το «Απαραίτητο» σημαίνει ότι ένα κανονικό site θα φαίνεται σπασμένο ή ημιτελές χωρίς αυτό· το «Συνιστώμενο» σημαίνει σαφή βελτίωση ποιότητας· το «Προαιρετικό» σημαίνει εξειδικευμένη ή παλαιού τύπου χρήση.

favicon.ico: 16, 32 και 48 px σε ένα αρχείο

Ένα αρχείο ICO είναι ένα κοντέινερ που περιέχει αρκετές εικόνες bitmap. Ένα καλό favicon.ico περιλαμβάνει εικόνες 16x16, 32x32 και 48x48, ώστε το πρόγραμμα περιήγησης ή το λειτουργικό σύστημα να διαλέξει την πλησιέστερη. Τοποθετήστε το στη ρίζα του domain σας (https://example.com/favicon.ico). Ακόμη και αν η HTML σας δείχνει αλλού, πολλοί crawlers, αναγνώστες RSS και παλαιότερα προγράμματα περιήγησης εξακολουθούν να ζητούν ακριβώς αυτό το URL, οπότε η ύπαρξή του αποτρέπει τον θόρυβο 404 στα logs σας.

Μην μετονομάζετε απλώς ένα PNG σε .ico. Τα περισσότερα προγράμματα περιήγησης το ανέχονται, αλλά ορισμένα εργαλεία το απορρίπτουν και χάνετε το πλεονέκτημα της πολλαπλής ανάλυσης. Εξάγετε ένα πραγματικό ICO.

Favicon PNG: 16, 32 και 96 px

Οι συνδέσεις PNG με ρητό sizes επιτρέπουν στο πρόγραμμα περιήγησης να διαλέξει το καλύτερο bitmap χωρίς να αναλύσει το ICO. Στην πράξη το 32x32 καλύπτει τις καρτέλες υψηλής πυκνότητας και το 16x16 είναι σχεδόν περιττό σήμερα. Το μέγεθος 96x96 αξίζει να προστεθεί, επειδή το Google Search εμφανίζει favicon δίπλα στα αποτελέσματα και απαιτεί τετράγωνο εικονίδιο με μέγεθος πολλαπλάσιο των 48 px (48x48, 96x96, 144x144 κ.ο.κ.). Ένα αρχείο 96 px δίνει στο Google πιο καθαρή πηγή από ένα των 48 px όταν το σμικρύνει για τα αποτελέσματα σε κινητά.

Συμβουλή σχεδιασμού: στα 16 px οι λεπτομέρειες χάνονται. Χρησιμοποιήστε έντονο, απλό σχήμα, υψηλή αντίθεση και λίγο ή καθόλου κείμενο. Μπορείτε να προσαρμόσετε και να δείτε προεπισκόπηση του εικονιδίου σας στον επεξεργαστή του MakeFav πριν από την εξαγωγή.

Favicon SVG και σκούρο θέμα

Ένα favicon SVG είναι ένα μικροσκοπικό αρχείο που παραμένει καθαρό σε οποιαδήποτε πυκνότητα οθόνης. Το υποστηρίζουν τα προγράμματα περιήγησης που βασίζονται στο Chromium και ο Firefox. Η υποστήριξη του Safari ήταν ιστορικά περιορισμένη, γι' αυτό μην βασίζεστε ποτέ μόνο στο SVG: κρατήστε τις εναλλακτικές ICO και PNG.

Το μεγαλύτερο πλεονέκτημα είναι η θεματοποίηση. Επειδή ένα SVG μπορεί να περιέχει CSS, μπορείτε να προσαρμόσετε το εικονίδιο στο χρωματικό σχήμα του χρήστη με το prefers-color-scheme:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <style>
    .bg { fill: #0f172a; }
    .fg { fill: #ffffff; }
    @media (prefers-color-scheme: dark) {
      .bg { fill: #ffffff; }
      .fg { fill: #0f172a; }
    }
  </style>
  <rect class="bg" width="32" height="32" rx="6"/>
  <circle class="fg" cx="16" cy="16" r="8"/>
</svg>

Σημειώστε ότι το media query αντανακλά το θέμα του προγράμματος περιήγησης ή του λειτουργικού συστήματος, το οποίο χρησιμοποιεί η γραμμή καρτελών. Δεν ακολουθεί έναν διακόπτη θέματος στο δικό σας website.

Μια γνωστή ιδιαιτερότητα: όταν δηλώνονται και ICO και SVG, το Chrome μπορεί να επιλέξει το ICO. Αν δηλώσετε το ICO με sizes="32x32" και καταχωρίσετε το SVG μετά, το Chrome προτιμά το SVG, όπως φαίνεται στον κώδικα παρακάτω.

Apple touch icon: 180x180 και τα παλαιότερα μεγέθη

Όταν ένας χρήστης προσθέτει το site σας στην αρχική οθόνη του iOS ή του iPadOS, το Safari χρησιμοποιεί το apple-touch-icon. Σήμερα αρκεί ένα μόνο PNG 180x180 px: το iOS το σμικρύνει για παλαιότερες συσκευές και iPad. Ονομάστε το apple-touch-icon.png και βάλτε το στη ρίζα· το iOS ψάχνει εξ ορισμού αυτό το αρχείο ακόμη και αν δεν υπάρχει link tag.

Κανόνες για το εικονίδιο της Apple:

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

Πότε χρειάζεστε τα παλαιότερα μεγέθη (57, 72, 76, 114, 120, 144, 152, 167); Μόνο αν υποστηρίζετε iOS 6 ή παλαιότερο, ή θέλετε ακριβή έλεγχο pixel ανά συσκευή για το iPad Pro (167 px) και το iPad (152 px). Για σχεδόν κάθε site το 2026, το αρχείο 180x180 από μόνο του αρκεί. Η διάταξη μέγιστης συμβατότητας παρακάτω περιλαμβάνει μερικά για πληρότητα.

Εικονίδια Android και PWA: 192, 512 και maskable

Το Chrome στο Android και άλλα προγράμματα περιήγησης με δυνατότητα PWA διαβάζουν τα εικονίδια από το web app manifest, όχι από το <link rel="icon">. Για να είναι εγκαταστάσιμη η εφαρμογή χρειάζεστε τουλάχιστον ένα PNG 192x192 και ένα 512x512. Το εικονίδιο των 192 px χρησιμοποιείται στην αρχική οθόνη και στον εκκινητή εφαρμογών· το εικονίδιο των 512 px εμφανίζεται στις οθόνες εκκίνησης και στους διαλόγους εγκατάστασης.

Maskable εικονίδια και η ασφαλής ζώνη

Τα προσαρμοστικά εικονίδια του Android μπορούν να περικοπούν σε κύκλο, squircle ή άλλο σχήμα ανάλογα με τη συσκευή. Ένα maskable εικονίδιο σχεδιάζεται ώστε να περικόπτεται με ασφάλεια: το σημαντικό περιεχόμενο πρέπει να βρίσκεται μέσα στην ασφαλή ζώνη, έναν κεντραρισμένο κύκλο με διάμετρο 80% της εικόνας (η ακτίνα ισούται με το 40% της πλευράς). Για ένα αρχείο 512x512 αυτό σημαίνει ότι κρατάτε το λογότυπό σας μέσα σε κύκλο διαμέτρου περίπου 410 px και επεκτείνετε το χρώμα φόντου και στις τέσσερις άκρες, ώστε να μη φαίνονται κενά μετά τη μάσκα.

Δηλώστε το maskable εικονίδιο ως ξεχωριστή καταχώριση με "purpose": "maskable". Αποφύγετε το "any maskable" σε ένα αρχείο: το περιθώριο που απαιτείται για τη μάσκα φαίνεται υπερβολικά μικρό όταν το εικονίδιο εμφανίζεται χωρίς μάσκα.

Παράδειγμα manifest.json

{
  "name": "Example App",
  "short_name": "Example",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#0f172a",
  "icons": [
    {
      "src": "/web-app-manifest-192x192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "/web-app-manifest-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "/maskable-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "maskable"
    }
  ]
}

Σερβίρετε το αρχείο ως application/manifest+json (ή application/json) και συνδέστε το από κάθε σελίδα με <link rel="manifest" href="/manifest.json">. Ορισμένα projects το ονομάζουν site.webmanifest· το όνομα δεν έχει σημασία, το link έχει.

Windows tiles και browserconfig.xml

Τα Windows 8.1 και 10 επιτρέπουν στους χρήστες να καρφιτσώσουν ένα site στο μενού Έναρξη, και ο IE11 και το παλαιό Edge διαβάζουν τις εικόνες των πλακιδίων από το browserconfig.xml. Τα συνήθη μεγέθη είναι 70x70 (μικρό), 150x150 (μεσαίο), 310x150 (πλατύ) και 310x310 (μεγάλο). Το Edge που βασίζεται στο Chromium χρησιμοποιεί αντί γι' αυτό το manifest και τα κανονικά favicon, επομένως πρόκειται για παλαιού τύπου λειτουργία. Συμπεριλάβετέ την μόνο αν το κοινό σας περιλαμβάνει ακόμη παλαιότερες εγκαταστάσεις Windows, για παράδειγμα σε εταιρικά περιβάλλοντα.

<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
  <msapplication>
    <tile>
      <square70x70logo src="/mstile-70x70.png"/>
      <square150x150logo src="/mstile-150x150.png"/>
      <wide310x150logo src="/mstile-310x150.png"/>
      <square310x310logo src="/mstile-310x310.png"/>
      <TileColor>#0f172a</TileColor>
    </tile>
  </msapplication>
</browserconfig>

theme-color: απόχρωση του περιβάλλοντος του προγράμματος περιήγησης

Το meta tag theme-color λέει στα προγράμματα περιήγησης κινητών (και σε ορισμένα επιτραπέζια) ποιο χρώμα να χρησιμοποιήσουν για τη γραμμή διευθύνσεων ή τη γραμμή τίτλου. Δεν είναι favicon, αλλά ανήκει στο ίδιο σετ branding. Μπορείτε να δώσετε ξεχωριστές τιμές για φωτεινό και σκούρο θέμα:

<meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#0f172a" media="(prefers-color-scheme: dark)">

Ελάχιστη σύγχρονη διάταξη έναντι μέγιστης συμβατότητας

Ελάχιστη σύγχρονη διάταξη (συνιστάται για τα περισσότερα sites)

Πέντε αρχεία καλύπτουν πάνω από το 99% της πραγματικής χρήσης: favicon.ico, favicon.svg, apple-touch-icon.png (180x180) και τα δύο εικονίδια του manifest (192 και 512). Προσθέστε το PNG 96x96 αν μετράει η ορατότητα στο Google Search, και ένα maskable εικονίδιο αν διαθέτετε PWA.

<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/manifest.json">

Διάταξη μέγιστης συμβατότητας

Επιλέξτε την όταν απευθύνεστε σε ευρύ ή εταιρικό κοινό, ή όταν θέλετε να καλύψετε κάθε πιθανό client. Προσθέτει ρητά μεγέθη PNG, παλαιότερα μεγέθη Apple, Windows tiles και χρώματα θέματος.

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- Classic and modern browser icons -->
  <link rel="icon" href="/favicon.ico" sizes="32x32">
  <link rel="icon" href="/favicon.svg" type="image/svg+xml">
  <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
  <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
  <link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">

  <!-- Apple -->
  <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
  <link rel="apple-touch-icon" sizes="167x167" href="/apple-touch-icon-167x167.png">
  <link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png">
  <link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png">

  <!-- Android / PWA -->
  <link rel="manifest" href="/manifest.json">
  <meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)">
  <meta name="theme-color" content="#0f172a" media="(prefers-color-scheme: dark)">

  <!-- Windows (legacy) -->
  <meta name="msapplication-config" content="/browserconfig.xml">
  <meta name="msapplication-TileColor" content="#0f172a">

  <title>Example</title>
</head>

Προσέξτε τις διαδρομές σχετικές με τη ρίζα που ξεκινούν με /. Λειτουργούν σε οποιοδήποτε βάθος σελίδας, κάτι που μας φέρνει στα πιο συνηθισμένα λάθη.

Συνηθισμένα λάθη favicon και πώς να τα διορθώσετε

1. Λανθασμένες διαδρομές

Ένα link όπως το href="favicon.ico" επιλύεται σχετικά με το τρέχον URL, επομένως λειτουργεί στο / αλλά σπάει στο /blog/post/. Χρησιμοποιήστε διαδρομές σχετικές με τη ρίζα (/favicon.ico) ή απόλυτα URL. Ελέγξτε επίσης ότι τα αρχεία υπάρχουν πραγματικά: ανοίξτε κάθε URL απευθείας στο πρόγραμμα περιήγησης και βεβαιωθείτε ότι επιστρέφει HTTP 200, όχι ανακατεύθυνση σε σελίδα 404 ή σε τοίχο σύνδεσης.

2. Ελλείπον ή λανθασμένο χαρακτηριστικό sizes

Χωρίς sizes, τα προγράμματα περιήγησης πρέπει να κατεβάσουν τα εικονίδια για να τα ελέγξουν και μπορεί να διαλέξουν λάθος. Δηλώνετε πάντα το sizes στα links PNG και βεβαιωθείτε ότι ταιριάζει με τις πραγματικές διαστάσεις σε pixel. Ένα αρχείο με ετικέτα 32x32 που είναι στην πραγματικότητα 64x64 προκαλεί ασυνεπή αποτελέσματα.

3. Επιθετική προσωρινή αποθήκευση (caching)

Τα προγράμματα περιήγησης αποθηκεύουν προσωρινά τα favicon για μεγάλο διάστημα, συχνά ανεξάρτητα από την cache της σελίδας. Μετά από rebranding το παλιό εικονίδιο μπορεί να επιμένει για μέρες. Αλλάξτε το όνομα του αρχείου ή προσθέστε ένα query string έκδοσης (/favicon.ico?v=2) και ενημερώστε τα link tags. Οι σκληρές επαναφορτώσεις συχνά δεν ανανεώνουν το εικονίδιο της καρτέλας· το άνοιγμα του URL του εικονιδίου απευθείας και η επαναφόρτωσή του συνήθως το κάνει.

4. Μη τετράγωνες εικόνες

Τα favicon πρέπει να είναι τετράγωνα. Ένα ορθογώνιο λογότυπο τεντώνεται, περικόπτεται ή παίρνει μαύρες λωρίδες απρόβλεπτα. Σχεδιάστε ένα ειδικό τετράγωνο σήμα, όπως ένα αρχικό γράμμα ή σύμβολο, αντί να σμικρύνετε ένα πλατύ wordmark.

5. Διαφανή Apple touch icons που γίνονται μαύρα

Το iOS γεμίζει τη διαφάνεια με μαύρο. Δώστε στο εικονίδιο 180x180 αδιαφανές φόντο και μην στρογγυλεύετε εκ των προτέρων τις γωνίες.

6. Maskable εικονίδια χωρίς ασφαλή ζώνη

Αν το λογότυπο αγγίζει τις άκρες ενός maskable εικονιδίου, το Android θα το κόψει. Κρατήστε το μέσα στον κεντρικό κύκλο του 80% και γεμίστε ολόκληρο τον καμβά με το χρώμα φόντου.

7. Αποκλεισμός των εικονιδίων από τους crawlers

Αν το robots.txt απαγορεύει τη διαδρομή του favicon σας, το Google δεν μπορεί να το ανακτήσει και θα εμφανίσει ένα γενικό εικονίδιο υδρογείου στα αποτελέσματα αναζήτησης. Θυμηθείτε επίσης ότι το Google χρειάζεται το favicon στον ίδιο host με τη σελίδα και το ανανεώνει μόνο περιστασιακά, οπότε οι αλλαγές μπορεί να χρειαστούν μέρες ή εβδομάδες για να εμφανιστούν.

8. Παράλειψη του link του manifest ή των purposes

Ένα manifest που δεν έχει συνδεθεί, ή που δεν έχει εικονίδια 192 και 512 px, εμποδίζει την προτροπή εγκατάστασης στο Chrome. Επικυρώστε το στα εργαλεία προγραμματιστή του προγράμματος περιήγησής σας, στην καρτέλα Application.

Δημιουργήστε ολόκληρο το σετ με ένα κλικ

Η δημιουργία δώδεκα αρχείων με το χέρι σε έναν επεξεργαστή εικόνας, η μετατροπή σε ICO και η συγγραφή του manifest είναι κουραστική και επιρρεπής σε λάθη. Το MakeFav δημιουργεί όλα τα παραπάνω αρχεία από μία εικόνα, κείμενο ή emoji: favicon.ico πολλαπλών μεγεθών, PNG, SVG, Apple touch icon, PNG 192/512, maskable εικονίδιο, Windows tiles, manifest.json και browserconfig.xml, μαζί με ένα snippet HTML έτοιμο για επικόλληση, όλα σε μία λήψη ZIP. Μπορείτε να προσαρμόσετε φόντο, περιθώριο και σχήμα στον επεξεργαστή, να επαληθεύσετε ένα υπάρχον site με τον έλεγχο favicon και να αυτοματοποιήσετε τη δημιουργία μέσω των πόρων για προγραμματιστές.

Λίστα ελέγχου ανάπτυξης

1. Ανεβάστε όλα τα αρχεία στη ρίζα του site σας.
2. Επικολλήστε το snippet HTML στο <head> κάθε σελίδας (ή του κοινού layout σας).
3. Βεβαιωθείτε ότι οι διαδρομές είναι σχετικές με τη ρίζα και επιστρέφουν HTTP 200.
4. Ελέγξτε το φωτεινό και το σκούρο θέμα, μια εγκατάσταση στην αρχική οθόνη του iOS και μια εγκατάσταση στο Android.
5. Εκτελέστε τον έλεγχο για να εντοπίσετε ελλείποντα ή ασύμφωνα μεγέθη.
6. Ακυρώστε τις caches με ένα string έκδοσης αν αντικαταστήσατε ένα παλιό εικονίδιο.

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

Χρειάζομαι ακόμη το favicon.ico το 2026;

Ναι. Παρόλο που τα σύγχρονα προγράμματα περιήγησης δέχονται PNG και SVG, πολλοί crawlers, αναγνώστες feed, email clients και παλαιότερα προγράμματα περιήγησης εξακολουθούν να ζητούν απευθείας το /favicon.ico. Ένα ICO πολλαπλών μεγεθών με εικόνες 16, 32 και 48 px είναι ένα μικρό αρχείο που αποτρέπει τα ελλείποντα εικονίδια και τα σφάλματα 404.

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

Το Google απαιτεί τετράγωνο favicon με μέγεθος πολλαπλάσιο των 48 px, τουλάχιστον 48x48. Ένα PNG 96x96 είναι ασφαλής επιλογή, ενώ υποστηρίζεται και το SVG. Το Google χρειάζεται επίσης το αρχείο να είναι προσβάσιμο από crawlers, οπότε μην το αποκλείετε στο robots.txt. Οι ενημερώσεις μπορεί να χρειαστούν μέρες ή εβδομάδες για να εμφανιστούν.

Αρκεί το 180x180 για το Apple touch icon;

Για σχεδόν όλα τα sites, ναι. Το iOS και το iPadOS σμικρύνουν ένα PNG 180x180 για κάθε τρέχουσα συσκευή. Τα παλαιότερα μεγέθη (57 έως 152 px) έχουν σημασία μόνο για πολύ παλιές εκδόσεις iOS. Θυμηθείτε να χρησιμοποιείτε αδιαφανές φόντο, ώστε το εικονίδιο να μην γίνει μαύρο.

Τι είναι ένα maskable εικονίδιο και το χρειάζομαι;

Ένα maskable εικονίδιο είναι ένα PNG 512x512 σχεδιασμένο για τα προσαρμοστικά σχήματα εικονιδίων του Android. Το σημαντικό του περιεχόμενο βρίσκεται μέσα σε κύκλο διαμέτρου 80% στο κέντρο και το φόντο γεμίζει ολόκληρο το τετράγωνο. Το χρειάζεστε μόνο αν προσφέρετε εγκαταστάσιμο PWA, αλλά κάνει το εικονίδιο να φαίνεται εγγενές αντί να βρίσκεται μέσα σε έναν λευκό κύκλο.

Γιατί το παλιό μου favicon εμφανίζεται ακόμη μετά την αλλαγή;

Τα προγράμματα περιήγησης αποθηκεύουν τα favicon προσωρινά ξεχωριστά και για μεγάλο διάστημα. Μετονομάστε το αρχείο ή προσθέστε ένα query string έκδοσης όπως το ?v=2, ενημερώστε τα link tags και έπειτα ανοίξτε απευθείας το URL του εικονιδίου και επαναφορτώστε το. Οι μηχανές αναζήτησης μπορεί να χρειαστούν περισσότερο χρόνο για να ανανεώσουν το δικό τους αντίγραφο.