2026-ல் உங்களுக்கு எந்த favicon அளவுகள் தேவை? சிறந்த தொகுப்பு

2026-ல் சிறந்த favicon தொகுப்பு இது: 16, 32, 48 px படங்களைக் கொண்ட favicon.ico, (Google Search-க்காக) ஒரு 96x96 PNG, விருப்பத்துக்குரிய SVG favicon, ஒரு 180x180 apple-touch-icon.png, மற்றும் web app manifest-ல் அறிவிக்கப்பட்ட 192x192, 512x512 PNG-கள் (கூடவே ஒரு maskable 512). Windows tiles மற்றும் பழைய Apple அளவுகள் மிகப் பழைய சாதனங்களை ஆதரிக்க வேண்டுமெனில் மட்டுமே தேவை. இவை ஏன் என்பதை அளவு அட்டவணை, உடனே பயன்படுத்தக்கூடிய HTML மற்றும் தவிர்க்க வேண்டிய பொதுவான தவறுகளுடன் கீழே விளக்குகிறோம்.

favicon நிலவரம் முன்பு குழப்பமாக இருந்தது: ஒவ்வொரு உலாவியும் இயக்க முறைமையும் தனக்கே உரிய அளவைக் கேட்டதால், 20 வரிகள் கொண்ட பிரபலமற்ற <head> தொகுதிகள் உருவாகின. இன்று அவற்றில் பெரும்பாலானவை பயன்பாட்டில் இல்லை. நவீன உலாவிகள் ஒரு நல்ல ஐகானையே அளவு மாற்றிக்கொள்கின்றன, iOS ஒரே ஒரு அளவை விரும்புகிறது, Android manifest-ஐப் படிக்கிறது. இந்தக் கட்டுரை உண்மையில் தேவையானவற்றையும் இருந்தால் நல்லது என்பவற்றையும் பிரித்துக் காட்டுகிறது.

சுருக்கமான பதில்: favicon கோப்புகளின் சிறந்த தொகுப்பு

• தளத்தின் root-ல் favicon.ico (ஒரே கோப்பில் 16, 32, 48 px). உலாவிகள், feed readers மற்றும் பல கருவிகள் இன்னும் தானாகவே /favicon.ico-வைக் கேட்கின்றன.
• எந்த அளவிலும் தெளிவான தோற்றத்துக்கும் dark mode ஆதரவுக்கும் favicon.svg (விருப்பத்துக்குரியது, ஆனால் பரிந்துரைக்கப்படுகிறது).
• வெளிப்படையான மாற்றுத் தேர்வுகளாக PNG 16x16, 32x32 மற்றும் 96x96. 48 px-ன் மடங்கு தேவைப்படும் Google Search-க்கு 96 px பதிப்பு உதவுகிறது.
• 180x180 அளவில் apple-touch-icon.png, ஒளிபுகும் தன்மை (transparency) இல்லாமல்.
• manifest.json-ல் 192x192 மற்றும் 512x512 PNG, கூடவே Android-க்கான maskable 512x512 ஐகான்.
• மொபைலில் உலாவி UI-க்கு நிறம் சேர்க்க theme-color meta tag.
• browserconfig.xml உடன் கூடிய Windows tiles (70, 150, 310 px) பழைய Windows மற்றும் IE11 pinned தளங்களுக்கு மட்டுமே.

Favicon அளவுகள் அட்டவணை: நோக்கம், கோப்புப் பெயர்கள் மற்றும் முன்னுரிமை

இந்த அட்டவணையை ஒரு சரிபார்ப்புப் பட்டியலாகப் பயன்படுத்துங்கள். "அவசியம்" என்றால் அது இல்லாமல் சாதாரணத் தளம் உடைந்ததாக அல்லது முழுமையற்றதாகத் தெரியும்; "பரிந்துரைக்கப்படுகிறது" என்றால் தெளிவான தர மேம்பாடு; "விருப்பத்துக்குரியது" என்றால் குறிப்பிட்ட அல்லது பழைய பயன்பாடு.

favicon.ico: ஒரே கோப்பில் 16, 32 மற்றும் 48 px

