وقتی به مردم درباره اهمیت فاویکون در استراتژی کلی برندینگ آنلاینشان می گویم، آنها معمولاً همین را می گویند: “آیا شما هم کمی از این موضوع برندسازی استفاده نمی کنید. دور؟»

پاسخ من معمولاً این است: «اگر در مورد تلاش‌های برندسازی خود جدی هستید، نه!»

درست است، فاویکون‌ها چیزهای بسیار کوچکی هستند، احتمالاً کم‌اهمیت‌ترین بخش سایت، اما توجه به جزئیات است که یک سایت را متمایز می‌کند. و حتی اگر احمقانه به نظر برسد، فاویکون ها از نظر برندسازی بسیار مهم هستند.

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

من فهرست بزرگی را با منابع مرتبط با فاویکون در زیر به اشتراک می‌گذارم، بنابراین این صفحه را برای مراجعات بعدی نشانک‌گذاری کنید. اوه، و اگر این کار را کردید، به فاویکون WDD درست در لیست نشانک خود توجه کنید 😉

در صورتی که شما یک طراح یا هر نوع کمربند مشکی در هنرهای فاویکون نیستید، این مقاله احتمالاً همه چیزهایی را که در مورد این مربع‌های کوچک 16×16 پیکسلی گریزان و حتی برخی جالب باید بدانید را پوشش می‌دهد. علاقه مندی ها نیز پس لذت ببرید!

 

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

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

Favicons

دو نمونه از فاویکون در مرورگر زبانه‌دار Google Chrome.

اگر علاقه مند به درک بخشی از تاریخچه اینترنت هستید، در اینجا یک واقعیت جالب وجود دارد:

کلمه فاویکون تصویری است که از کلمات “مورد علاقه” و “آیکون” ساخته شده است، و به این دلیل نامگذاری شده است که برای اولین بار توسط اینترنت اکسپلورر 5 مایکروسافت پشتیبانی می شود و فقط در صورتی که از اینترنت اکسپلورر استفاده نمی کنید، این ویژگی نشانک‌گذاری مرورگر موارد دلخواه نامیده می‌شود.

 

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

در اوایل پیدایش اینترنت، ابزارهایی مانند گوگل آنالیتیکس در ذهن چند نفر از وب‌سایت‌ها تنها رویا بودند، بنابراین هر چقدر هم که عجیب به نظر برسد، در آن زمان از فاویکون‌ها به عنوان راهی برای تخمین استفاده می‌شد. ترافیک وب سایت با شمارش تعداد بازدیدکنندگانی که صفحه را نشانک کرده اند. (این یک قطعه جالب دیگر در تاریخ اینترنت است!)

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

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

favicons

اما من نمی‌توانم از دریچه برندسازی، حوزه تخصصم، از دیدن چیزها اجتناب کنم، بنابراین فکر می‌کنم فاویکون‌ها حتی از دیدگاه برندسازی مرتبط‌تر هستند. باز هم، با توجه به نقاط مختلف تعامل، عدم استفاده از آنها برای افزایش آگاهی از برند جرم است. حقیقت این است که یافتن راه‌های خلاقانه برای بهبود برندینگ آنلاین همیشه یک کار چالش برانگیز است و داشتن فاویکون یک راه آسان و ساده برای انجام آن است. پس برای خودت یکی بگیر دوست من!

 

چگونه یک فاویکون ایجاد کنیم؟

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

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

لیست تولیدکننده Favicon که به دنبال آن هستید در اینجا آمده است:

وب‌سایت‌های بالا از نظر فایلی که دریافت می‌کنید بسیار متفاوت هستند. به خصوص از نظر حجم و پسوند فایل. اگر به دنبال دریافت سازگارترین فایل ممکن هستید، اکیداً توصیه می‌کنم یک تصویر در اندازه ۱۶×۱۶ پیکسل را با فرمت «ico» دانلود کنید.

اگر نیاز به الهام دارید، گالری های فاویکون زیر را بررسی کنید:

 

 

چگونه از فاویکون خود استفاده کنیم؟

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

مرحله 1

