تغییر favicon وردپرس؛ رفع به‌روزرسانی‌نشدن Site Icon در مرورگر

۱. Site Icon، لوگو و favicon را با هم اشتباه نگیرید

Site Icon یا favicon تصویر کوچک کنار عنوان تب، bookmark یا صفحهٔ خانهٔ موبایل است؛ لوگوی header داخل محتوای صفحه کاربرد دیگری دارد. تعویض logo لزوماً favicon را عوض نمی‌کند.

مشخص کنید آیکون قدیمی در تب مرورگر، نتیجهٔ جست‌وجو، bookmark یا shortcut موبایل دیده می‌شود. هر مصرف‌کننده ممکن است URL، اندازه و cache مستقل داشته باشد.

• آیکون کدام سطح قدیمی است؟
• لوگوی header عوض شده ولی tab نه؟
• درخواست تصویر چه URLی دارد؟
• مشکل در یک مرورگر است یا همه؟

HTML صفحه و درخواست image را در DevTools بررسی کنید تا بفهمید سایت چه فایل و link tagی می‌فرستد. screenshot مرورگر به‌تنهایی محل فایل را نشان نمی‌دهد.

نوع نمایش را پیش از پاک‌کردن cache مشخص کنید

اگر فقط یک مرورگر مشکل دارد، ابتدا cache محلی را بررسی کنید؛ اگر همهٔ دستگاه‌ها تصویر قدیمی می‌بینند، تنظیم وردپرس، CDN یا template محتمل‌تر است.

لوگو و Site Icon تنظیمات جدا دارند

۲. فایل مربع و خوانا را برای Site Icon آماده کنید

آیکون در اندازهٔ کوچک دیده می‌شود؛ شکل ساده، تضاد کافی و فضای امن اطراف لوگو بهتر از متن ریز یا جزئیات زیاد خوانده می‌شود. ابتدا نسخهٔ مربع و باکیفیت از منبع اصلی بسازید.

WordPress در تنظیم Site Icon تصویر مربع می‌پذیرد و نسخه‌های لازم را برای مصرف‌کننده‌ها تولید می‌کند؛ تصویر بسیار کوچک یا crop نامناسب در تب تار یا بریده دیده می‌شود.

آیکون باید در اندازهٔ favicon قابل تشخیص بماند

1. نسخهٔ مربع از فایل اصلی تهیه کنید.
2. خوانایی در اندازهٔ کوچک را بسنجید.
3. قالب و شفافیت را بررسی کنید.
4. فایل تازه را با نام یکتا آماده کنید.

PNG برای شفافیت و لبهٔ تمیز مناسب است؛ در صورت استفاده از JPEG، پس‌زمینهٔ ناخواسته را بررسی کنید. SVG را بدون sanitizer یا حمایت مستند قالب مستقیماً به‌عنوان favicon بارگذاری نکنید.

SVG ناشناس را بدون پاک‌سازی بارگذاری نکنید

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

۳. Site Icon را از رابط قالب و WordPress تنظیم کنید

در classic theme، گزینه معمولاً از Appearance > Customize > Site Identity در دسترس است؛ در block theme ممکن است مسیر Site Editor و تنظیمات Styles یا Site Identity متفاوت باشد.

تصویر درست را انتخاب و crop نهایی را بازبینی کنید، سپس ذخیره را تأیید کنید. اگر چند سایت در multisite دارید، تنظیم Site Icon هر سایت را جدا بررسی کنید.

• classic theme: Site Identity
• block theme: مسیر Site Editor
• multisite: تنظیم هر site
• theme option و page builder جدا از Site Icon

تغییر logo در page builder یا theme options را با Site Icon یکی نگیرید. قالبی که link tag سفارشی می‌سازد ممکن است فایل تنظیم‌شده در core را override کند.

بعد از ذخیره، فایل رسانه، مالکیت آن و URL را کنترل کنید. اگر تنظیم در پنل ذخیره نمی‌شود، خطای upload یا permission را جدا بررسی کنید.

۴. HTML و URL فایل آیکون را در خروجی صفحه بررسی کنید

پس از ذخیره، source HTML را برای rel=icon، apple-touch-icon یا linkهای theme پیدا کنید. وجود چند link tag با URL متفاوت می‌تواند انتخاب مرورگر را مبهم کند.

