بلاگ

سئو خوب > > بلاگ، دانشنامه و مقالات سئو > > آموزش سئو، بهینه سازی سایت > > آموزش سئو وردپرس Wordpress SEO > > Favicon چیست؟ نحوه ایجاد و ساخت فاوآیکون

Favicon چیست؟ نحوه ایجاد و ساخت فاوآیکون

نوامبر 6, 2025
ارسال شده توسط
آموزش سئو وردپرس Wordpress SEO ، سئو خوب، مقالات آموزشی
6 بازدید
Favicon چیست؟ نحوه ایجاد و ساخت فاوآیکون

 فِیوآیکون یا آیکون تب همان تصویر کوچک کنار عنوان صفحه در تب مرورگر، بوک‌مارک‌ها و لیست اپ‌ها است. گرچه ظاهر کوچک دارد، اما در هویت‌بخشی برند، تجربه کاربری و حتی تشخیص سریع در بین تب‌های باز بسیار مؤثر است. در این مطلب همه‌چیز را از صفر تا صد (تعاریف، فرمت‌ها، طراحی، تولید خودکار، کدنویسی، پیاده‌سازی در HTML و وردپرس، PWA، مشکلات رایج و تست) توضیح می‌دهم.

فهرست کوتاه چیزی که در این مقاله می‌خوانید

  1. favicon چیست و چرا مهم است

  2. فرمت‌ها و اندازه‌های رایج (چه زمانی از PNG، ICO، SVG استفاده کنیم)

  3. طراحی و توصیه‌های بصری

  4. تولید فاوآیکون — روش‌های سریع (ابزارها) و روش برنامه‌نویسی (ابزار خط فرمان)

  5. کد HTML کامل برای تمام مرورگرها و پلتفرم‌ها (نمونه قابل کپی)

  6. فایل manifest و PWA: نکات مهم

  7. پیاده‌سازی در WordPress — سه روش (Customizer، اضافه‌کردن دستی، پلاگین‌ها)

  8. کش مرورگر، CDN و نکات به‌روزرسانی (حفظ نسخه/ورژن)

  9. تست، عیب‌یابی و نکات سئویی (چطور تأثیر می‌گذارد)

  10. چک‌لیست نهایی + منابع عملی (فرمول‌ها و مثال‌ها)

 Favicon چیست و چرا مهم است؟

 Favicon چیست و چرا مهم است؟

  • یک تصویر مربع کوچک (معمولاً 16×16 px تا 512×512 px) که در تب مرورگر، نتایج ذخیره‌شده (بوک‌مارک) و برخی مواقع در نتایج موتور جستجو یا لیست اپ‌ها نمایش داده می‌شود.

  • فواید: تشخیص سریع برند، افزایش اعتبار بصری، تجربه کاربری بهتر و هماهنگی هویت برند در همهٔ نقاط تماس دیجیتال.

  • نکته سئو: خودِ favicon تأثیر مستقیم بر رتبه گوگل ندارد، اما با کمک به UX و برندینگ می‌تواند CTR و احساس اعتماد را افزایش دهد که به‌صورت غیرمستقیم مفید است.

فرمت‌ها و اندازه‌ها — چه چیزی کجا به کار می‌آید؟

فرمت‌ها و اندازه‌ها — چه چیزی کجا به کار می‌آید؟

فرمت‌های متداول

  • ICO: فرمت کلاسیک برای مرورگرها (ویندوز/قدیمی). می‌تواند چندین اندازه را در یک فایل نگهداری کند (16×16, 32×32, 48×48).

  • PNG: فرمت رایج، پشتیبانی خوب و شفافیت (alpha). ساده و سریع.

  • SVG: برداری؛ در رزولوشن‌های متغیر بهترین کیفیت را می‌دهد. مناسب برای آیکون‌های ساده و لوگوهای برداری. (برخی مرورگرها/سیستم‌ها با SVG در favicon سازگارند اما برخی امکانات مثل بوکمارک‌ها ممکن است محدودیت داشته باشند.)

  • WebP: فشرده، اما مرورگرها برای favicon معمولاً از PNG/ICO/SVG بهتر پشتیبانی می‌کنند.