ICO கோப்பு என்பது பல bitmap-களை வைத்திருக்கும் ஒரு கொள்கலன். நல்ல favicon.ico-வில் 16x16, 32x32, 48x48 படங்கள் இருக்கும்; அதனால் உலாவி அல்லது OS மிக நெருங்கிய அளவைத் தேர்ந்தெடுக்க முடியும். இதை உங்கள் டொமைனின் root-ல் வையுங்கள் (https://example.com/favicon.ico). உங்கள் HTML வேறு இடத்தைச் சுட்டினாலும், பல crawlers, RSS readers மற்றும் பழைய உலாவிகள் அதே URL-ஐக் கேட்கின்றன; எனவே அது இருந்தால் உங்கள் logs-ல் 404 இரைச்சல் தவிர்க்கப்படும்.

ஒரு PNG-யின் பெயரை மட்டும் .ico என மாற்றாதீர்கள். பெரும்பாலான உலாவிகள் ஏற்றுக்கொள்ளும், ஆனால் சில கருவிகள் நிராகரிக்கும், மேலும் பல-தெளிவுத்திறன் நன்மையும் இழக்கப்படும். உண்மையான ICO-வாக export செய்யுங்கள்.

PNG favicon-கள்: 16, 32 மற்றும் 96 px

தெளிவான sizes கொண்ட PNG links, ICO-வை parse செய்யாமலே உலாவி சிறந்த bitmap-ஐத் தேர்ந்தெடுக்க உதவுகின்றன. நடைமுறையில் 32x32 உயர் DPI tabs-ஐ ஈடுசெய்கிறது; 16x16 இன்று கிட்டத்தட்ட தேவையற்றது. 96x96 அளவைச் சேர்ப்பது பயனுள்ளது, ஏனெனில் Google Search முடிவுகளுக்கு அருகில் favicon-களைக் காட்டுகிறது; மேலும் 48 px-ன் மடங்கான (48x48, 96x96, 144x144 என) சதுர ஐகான் தேவைப்படுகிறது. மொபைல் முடிவுகளுக்காக அளவைக் குறைக்கும்போது, 48 px கோப்பை விட 96 px கோப்பு Google-க்குக் கூர்மையான மூலத்தை அளிக்கிறது.

வடிவமைப்புக் குறிப்பு: 16 px-ல் நுணுக்கமான விவரங்கள் மறைந்துவிடும். தடித்த, எளிய வடிவம், அதிக வேறுபாடு (contrast), மற்றும் குறைவான அல்லது எழுத்தே இல்லாத வடிவமைப்பைப் பயன்படுத்துங்கள். export செய்வதற்கு முன் MakeFav editor-ல் உங்கள் ஐகானைச் சரிசெய்து முன்னோட்டம் பார்க்கலாம்.

SVG favicon மற்றும் dark mode

SVG favicon என்பது எந்தத் திரை அடர்த்தியிலும் கூர்மையாக இருக்கும் ஒரு சிறிய கோப்பு. Chromium அடிப்படையிலான உலாவிகளும் Firefox-ம் இதை ஆதரிக்கின்றன. Safari ஆதரவு வரலாற்று ரீதியாக வரையறுக்கப்பட்டதாக இருந்தது; எனவே SVG-ஐ மட்டும் நம்ப வேண்டாம்: ICO மற்றும் PNG மாற்றுத் தேர்வுகளையும் வைத்திருங்கள்.

மிகப்பெரிய நன்மை theming. 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 என்பது உலாவி அல்லது OS theme-ஐப் பிரதிபலிக்கிறது என்பதைக் கவனியுங்கள்; tab bar அதையே பயன்படுத்துகிறது. உங்கள் சொந்த இணையதளத்தில் உள்ள theme toggle-ஐ இது பின்பற்றாது.

தெரிந்த ஒரு விசித்திரம்: ICO மற்றும் SVG இரண்டும் பட்டியலிடப்பட்டிருந்தால், Chrome ICO-வைத் தேர்ந்தெடுக்கலாம். ICO-வை sizes="32x32" உடன் அறிவித்து, அதன் பிறகு SVG-ஐப் பட்டியலிட்டால், கீழே உள்ள குறியீட்டில் காட்டியபடி Chrome SVG-ஐ விரும்பும்.

Apple touch icon: 180x180 மற்றும் பழைய அளவுகள்

பயனர் உங்கள் தளத்தை iOS அல்லது iPadOS முகப்புத் திரையில் சேர்க்கும்போது, Safari apple-touch-icon-ஐப் பயன்படுத்துகிறது. இன்று ஒரே ஒரு 180x180 px PNG போதுமானது: பழைய சாதனங்கள் மற்றும் iPad-களுக்கு iOS அதன் அளவைக் குறைத்துக்கொள்ளும். அதற்கு apple-touch-icon.png எனப் பெயரிட்டு root-ல் வையுங்கள்; link tag இல்லையென்றாலும் iOS இயல்பாக அந்தக் கோப்பைத் தேடும்.

Apple ஐகானுக்கான விதிகள்:

• ஒளிபுகும் தன்மை கூடாது. iOS ஒளிபுகும் பிக்சல்களைக் கருப்பால் நிரப்பும்; அதனால் ஒளிபுகும் லோகோ பெரும்பாலும் கருப்புத் திட்டாக மாறும். திடமான பின்னணி நிறத்தைச் சேர்க்கவும்.
• வட்டமான மூலைகள் கூடாது. iOS தனது சொந்த வட்ட மூலை mask-ஐப் பயன்படுத்தும். முழுச் சதுரத்தை வழங்குங்கள்.
• மூலைகள் வெட்டப்படுவதால், முக்கிய உள்ளடக்கத்தை விளிம்புகளிலிருந்து தள்ளி வையுங்கள்.

பழைய அளவுகள் (57, 72, 76, 114, 120, 144, 152, 167) எப்போது தேவை? iOS 6 அல்லது அதற்கு முந்தையதை ஆதரித்தால் மட்டுமே, அல்லது iPad Pro (167 px) மற்றும் iPad (152 px)-க்கு ஒவ்வொரு சாதனத்துக்கும் துல்லியமான பிக்சல் கட்டுப்பாடு வேண்டுமானால் மட்டுமே. 2026-ல் கிட்டத்தட்ட எல்லாத் தளங்களுக்கும் 180x180 கோப்பே போதும். கீழே உள்ள அதிகபட்ச இணக்கத்தன்மை அமைப்பில் முழுமைக்காக சில சேர்க்கப்பட்டுள்ளன.

Android மற்றும் PWA ஐகான்கள்: 192, 512 மற்றும் maskable

Android-ல் Chrome மற்றும் PWA-வை ஆதரிக்கும் பிற உலாவிகள் ஐகான்களை <link rel="icon">-லிருந்து அல்ல, web app manifest-லிருந்து படிக்கின்றன. நிறுவக்கூடிய தன்மைக்கு குறைந்தது ஒரு 192x192 மற்றும் ஒரு 512x512 PNG தேவை. 192 px ஐகான் முகப்புத் திரை மற்றும் app launcher-ல் பயன்படுகிறது; 512 px ஐகான் splash screen-களிலும் install உரையாடல்களிலும் தோன்றுகிறது.

Maskable ஐகான்கள் மற்றும் பாதுகாப்பு மண்டலம்

Android adaptive ஐகான்கள் சாதனத்தைப் பொறுத்து வட்டம், squircle அல்லது வேறு வடிவத்தில் வெட்டப்படலாம். Maskable ஐகான் பாதுகாப்பாக வெட்டப்படும்படி வடிவமைக்கப்படுகிறது: முக்கிய உள்ளடக்கம் பாதுகாப்பு மண்டலத்துக்குள், அதாவது படத்தின் 80% விட்டம் கொண்ட மையத்தில் உள்ள வட்டத்துக்குள் இருக்க வேண்டும் (ஆரம் பக்கத்தின் 40%). 512x512 கோப்புக்கு, உங்கள் லோகோவை சுமார் 410 px விட்டம் கொண்ட வட்டத்துக்குள் வைத்து, masking-க்குப் பிறகு இடைவெளிகள் தெரியாதபடி பின்னணி நிறத்தை நான்கு விளிம்புகள் வரை நீட்டுவது என்று பொருள்.

maskable ஐகானை "purpose": "maskable" கொண்ட தனி உள்ளீடாக அறிவியுங்கள். ஒரே கோப்பில் "any maskable" தவிர்க்கவும்: masking-க்குத் தேவையான padding, ஐகான் mask இல்லாமல் காட்டப்படும்போது மிகச் சிறியதாகத் தெரியும்.

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"> மூலம் இணையுங்கள். சில திட்டங்கள் இதை site.webmanifest எனப் பெயரிடுகின்றன; பெயர் முக்கியமில்லை, link தான் முக்கியம்.

Windows tiles மற்றும் browserconfig.xml

Windows 8.1 மற்றும் 10 பயனர்கள் ஒரு தளத்தை Start menu-வில் pin செய்ய அனுமதிக்கின்றன; IE11 மற்றும் பழைய Edge tile படங்களை browserconfig.xml-லிருந்து படிக்கின்றன. வழக்கமான அளவுகள்: 70x70 (சிறியது), 150x150 (நடுத்தரம்), 310x150 (அகலமானது) மற்றும் 310x310 (பெரியது). Chromium அடிப்படையிலான Edge அதற்குப் பதிலாக 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: உலாவி UI-க்கு நிறம் சேர்த்தல்

theme-color meta tag, முகவரிப் பட்டி அல்லது தலைப்புப் பட்டிக்கு எந்த நிறத்தைப் பயன்படுத்த வேண்டும் என மொபைல் உலாவிகளுக்கு (மற்றும் சில desktop உலாவிகளுக்கு) சொல்கிறது. இது favicon அல்ல, ஆனால் அதே பிராண்டிங் தொகுப்பைச் சேர்ந்தது. light மற்றும் dark mode-க்குத் தனித்தனி மதிப்புகளை வழங்கலாம்:

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

குறைந்தபட்ச நவீன அமைப்பு vs. அதிகபட்ச இணக்கத்தன்மை

குறைந்தபட்ச நவீன அமைப்பு (பெரும்பாலான தளங்களுக்குப் பரிந்துரைக்கப்படுகிறது)

ஐந்து கோப்புகள் நடைமுறைப் பயன்பாட்டில் 99%-க்கும் மேல் ஈடுசெய்கின்றன: favicon.ico, favicon.svg, apple-touch-icon.png (180x180), மற்றும் இரண்டு manifest ஐகான்கள் (192 மற்றும் 512). Google Search-ல் தெரிவது முக்கியமெனில் 96x96 PNG-ஐயும், PWA வெளியிட்டால் maskable ஐகானையும் சேர்க்கவும்.

<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 மற்றும் theme நிறங்களைச் சேர்க்கிறது.

<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>

/-ல் தொடங்கும் root-relative பாதைகளைக் கவனியுங்கள். அவை எந்த ஆழத்திலுள்ள பக்கத்திலும் வேலை செய்யும்; இது நம்மைப் பொதுவான தவறுகளுக்குக் கொண்டு வருகிறது.

பொதுவான favicon தவறுகளும் அவற்றைச் சரிசெய்யும் முறையும்

1. தவறான பாதைகள்

href="favicon.ico" போன்ற link தற்போதைய URL-ஐ அடிப்படையாகக் கொண்டு தீர்மானிக்கப்படுகிறது; எனவே இது /-ல் வேலை செய்யும், ஆனால் /blog/post/-ல் உடையும். root-relative (/favicon.ico) அல்லது முழு URL-களைப் பயன்படுத்துங்கள். கோப்புகள் உண்மையில் உள்ளனவா என்பதையும் சரிபார்க்கவும்: ஒவ்வொரு URL-ஐயும் நேரடியாக உலாவியில் திறந்து, அது 404 பக்கத்துக்கோ login சுவருக்கோ redirect ஆகாமல் HTTP 200 தருகிறதா என உறுதிசெய்யுங்கள்.

2. sizes attribute இல்லாதது அல்லது தவறானது

sizes இல்லாவிட்டால், உலாவிகள் ஐகான்களைப் பரிசோதிக்க அவற்றைப் பதிவிறக்க வேண்டும்; தவறானதையும் தேர்ந்தெடுக்கக்கூடும். PNG links-ல் எப்போதும் sizes அறிவியுங்கள்; அது உண்மையான பிக்சல் பரிமாணங்களுடன் பொருந்துவதை உறுதிசெய்யுங்கள். 32x32 எனக் குறிக்கப்பட்ட கோப்பு உண்மையில் 64x64 ஆக இருந்தால் முரண்பாடான முடிவுகள் வரும்.

3. தீவிரமான caching

உலாவிகள் favicon-களை நீண்ட நேரம் cache செய்கின்றன; பெரும்பாலும் பக்க cache-லிருந்து தனியாக. மறுபெயரிடலுக்குப் (rebrand) பிறகு பழைய ஐகான் பல நாட்கள் நீடிக்கலாம். கோப்புப் பெயரை மாற்றுங்கள் அல்லது version query string (/favicon.ico?v=2) சேர்த்து link tags-ஐப் புதுப்பியுங்கள். Hard reload பெரும்பாலும் tab ஐகானைப் புதுப்பிக்காது; ஐகான் URL-ஐ நேரடியாகத் திறந்து reload செய்தால் பொதுவாகப் புதுப்பிக்கும்.

4. சதுரமில்லாத படங்கள்

Favicon-கள் சதுரமாக இருக்க வேண்டும். செவ்வக லோகோ முன்கூட்டியே சொல்ல முடியாதபடி இழுக்கப்படும், வெட்டப்படும் அல்லது letterbox ஆகும். அகலமான wordmark-ஐச் சுருக்குவதற்குப் பதிலாக, முதல் எழுத்து அல்லது சின்னம் போன்ற தனிச் சதுர அடையாளத்தை வடிவமைக்கவும்.

5. ஒளிபுகும் Apple touch icon-கள் கருப்பாக மாறுதல்

iOS ஒளிபுகும் பகுதியைக் கருப்பால் நிரப்புகிறது. 180x180 ஐகானுக்கு ஒளிபுகாத பின்னணியைக் கொடுங்கள்; மூலைகளை முன்கூட்டியே வட்டமாக்க வேண்டாம்.

6. பாதுகாப்பு மண்டலம் இல்லாத maskable ஐகான்கள்

லோகோ maskable ஐகானின் விளிம்புகளைத் தொட்டால், Android அதை வெட்டிவிடும். அதை மையத்தின் 80% வட்டத்துக்குள் வைத்து, முழுக் canvas-ஐயும் பின்னணி நிறத்தால் நிரப்புங்கள்.

7. crawlers-இடமிருந்து ஐகான்களைத் தடுத்தல்

robots.txt உங்கள் favicon பாதையைத் தடைசெய்தால், Google அதைப் பெற முடியாது; தேடல் முடிவுகளில் பொதுவான globe ஐகானைக் காட்டும். மேலும், Google-க்கு favicon பக்கம் உள்ள அதே host-ல் இருக்க வேண்டும் என்பதையும், அது எப்போதாவதுதான் புதுப்பிக்கப்படும் என்பதையும் நினைவில் கொள்ளுங்கள்; எனவே மாற்றங்கள் தெரிய நாட்கள் அல்லது வாரங்கள் ஆகலாம்.

8. manifest link அல்லது purposes-ஐ மறந்துவிடுதல்

இணைக்கப்படாத manifest, அல்லது 192 மற்றும் 512 px ஐகான்கள் இல்லாத manifest, Chrome-ல் install prompt வருவதைத் தடுக்கும். உங்கள் உலாவியின் developer tools-ல் Application tab-ன் கீழ் அதைச் சரிபார்க்கவும்.

முழுத் தொகுப்பையும் ஒரே கிளிக்கில் உருவாக்குங்கள்

பட எடிட்டரில் ஒரு டஜன் கோப்புகளைக் கையால் உருவாக்கி, பிறகு ICO-வாக மாற்றி, manifest எழுதுவது சலிப்பானது, தவறுகளுக்கும் வாய்ப்புள்ளது. MakeFav ஒரே படம், உரை அல்லது emoji-யிலிருந்து மேலே உள்ள அனைத்துக் கோப்புகளையும் உருவாக்குகிறது: பல அளவு favicon.ico, PNG-கள், SVG, Apple touch icon, 192/512 PNG-கள், maskable ஐகான், Windows tiles, manifest.json மற்றும் browserconfig.xml, கூடவே ஒட்டுவதற்குத் தயாரான HTML துணுக்கு, அனைத்தும் ஒரே ZIP பதிவிறக்கத்தில். editor-ல் பின்னணி, padding மற்றும் வடிவத்தைச் சரிசெய்யலாம்; favicon checker மூலம் இருக்கும் தளத்தைச் சரிபார்க்கலாம்; developer resources மூலம் உருவாக்கத்தைத் தானியக்கமாக்கலாம்.

வெளியீட்டுச் சரிபார்ப்புப் பட்டியல்

1. அனைத்துக் கோப்புகளையும் உங்கள் தளத்தின் root-ல் பதிவேற்றுங்கள்.
2. HTML துணுக்கை ஒவ்வொரு பக்கத்தின் <head>-லும் (அல்லது பகிரப்பட்ட layout-லும்) ஒட்டுங்கள்.
3. பாதைகள் root-relative ஆக இருப்பதையும் HTTP 200 தருவதையும் உறுதிசெய்யுங்கள்.
4. light மற்றும் dark mode, iOS முகப்புத் திரை நிறுவல் மற்றும் Android நிறுவலைச் சரிபாருங்கள்.
5. விடுபட்ட அல்லது பொருந்தாத அளவுகளைக் கண்டறிய checker-ஐ இயக்குங்கள்.
6. பழைய ஐகானை மாற்றியிருந்தால் version string மூலம் cache-ஐ முறியுங்கள்.

அடிக்கடி கேட்கப்படும் கேள்விகள்

2026-லும் favicon.ico தேவையா?

ஆம். நவீன உலாவிகள் PNG மற்றும் SVG-ஐ ஏற்றுக்கொண்டாலும், பல crawlers, feed readers, மின்னஞ்சல் clients மற்றும் பழைய உலாவிகள் இன்னும் நேரடியாக /favicon.ico-வைக் கேட்கின்றன. 16, 32, 48 px படங்கள் கொண்ட பல அளவு ICO ஒரு சிறிய கோப்பு; அது ஐகான்கள் விடுபடுவதையும் 404 பிழைகளையும் தடுக்கிறது.

Google Search-க்கு favicon எவ்வளவு அளவு இருக்க வேண்டும்?

Google-க்கு 48 px-ன் மடங்கான, குறைந்தது 48x48 அளவுள்ள சதுர favicon தேவை. 96x96 PNG பாதுகாப்பான தேர்வு; SVG-யும் ஆதரிக்கப்படுகிறது. கோப்பு crawl செய்யக்கூடியதாகவும் இருக்க வேண்டும்; எனவே robots.txt-ல் அதைத் தடுக்க வேண்டாம். புதுப்பிப்புகள் தெரிய நாட்கள் அல்லது வாரங்கள் ஆகலாம்.

Apple touch icon-க்கு 180x180 போதுமா?

கிட்டத்தட்ட எல்லாத் தளங்களுக்கும் ஆம். தற்போதைய ஒவ்வொரு சாதனத்துக்கும் iOS மற்றும் iPadOS 180x180 PNG-யின் அளவைக் குறைத்துக்கொள்கின்றன. பழைய அளவுகள் (57 முதல் 152 px வரை) மிகப் பழைய iOS பதிப்புகளுக்கு மட்டுமே முக்கியம். ஐகான் கருப்பாக மாறாமல் இருக்க ஒளிபுகாத பின்னணியைப் பயன்படுத்த நினைவில் கொள்ளுங்கள்.

Maskable ஐகான் என்றால் என்ன, எனக்கு அது தேவையா?

Maskable ஐகான் என்பது Android-ன் adaptive ஐகான் வடிவங்களுக்காக வடிவமைக்கப்பட்ட 512x512 PNG. அதன் முக்கிய உள்ளடக்கம் மையத்தில் உள்ள 80% விட்ட வட்டத்துக்குள் இருக்கும்; பின்னணி முழுச் சதுரத்தையும் நிரப்பும். நிறுவக்கூடிய PWA-வை வழங்கினால் மட்டுமே இது தேவை; ஆனால் ஐகான் வெள்ளை வட்டத்துக்குள் அமர்வதற்குப் பதிலாக இயல்பாகத் தெரிய இது உதவுகிறது.

மாற்றிய பிறகும் என் பழைய favicon ஏன் இன்னும் தெரிகிறது?

உலாவிகள் favicon-களைத் தனியாகவும் நீண்ட காலத்துக்கும் cache செய்கின்றன. கோப்பை மறுபெயரிடுங்கள் அல்லது ?v=2 போன்ற version query string சேர்த்து, link tags-ஐப் புதுப்பித்து, பிறகு ஐகான் URL-ஐ நேரடியாகத் திறந்து reload செய்யுங்கள். தேடுபொறிகள் தங்கள் சொந்த நகலைப் புதுப்பிக்க அதிக நேரம் எடுக்கலாம்.