فاویکون چیست: چگونه با مثال ها یکی بسازیم [راهنمای مبتدی]

آیا از فاویکون برای خود استفاده می کنید؟ وب سایت ?

آیا تا به حال فکر کرده اید که چرا در مرورگر خود لوگوها یا نمادهای کوچکی را در کنار عنوان وب سایت می بینید؟ 

مانند این:

به این نمادهای کوچک و زیبا، فاویکون گفته می شود که نشان دهنده یک است وب سایت در مرورگرهای وب 

تعجب می کنید که چگونه یکی را ایجاد کنید؟ تو در جای درستی هستی.

در این مقاله کشف خواهیم کرد؛

• فاویکون دقیقا چیست و در کجای مرورگر شما قرار دارد؟
• چگونه این آیکون های کوچک برای صاحبان وب سایت و کاربران مفید است؟
• چه چیزی یک فاویکون خوب را می سازد و چگونه می توانید آن را ایجاد کنید که از بقیه متمایز باشد؟

آیا شما کنجکاو هستید؟ بیایید به جزئیات برویم.

فهرست مطالب ☰

فاویکون چیست؟

فاویکون یک تصویر کوچک و منحصر به فرد است که در تب مرورگر در کنار عنوان شما ظاهر می شود وب سایت.

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

در اینجا نمونه ای از ظاهر یک فاویکون آمده است:

در اینجا برخی از فاویکون های اضافی از وب سایت های محبوب نمایش داده شده در نوار نشانک های کروم وجود دارد.

مزایای افزودن فاویکون به سایت شما چیست؟

فاویکون وب سایت شما نشان دهنده هویت سایت است. اگر می خواهید یک برند شخصی بسازید یا وب سایت خود را به یاد ماندنی تر کنید، به یک فاویکون جذاب نیاز دارید.

در اینجا برخی از مزایای اصلی افزودن فاویکون وردپرس به سایت شما در سال 2024 آورده شده است.

• حرفه ای گری: بزرگترین مزیت استفاده از فاویکون این است که وب سایت شما را حرفه ای تر و از نظر بصری جذاب تر می کند.
• تجربه کاربری بهتر: اکثر کاربران آنلاین معمولاً چندین تب باز در مرورگر وب خود دارند. داشتن یک فاویکون منحصر به فرد و جذاب به شما کمک می کند تا سایت خود را به راحتی شناسایی کنید. به آمازون، توییتر (X)، یوتیوب و غیره فکر کنید. با مشاهده فاویکون ها به راحتی می توانید این سایت ها را شناسایی کنید.
• مزایای SEO : تقریباً تمام موتورهای جستجو، از جمله گوگل و بینگ، فاویکون ها را در نتایج جستجو نمایش می دهند که می تواند به برجسته شدن وب سایت شما کمک کند.
• شناخت برند: هرچه افراد بیشتری فاویکون وب سایت شما را ببینند، تشخیص برند شما برای آنها آسان تر است.
• موارد دلخواه: بسیاری از مردم معمولاً وقتی چیزی جالب را پیدا می کنند صفحه (یا وب سایت) را نشانه گذاری می کنند. فاویکون وب سایت شما را در لیست علاقه مندی ها متمایز می کند و کاربران را تشویق می کند تا دوباره از آن بازدید کنند.

چگونه یک فاویکون به وبلاگ وردپرس خود اضافه کنیم؟

قبل از یادگیری نحوه افزودن فاویکون به سایت خود باید یک فاویکون ایجاد کنید. اگر قبلاً یک لوگو برای وب سایت خود دارید، می توانید از آن به عنوان فاویکون استفاده کنید. 

اگر یکی ندارید، بسیاری از مولدهای فاویکون رایگان به صورت آنلاین وجود دارند که می توانند به شما در ایجاد یک فاویکون حرفه ای برای وب سایت خود کمک کنند.

برای مثال می توانید از ژنراتور favicon.io . شما می توانید از این سایت برای تبدیل لوگوی وب سایت موجود خود به فاویکون یا ایجاد یکی از ابتدا استفاده کنید.