اندازه‌های پیشنهادی (باید تولید شوند)

  • 16×16 — تب‌ها (core)

  • 32×32 — تب‌های با رزولوشن بالاتر/نوار ابزار

  • 48×48 — برخی موقعیت‌ها

  • 96×96, 128×128, 192×192, 256×256 — آیکونهای PWA و اندروید

  • 180×180 — Apple Touch Icon (iOS)

  • 512×512 — آیکون بزرگ PWA / Google Play / اشتراک‌گذاری

توصیه: حداقل یک PNG 16×16 و یک فایل بزرگ 512×512 و همچنین یک فایل ICO که شامل چند سایز است تولید کنید. اگر لوگوی شما برداری است، خروجی SVG هم بسازید.

نکات طراحی فاوآیکون

  • ساده و خوانا: در اندازه کوچک، جزئیات ریز دیده نمی‌شوند. از المان‌های ساده و کانترست بالا استفاده کنید.

  • فضای منفی و علامت قابل تشخیص: یک حرف اول برند یا نماد ساده بهترین انتخاب معمولاً است.

  • رنگ‌های برند را حفظ کنید ولی در نظر بگیرید که در پس‌زمینه‌های روشن/تیره دیده شود.

  • نسخه‌های روشن و تاریک (dark-mode) — اگر نیاز هست یک نسخه جایگزین برای حالت تاریک ارائه دهید.

  • آیکون برداری اول: اگر ممکن است لوگو را به‌صورت SVG طراحی کنید و سپس خروجی‌های رستر را بسازید.

 تولید favicon — ابزارها و روش‌های برنامه‌نویسی

روش سریع (وب‌سایت‌ها / جنریتورها)

  • سایت‌هایی مثل (نام‌های عمومی و شناخته‌شده) امکان آپلود یک تصویر و تحویل فایل‌های مورد نیاز (ico, png, apple-touch-icon, manifest) را می‌دهند. کافی است تصویر 512×512 یا SVG آپلود کنید و خروجی دانلود شود.

روش خط فرمان — با ImageMagick (مثال)

اگر روی سرور یا لوکال هستید و ImageMagick نصب دارید، می‌توانید از آن برای تولید ICO استفاده کنید:

# مثال: ساخت favicon.ico از چندین سایز PNG
convert favicon-16.png favicon-32.png favicon-48.png favicon.ico

یا تولید چندین اندازه از یک PNG بزرگ:

convert logo-512.png -resize 16x16 favicon-16.png
convert logo-512.png -resize 32x32 favicon-32.png
convert logo-512.png -resize 48x48 favicon-48.png
convert favicon-16.png favicon-32.png favicon-48.png favicon.ico

روش با Node.js و sharp (مثال)

// نصب: npm i sharp
const sharp = require('sharp');
const sizes = [16,32,48,96,128,192,256,512];
sizes.forEach(size => {
sharp('logo.svg')
.resize(size, size)
.png()
.toFile(`favicon-${size}.png`);
});

تولید SVG به PNG اتوماتیک (اگر لوگو برداری دارید)

  • از ابزارهایی مثل Inkscape (خط فرمان) یا librsvg و یا sharp استفاده کنید تا از SVG خروجی PNG بگیرید.

 کد HTML کامل برای سازگاری حداکثری

در <head> صفحات‌تان، این بلاک کامل را قرار دهید (نمونه آماده):

<link rel="icon" type="image/png" sizes="16x16" href="/favicons/favicon-16.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicons/favicon-32.png">
<link rel="icon" type="image/png" sizes="48x48" href="/favicons/favicon-48.png">
<link rel="shortcut icon" href="/favicons/favicon.ico"><!– Apple Touch –>
<link rel=“apple-touch-icon” sizes=“180×180” href=“/favicons/apple-touch-icon.png”><!– Android / PWA –>
<link rel=“manifest” href=“/site.webmanifest”>
<meta name=“theme-color” content=“#ffffff”>

<!– Microsoft tile (برای ویندوز) –>
<meta name=“msapplication-TileColor” content=“#ffffff”>
<meta name=“msapplication-TileImage” content=“/favicons/mstile-144×144.png”>