شما باید فایل “favicon.ico” را در سرور خود آپلود کنید. برای انجام این کار، نوار آدرس مرورگر خود را به سرور FTP خود ببرید. URL شما باید شبیه این باشد:

اینتر را فشار دهید و مرورگر قبل از اجازه دسترسی به سرور فایل، از شما نام کاربری و رمز عبور می خواهد. هنگامی که وارد شدید، فقط فایل “favicon.ico” را در پوشه اصلی آپلود کنید و کارتان تمام است.

مرحله 2

اکنون باید صفحه HTML وب سایت خود را ویرایش کنید تا به مرورگرها کمک کنید تصویر فاویکون شما را پیدا کنند. پنجره FTP خود را باز نگه دارید، فایل “index.html” یا “header.php” را از سرور خود پیدا و دانلود کنید و طبق فایلی که دریافت می کنید مراحل زیر را دنبال کنید:

اگر وب سایت شما از HTML ساده ساخته شده است، کد زیر را در قسمت HEAD فایل “index.html” وارد کنید و فراموش نکنید که “yoursite.com” را برای آدرس وب سایت خود تغییر دهید.

>

 

اگر از وردپرس استفاده می کنید، کد زیر را در قسمت HEAD فایل “header.php” خود وارد کنید.

 

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

در حقیقت، اکثر مرورگرهای مدرن به اندازه کافی هوشمند هستند که می توانند فایل فاویکون شما را حتی بدون هیچ کدی پیدا کنند، اما فقط تا زمانی که تصویر فاویکون دارای 16×16 پیکسل باشد، به عنوان “favicon.ico” نامگذاری شده است. ” و در پوشه اصلی پوشه وب سایت شما ذخیره می شود.

 

نحوه ایجاد فاویکون در فتوشاپ

با وجود ابزارهای بسیار زیادی که به شما در ایجاد فاویکون کمک می کند، چرا می خواهید راه سختی را طی کنید و آن را در فتوشاپ ایجاد کنید؟ خوب، اگر شما یک طراح هستید و می خواهید بهترین بهره را از فاویکون خود ببرید، مطمئناً این روش حرفه ای انجام آن است. ترفند این است که فتوشاپ به طور بومی از فایل های “ico” پشتیبانی نمی کند، بنابراین باید این افزونه را از Telegraphics.

دانلود کنید

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

گزینه “ICO” را در کادر “Save As” فتوشاپ خود جستجو کنید تا تأیید کنید که افزونه نصب شده است.

یک سند جدید در فتوشاپ با انتخاب آیتم منو “File” و گزینه زیر “New” ایجاد کنید، سپس بوم خود را روی 64×64 پیکسل تنظیم کنید. چرا؟ از آنجایی که اندازه فاویکون نهایی 16×16 بسیار کوچک است، داشتن یک بوم بزرگتر برای کار کردن به شما کمک می کند تا خلاقیت خود را به جریان بیندازید. سپس لوگوی خود را در سند بچسبانید و قدرت خلاقانه تک شاخ جادویی خود را آزاد کنید.

پس از اتمام کار، به سادگی منوی “تصویر” و گزینه زیر “اندازه تصویر” را انتخاب کنید و تصویر را به 16×16 پیکسل کاهش دهید. به یاد داشته باشید که روی “Resample Image” کلیک کنید و “Bicubic Sharper” را انتخاب کنید، این برای اطمینان از اینکه تصویر در هنگام تغییر اندازه تار نمی شود. اگر نتیجه نهایی را دوست ندارید، به سادگی آخرین تغییرات خود را با “AltCtrl/AltCmd+Z” لغو کنید و تا زمانی که از آن راضی نباشید، به کار روی طرح ادامه دهید.

برای اینکه فاویکون خود را تمام کنید تنها کاری که باید انجام دهید این است که روی منوی “File” و گزینه زیر “Save As” کلیک کنید، در آنجا به یاد داشته باشید که نام فایل خود را “favicon.ico” بگذارید. یک بار دیگر، کار تمام شد!

 

نتیجه گیری

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

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

 

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

تصویر/تصویر کوچک ویژه، تصویر مخدوش از طریق Shutterstock

بدون دیدگاه

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

نشانی ایمیل شما منتشر نخواهد شد.