هنگامی که در سایت آنها قرار گرفتید، متن مربوط به نام کسب و کار یا وب سایت خود را وارد کنید، و به طور خودکار یک پیش نمایش فاویکون مانند تصویر زیر نمایش داده می شود.

همانطور که می بینید، می توانید فاویکون خود را با تغییر متن، پس زمینه، اندازه فونت، رنگ فونت، رنگ پس زمینه و غیره آن طور که می خواهید ویرایش کنید. 

پس از اتمام کار، می‌توانید روی دکمه «دانلود» کلیک کنید تا آن را دانلود کنید.

پس از آماده شدن تصویر فاویکون، فاویکون جدید را با استفاده از یکی از روش های زیر به سایت وردپرس خود اضافه کنید.

روش 1: از سفارشی ساز وردپرس (ساده ترین) استفاده کنید

برای افزودن فاویکون به سایت وردپرس خود، در داشبورد وردپرس خود به Appearance > Customize بروید.

روی Site Identity کلیک کنید. 

کمی پایین بروید و "نماد سایت" را پیدا خواهید کرد.

یک تصویر از کتابخانه رسانه خود انتخاب کنید یا یک تصویر جدید آپلود کنید. مطمئن شوید که مربع و حداقل 512 × 512 پیکسل باشد تا بهترین نتیجه را داشته باشید.

تصویر را به صورت دلخواه برش داده و روی Select کلیک کنید. برای ذخیره تغییرات خود روی انتشار کلیک کنید. همین، تمام شد.

روش 2: از افزونه Favicon استفاده کنید

همچنین می توانید از a استفاده کنید پلاگین وردپرس برای افزودن فاویکون به سایت وردپرس خود.

یک افزونه مانند نصب کنید Favicon از RealFaviconGenerator ، که یک افزونه رایگان است که به شما کمک می کند یک فاویکون در اندازه های مختلف ایجاد و اضافه کنید، از جمله:

• مرورگرهای دسکتاپ
• آیفون / آی پد
• دستگاه های Android
• تبلت های ویندوز 8 و بالاتر

افزونه را فعال کنید و دستورالعمل های آن را دنبال کنید.

شما باید تصویر خود را انتخاب کنید و افزونه تمام فایل ها و کدهای لازم را ایجاد می کند.

این چیزی است که به نظر می رسد؛

روش 3: افزودن دستی فاویکون (برای کاربران باتجربه)

فایل فاویکون خود را با استفاده از یکی از مولدهای فاویکون رایگان که در بالا ذکر شد ایجاد کنید. 

مطمئن شوید که فاویکون یک تصویر مربعی است که در قالب فایل ico. ذخیره شده است.

با استفاده از یک سرویس گیرنده FTP (مانند FileZilla) وارد وب سایت خود شوید و فایل فاویکون را در فهرست اصلی وب سایت خود آپلود کنید.

سپس قسمت آخر اضافه کردن کد HTML است.

فایل‌های تم وب‌سایت خود را ویرایش کنید (معمولا header.php) و قطعه کد زیر را اضافه کنید و به جای «favicon.ico» نام فایل واقعی فاویکون خود را قرار دهید:

همین، تمام شد.

وارد کننده رمارک : حتماً فاویکون خود را بر روی دستگاه ها و مرورگرهای مختلف تست کنید تا از نمایش صحیح آن مطمئن شوید. همچنین سعی کنید از پس زمینه شفاف برای فاویکون خود برای بهترین نتایج استفاده کنید.

فرمت های رایج فاویکون

سه فرمت رایج فایل برای فاویکون ها وجود دارد که عبارتند از:

• ICO (نماد ویندوز)
• PNG (گرافیک شبکه قابل حمل)
• SVG (گرافیک برداری مقیاس پذیر)