<!– SVG fallback (برخی مرورگرها ممکن است) –>
<link rel=“icon” href=“/favicons/favicon.svg” type=“image/svg+xml”>

نکته: ترتیب مهم است — shortcut icon برای برخی مرورگرهای قدیمی لازم است. همچنین همیشه مسیرهای صحیح به فایل‌های تولیدشده را قرار دهید.

 site.webmanifest (برای PWA و اندروید)

مثال site.webmanifest:

{
"name": "سئو خوب",
"short_name": "سئو خوب",
"icons": [
{
"src": "/favicons/android-chrome-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/favicons/android-chrome-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"theme_color": "#0a84ff",
"background_color": "#ffffff",
"display": "standalone",
"start_url": "/?utm_source=homescreen"
}

  • manifest اجازه می‌دهد مرورگر و سیستم‌عامل نسخه‌های مناسب را برای نصب اپ یا نمایش استفاده کند.

پیاده‌سازی در WordPress — سه روش کاربردی

روش A — ساده از طریق Customizer (پیشنهاد برای اکثر کاربران)

  1. وارد پیشخوان وردپرس شوید → نمایش (Appearance) → سفارشی‌سازی (Customizer).

  2. بخش «هویت سایت» (Site Identity) → آپلود آیکون سایت (Site Icon).

  3. وردپرس به صورت خودکار نسخه‌های لازم (512×512 و …) را می‌سازد و تگ‌های meta را به head اضافه می‌کند.

مزیت: ساده، بدون کد، مناسب برای بیشتر قالب‌ها.

روش B — اضافه کردن دستی (برای کنترل کامل)

اگر می‌خواهید فایل‌ها را در مسیر دلخواه و با تگ‌های سفارشی داشته باشید:

  1. فایل‌های favicon را در /wp-content/uploads/favicons/ یا /favicons/ در ریشه آپلود کنید.

  2. در فایل header.php قالب (یا بهتر در functions.php با wp_head اکشن) تگ‌های <link> را اضافه کنید:

function seokhob_add_favicons() {
echo '<link rel="icon" type="image/png" sizes="32x32" href="'.get_site_url().'/favicons/favicon-32.png">';
// سایر تگ‌ها
}
add_action('wp_head', 'seokhob_add_favicons');

توجه: استفاده از child theme توصیه می‌شود تا با آپدیت قالب تغییرات از بین نرود.

روش C — استفاده از پلاگین (بدون کدنویسی ولی امکانات بیشتر)

چند نوع پلاگین:

  • پلاگین‌هایی که فقط آیکون اضافه می‌کنند (simple favicon)

  • پلاگین‌هایی که فایل‌های کامل و manifest می‌سازند (Real Favicon Generator یا مشابه)
    (نام دقیق پلاگین‌ها را می‌توان بر اساس نیازتان معرفی کرد؛ اگر می‌خواهید پیشنهاد کنم بگو تا لیست مشخص و لینک‌ها رو بدم.)

نکته امنیتی: پلاگین‌ها را از مخزن رسمی یا منابع معتبر نصب کنید و بررسی کنید که آخرین آپدیت را داشته باشند.

کش مرورگر و CDN — چگونه فاوآیکون را پس از آپدیت بروزرسانی کنیم؟

فایل favicon به‌خاطر کش مرورگر گاهی بلافاصله تغییر نمی‌کند. راهکارها:

  1. نام فایل را تغییر دهید یا پارامتر ورژن اضافه کنید:

<link rel="icon" href="/favicons/favicon-32.png?v=2">

  1. تنظیمات CDN: اگر از CDN استفاده می‌کنید، کش CDN را پاک کنید.

  2. ارسال هدر HTTP مناسب: Cache-Control معقول قرار دهید (مثلاً max-age کوتاه‌تر برای نسخه اولیه).

  3. کاربران معمولی: پاک کردن کش مرورگر یا hard refresh (Ctrl+F5) ممکن است لازم باشد.

تست، عیب‌یابی و نکات سئویی

تست‌ها

  • تب مرورگر را باز کنید و صفحه را لود کنید؛ آیا آیکون نمایش داده می‌شود؟

  • بوکمارک/favorites را چک کنید.

  • در موبایل و iOS: افزودن به صفحه اصلی (Add to Home Screen) و بررسی آیکون.

  • ابزارهای آنلاین (Favicon checker) بررسی چندگانه انجام می‌دهند (اگر خواستی لینک ابزار معرفی کنم).

شایع‌ترین مشکلات و رفع آنها

  • آیکون نمایش نمی‌دهد: مسیر اشتباه یا فایل خراب — مسیر را بررسی کنید.

  • نسخه قدیمی نمایش داده می‌شود: کش مرورگر یا CDN — از ورژن‌دهی استفاده کنید.

  • آیفون آیکون ندارد یا تار است: اندازه 180×180 برای apple-touch-icon حتماً لازم است.

  • SVG کار نمی‌کند: برخی مرورگرها یا بوکمارک‌ها SVG را برای favicon پشتیبانی نمی‌کنند — حتما PNG/ICO بسازید.

  • آیکون در بوکمارک بی‌کیفیت است: از نسخه‌های بزرگ (256/512) خروجی بگیرید تا رندر بهتری داشته باشند.

تأثیر بر سئو و CTR

  • favicon مستقیم رتبه را افزایش نمی‌دهد، اما باعث افزایش تشخیص برند و کاهش bounce در تب‌های متعدد می‌شود.

  • در نتایج SERP، برخی مرورگرها یا سیستم‌ها آیکون را کنار عنوان نمایش می‌دهند؛ یک آیکون حرفه‌ای می‌تواند CTR را بالا ببرد.

چک‌لیست نهایی قبل از انتشار (Copy-Paste)

  • فایل SVG (در صورت وجود) و PNGهای 16/32/48/180/192/512 ساخته شده‌اند

  • favicon.ico با چند سایز ساخته شده (16،32،48)

  • apple-touch-icon (180×180) آماده است

  • site.webmanifest با آیکون‌های 192 و 512 تنظیم شده

  • تمام تگ‌های <link> در <head> قرار گرفته‌اند (نمونه کد بالا)

  • meta theme-color تنظیم شده

  • CDN/Cache پاک شده یا پارامتر ورژن اضافه شده (?v=2)

  • تست در مرورگر دسکتاپ، موبایل، iOS و اضافه‌کردن به صفحه اصلی انجام شده

  • تغییرات در وردپرس (اگر سایت وردپرسی است) از طریق Customizer یا functions.php یا پلاگین اعمال شده

مثال عملی نهایی — بلوک کامل قابل قرار دادن در head (کپی‌کنید)

<!-- FAVICONS - SeoKhob -->
<link rel="icon" type="image/png" sizes="16x16" href="/favicons/favicon-16.png?v=3">
<link rel="icon" type="image/png" sizes="32x32" href="/favicons/favicon-32.png?v=3">
<link rel="icon" type="image/png" sizes="48x48" href="/favicons/favicon-48.png?v=3">
<link rel="shortcut icon" href="/favicons/favicon.ico?v=3">
<link rel="icon" href="/favicons/favicon.svg" type="image/svg+xml"><link rel=“apple-touch-icon” sizes=“180×180” href=“/favicons/apple-touch-icon.png?v=3”>
<link rel=“manifest” href=“/site.webmanifest?v=3”>
<meta name=“theme-color” content=“#0a84ff”><meta name=“msapplication-TileColor” content=“#0a84ff”>
<meta name=“msapplication-TileImage” content=“/favicons/mstile-144×144.png?v=3”>
<!– End FAVICONS –>

  • فاوآیکون کوچک است اما در تجربهٔ کاربری و برندینگ تأثیر زیادی دارد.

  • تهیه درست چند سایز و قرار دادن تگ‌های مناسب، شما را در همه پلتفرم‌ها حرفه‌ای نشان می‌دهد.

  • در وردپرس با چند کلیک یا با کمی کدنویسی می‌توانید کنترل کامل داشته باشید.

  • فراموش نکنید که بعد از آپلود، کش را مدیریت کنید تا کاربران تغییرات را ببینند.

مطالب زیر را حتما مطالعه کنید

دیدگاهتان را بنویسید