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

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

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

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

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

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

اهمیت فاوآیکون ها برای وب سایت

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

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

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

برای ساخت و ایجاد یک فاوآیکن برای سایت خود باید چند مرحله را پشت سر بگذارید که هر مرحله ویژگی هایی دارد پس با ما همراه باشید.

• مرحله اول: تصویر خود را ایجاد کنید

می‌توانید با استفاده از ویرایشگرهایی مانند Fireworks، Photoshop،Corel Paint  یا یک جایگزین طراحی گرافیک دیگر بصورت رایگان یک تصویر فاوآیکون طراحی کنید. برای حمایت از هویت برند خود باید از یک عکس ثابت استفاده کنید، بسیاری از کسب و کار ها به سادگی از لوگوی شرکت خود استفاده می کنند. برای سهولت در ویرایش، با یک مربع 64 در 64 پیکسل شروع کنید و بعداً می توانید آن را به 16 در 16 پیکسل کاهش دهید. سپس باید فایل را به صورت  jpg، png، gif، bmp یا tif ذخیره کنید.

مقاله پیشنهادی : وارفریم چیست ؟

• مرحله دوم: تصویر را تبدیل کنید

 هنگامی که از تصویر انتخابی خود را طبق شرایط گفته شده انتخاب و طراحی کردید، باید به عنوان favicon.ico ذخیره شود. این فرمت، پیشنهادی است که توسط اکثر مرورگر های وب پشتیبانی می شود. برای تبدیل فایل خود به فرمت ico، ممکن است لازم باشد از یک ابزار آنلاین مانند iconifier.net،prodraw.net  یا faviconer.com استفاده کنید. بسیاری سایت دیگر نیز در دسترس هستند که می توانند کار شما را انجام دهند اما این  سایت ها پیشنهاد ما هستند که شما باید تصویر خود را آپلود کنید، اندازه نماد را انتخاب کنید و سپس می توانید فایل جدید .ico خود را ذخیره و دانلود کنید. این نکته را در نظر داشته باشید که قبلاً فاوآیکون ها باید در قالب ICO ارائه می شدند. اما امروز اشکالی ندارد که فایل ها را با فرمت PNG ارائه کنید  (به جز نماد Safari Pinned Tab که باید به صورت SVG ارائه شود).

• مرحله سوم: تصویر را در وب سایت خود آپلود کنید

 فایل ico، باید در دایرکتوری وب سایت شما آپلود شود. سپس هنگام رفتن به www.yoursite.co.uk/favicon.ico تصویر باید قابل مشاهده باشد.

• مرحله چهارم: کد HTML اصلی را اضافه کنید

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

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

ویژگی های فاوآیکن خوب چیست؟

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

نکاتی درباره فاوآیکون های اپل

فاوآیکون های اپل باید در قالب PNG عرضه شوند. می توانید با ارائه یک نماد لمسی Apple 180x180 که به ‌طور خودکار برای اندازه های مختلف آیفون و آی‌پد مقیاس‌بندی شده اند طراحی کنید. این در اکثر موارد به خوبی کار خواهد کرد. در غیر این صورت، می توانید اندازه های اضافی را برای دستگاه های مختلف اپل ارائه دهید که شامل:

 60*60
 76x76
 120x120
 152x152
 180x180

مقاله پیشنهادی : بهینه سازی شبکه های اجتماعی

نکاتی در باره فاوآیکون های اندروید، کروم و اپرا

اندروید، کروم و اپرا نیز از خروجی تصاویر PNG پشتیبانی می کنند. که سایز این فاوآیکون ها 192*192 یا 512*512 می باشد که این اندازه ها توسط گوگل توصیه می شود.

از زمان معرفی آیکون های تطبیقی در اندروید، وب سایت‌ هایی که به صفحه اصلی اندروید اضافه می‌شوند، طراحی 192*192 را پنهان می‌کنند، بنابراین نماد پس از نصب کاربر شکل می گیرد. این فاوآیکون ها ممکن است در طرح های مختلف هندسی مانند، بیضی، مستطیل، دایره یا حتی شکل قطره باشد. بنابراین باید یک فاوآیکون PNG با پس ‌زمینه یک رنگ، در ابعاد 192*192 یا 512*512 ایجاد کنید. این فاوآیکون ها را با افزودن یک فایل manifest.json به سایت خود و پیوند دادن به آن در برچسب ها پیاده سازی کنید.

نحوه ایجاد فاوآیکون برای مرورگر سافاری

این یک مورد خارق العاده است و تنها فاوآیکونی است که باید در قالبی با عنوان یک فایل SVG ارائه شود. هنگامی که کاربر یک برگه را به پنجره مرورگر Safari پین می کند، به عنوان نماد تصویر کوچک نمایش داده می شود. این فاوآیکون باید یک فایل SVG 100%  مشکی با پس زمینه شفاف باشد.SVG  فقط می تواند یک لایه باشد و سافاری نیاز دارد که ویژگی viewBox SVG روی "0 0 16 16" تنظیم شود.

در نهایت

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