URLی را که مرورگر واقعاً درخواست می‌کند باز کنید و status، content-type و محتوای فایل را بررسی کنید. پاسخ 404، 403، HTML یا تصویر قدیمی به مرحلهٔ متفاوتی اشاره می‌کند.

source صفحه تعیین می‌کند مرورگر کدام فایل را می‌گیرد

دستورهای زیر فقط header دو فایل را می‌خوانند؛ URLها را با path واقعی در HTML عوض کنید. اگر favicon از URL تولیدشده یا چند اندازه می‌آید، همان endpoint را بررسی کنید.

status و content-type را با HTML تطبیق دهید

# URLهای واقعی دیده‌شده در source را جایگزین کنید.
curl -I https://example.com/wp-content/uploads/site-icon.png
curl -I https://example.com/favicon.ico

# status، content-type و cache headers را مقایسه کنید.

مطمئن شوید response با MIME تصویری سازگار و بدون redirect به host یا login است. URL تصویر را در پنجرهٔ خصوصی هم باز کنید تا دسترسی وابسته به نشست نباشد.

۵. cache مرورگر، bookmark و shortcut موبایل را جدا تازه کنید

favicon می‌تواند مدت زیادی در cache مستقل مرورگر بماند؛ reload معمولی صفحه همیشه درخواست دوبارهٔ آن را ایجاد نمی‌کند. یک پروفایل تازه یا دستگاهی که قبلاً سایت را ندیده آزمایش مناسبی است.

برای تفکیک، URL تصویر را مستقیم باز کنید یا نام فایل تازه‌ای به Site Icon بدهید. پاک‌کردن کل cache مرورگر ممکن است داده‌های login و سایت‌های دیگر را هم تحت تأثیر قرار دهد.

1. URL آیکون را مستقیم باز کنید.
2. مرورگر یا پروفایل تازه را تست کنید.
3. shortcut و bookmark را بازسازی کنید.
4. نمایش search engine را جداگانه پایش کنید.

bookmark، pinned tab و shortcut صفحهٔ خانهٔ موبایل ممکن است آیکون زمان ساخته‌شدن را نگه دارند. پس از تغییر، shortcut را با روش سیستم‌عامل بازسازی کنید.

اگر search engine هنوز icon قدیمی نشان می‌دهد، cache مرورگر وب شما علت مستقیم آن نیست؛ crawler باید دوباره فایل قابل‌دسترسی را دریافت کند و زمان به‌روزرسانی می‌تواند متفاوت باشد.

۶. CDN، page cache و image optimization را کنترل کنید

CDN یا proxy ممکن است فایل قبلی را با همان URL نگه داشته باشد. response headerهای age، cache status و ETag را مقایسه و فقط asset مرتبط را با روش سرویس purge کنید.

اگر optimizer تصویر را تبدیل یا WebP ارائه می‌کند، مطمئن شوید favicon به فایل سازگار تبدیل شده و browser variant درست را می‌گیرد. قوانین عمومی optimizer ممکن است آیکون را از مسیر مورد انتظار خارج کند.

• cache status و ETag فایل
• HTML قدیمی در page cache
• تبدیل WebP یا image optimizer
• purge محدود برای URL آیکون

page cache هم می‌تواند HTML دارای link قدیمی را نگه دارد، حتی اگر خود فایل تازه شده باشد. ابتدا source HTML و سپس URL فایل را جدا بررسی کنید.

پس از purge، بار origin و زمان cache را کنترل کنید. پاک‌سازی کامل CDN برای یک آیکون کوچک معمولاً لازم نیست.

۷. link tag تکراری در قالب یا افزونه را پیدا کنید

قالب، child theme، افزونهٔ branding یا header injection می‌تواند favicon قدیمی را در head چاپ کند. source HTML را برای همهٔ rel=iconها جست‌وجو و URLها را با تنظیم Site Icon مقایسه کنید.

اگر دو link tag وجود دارد، مالک هرکدام را از کد و تنظیمات پیدا کنید و فقط منبع غیرلازم را حذف کنید. افزودن tag سوم اغلب مشکل انتخاب مرورگر را حل نمی‌کند.