ICO محبوب ترین و اصلی ترین فرمت فاویکون است که توسط مایکروسافت توسعه یافته است. دلیل اصلی استفاده از این فرمت این است که با تمام مرورگرهای اصلی از جمله نسخه های قدیمی تر مانند اینترنت اکسپلورر سازگار است.

فرمت PNG به طور گسترده توسط طراحان حرفه ای استفاده می شود. این فرمت از پس‌زمینه‌های شفاف پشتیبانی می‌کند و اندازه فایل آن اغلب کوچک‌تر از ICO است.

اگر می‌خواهید از یک فاویکون بدون از دست دادن کیفیت استفاده کنید و مقیاس‌بندی کنید، فرمت SVG توصیه می‌شود. با این حال، این قالب فاویکون به اندازه ICO یا PNG پشتیبانی نمی شود، به خصوص در دستگاه ها یا مرورگرهای قدیمی.

نکات سریع برای ایجاد فاویکون وردپرس

در اینجا چند نکته مفید برای ایجاد یک فاویکون منحصر به فرد برای سایت وردپرس شما آورده شده است.

• آن را ساده نگه دارید: فاویکون ها تصاویر بسیار کوچکی هستند، بنابراین از استفاده بیش از حد متن یا متن بسیار کوچک خودداری کنید. سعی کنید از اشکال پررنگ، حروف ساده و لوگوهای ساده استفاده کنید. در صورت امکان، از یک نسخه ساده شده از لوگوی خود استفاده کنید.
• الهام گرفته: از بزرگترین برندها مانند آمازون، گوگل، تسلا، اپل و غیره الهام بگیرید. یا بهترین وب سایت های صنعت خود را برای الهام گرفتن و ایجاد فاویکون ها جستجو کنید.
• از عکس خود استفاده کنید: اگر به فاویکون وبلاگ ما نگاه کنید، از تصویر موسس استفاده می کنیم. اگر می خواهید یک برند شخصی ایجاد کنید، از عکس خود به عنوان فاویکون استفاده کنید. این بسیار ساده تر و منحصر به فرد تر است.
• از پس زمینه شفاف استفاده کنید: همیشه از یک پس زمینه شفاف استفاده کنید. برای دید بهتر می توانید از فرمت PNG با شفافیت استفاده کنید. همچنین، این اجازه می دهد تا فاویکون به طور یکپارچه با پس زمینه های مختلف مرورگر ترکیب شود. فاویکون خود را در قالب PNG یا ICO ذخیره کنید.
• فانتزی نباش: شما مجبور نیستید از هر رنگ موجود استفاده کنید. به یک پالت رنگ محدود بچسبید. بهتر است از یک یا دو رنگ برای حداکثر دید استفاده کنید.
• از اندازه صحیح استفاده کنید: از یک تصویر مربعی با اندازه توصیه شده 512 × 512 پیکسل استفاده کنید. بهترین بخش وردپرس این است که به طور خودکار نسخه های کوچکتر را برای دستگاه های مختلف مانند دستگاه های تلفن همراه و تبلت ها تولید می کند. 
• استفاده از ابزار: می توانید از ابزارهای آنلاین رایگان مانند Favicon.io یا RealFaviconGenerator.net برای ایجاد و بهینه سازی فاویکون خود به راحتی استفاده کنید.

سوالات متداول Favicons

در اینجا چند سوال متداول در مورد فاویکون ها وجود دارد. 

نظرات نهایی در مورد اینکه یک تصویر فاویکون چیست

به یاد داشته باشید که اندازه هنگام ایجاد فاویکون اهمیت دارد. اندازه ایده آل 512 × 512 پیکسل است، اما برای سازگاری بهینه (در مرورگرها و دستگاه های مختلف) باید تا 16 × 16 پیکسل مقیاس پذیر باشد.

همچنین از لوگو، نماد برند یا هر تصویری که محتوای وب سایت شما را منعکس می کند استفاده کنید.

بنابراین، نظر شما در مورد استفاده از فاویکون چیست؟ آیا هیچ سوالی دارید ؟ در نظرات به ما اطلاع دهید.