یک منبع قابل‌اعتماد برای favicon نگه دارید

1. تمام linkهای icon در head را فهرست کنید.
2. منبع هر tag را پیدا کنید.
3. tag تکراری را در staging حذف کنید.
4. path را با زیرپوشه و host تطبیق دهید.

در staging قالب پیش‌فرض یا افزونهٔ branding را یکی‌یکی ایزوله کنید. فایل parent را مستقیم تغییر ندهید؛ update تغییر را حذف و نگهداری را دشوار می‌کند.

link tag اضافی را بدون یافتن مالک پاک نکنید

اگر custom head hook استفاده می‌شود، ترتیب، شرط صفحه و URL مطلق را بررسی کنید. مسیر relative در نصب زیرپوشه یا multisite ممکن است به فایل نادرست برسد.

۸. favicon.ico، manifest و آیکون‌های موبایل را با دامنه هماهنگ کنید

برخی مرورگرها یا integrationها ممکن است مسیر ریشهٔ /favicon.ico یا iconهای مخصوص پلتفرم را درخواست کنند. بررسی کنید سرور برای این URL فایل قدیمی یا خطای 404 برنمی‌گرداند.

فایل web manifest یا apple-touch-icon می‌تواند جدا از Site Icon تعریف شده باشد. اگر shortcut موبایل یا نصب وب‌اپ آیکون دیگری دارد، فایل و cache همان manifest را بررسی کنید.

• /favicon.ico و پاسخ ریشه
• apple-touch-icon
• web manifest و pinned shortcut
• دامنه، TLS و CDN مقصد

در سایت چندزبانه یا چنددامنه، absolute URL و CDN host نباید به محیط staging یا دامنهٔ قدیمی اشاره کند. مهاجرت DNS و TLS برای assetهای icon هم اهمیت دارد.

اگر سرور فایل root-level را نیاز دارد، آن را با روش deploy و MIME مناسب مدیریت کنید؛ فایل‌های تصادفی در web root ممکن است با update یا release بعدی پاک شوند.

۹. آیکون را در چند دستگاه و اندازه بررسی کنید

پس از تغییر، tab مرورگر، bookmark، shortcut موبایل و صفحهٔ نصب‌شده را جدا بررسی کنید. همهٔ آن‌ها الزاماً یک asset یا زمان cache یکسان ندارند.

در اندازهٔ کوچک، crop و تضاد را دوباره ببینید؛ تصویر مربع بزرگ ممکن است پس از ماسک دایره‌ای یا گوشه‌گرد بخشی از لوگو را از دست بدهد.

1. tab و bookmark desktop
2. shortcut و home screen موبایل
3. crop در ماسک‌های مختلف
4. URL، status و HTTPS برای مهمان

مطمئن شوید صفحهٔ اصلی عمومی است و آیکون در URL نهایی با HTTPS و status موفق قابل‌دریافت است. یک file icon که به login redirect شود برای کاربر مهمان مفید نیست.

برای کاربران کم‌بینا، favicon مکمل نام سایت است و نباید تنها راه شناسایی یا اطلاع‌رسانی باشد. عنوان صفحه و برند قابل‌خواندن را نیز درست تنظیم کنید.

۱۰. تغییر Site Icon را در فرایند انتشار ثبت کنید

نام فایل، منبع اصلی، تاریخ تغییر و owner را در سند برند یا release ثبت کنید. این کار از افزودن دوبارهٔ favicon قدیمی در قالب یا CDN جلوگیری می‌کند.

پس از update قالب، افزونهٔ branding یا CDN policy، source head و cache URL را کوتاه آزمایش کنید. link tag تکراری می‌تواند پس از deploy برگردد.

اگر آیکون قدیمی فقط در یک browser باقی ماند اما URL و HTML تازه‌اند، به احتمال زیاد cache همان client است؛ پاک‌سازی سرور بیشتر ممکن است بی‌فایده باشد.

برای تغییرهای بعدی، فایل versioned و test plan چنددستگاهی نگه دارید تا تفاوت رفتار tab، search و home-screen قابل تشخیص باشد.

تغییر تصویر در پیشخوان تضمین نمی‌کند مرورگر همان فایل جدید را بخواند؛ URL، cache و link tag خروجی را هم بررسی کنید.