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

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

با وجود این مزایا، ممکن است همچنان ارزش فاویکون ها را زیر سوال ببرید. آنها حداقل فضای صفحه را اشغال می کنند، پس چرا باید قابل توجه باشند؟ وقتی می گوییم تأثیر یک فاویکون خوب طراحی شده بسیار فراتر از ابعاد ۱۶×۱۶ آن است، به ما اعتماد کنید.

در این مقاله، فاویکون چیست، چرا مهم است و نکات مفیدی در مورد نحوه ایجاد آن ارائه خواهیم کرد.

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

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

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

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

نمادها همچنین به شما کمک می کنند تا مطمئن شوید که سایت مورد نظر درست است. فرض کنید که در حال جستجو برای وب سایت Starbucks هستید. اگر لوگوی سبز رنگ Starbucks Siren را در یکی از نتایج جستجو مشاهده کردید، متوجه خواهید شد که این سایت درست است.

فاویکون کجا ظاهر می شود؟

فاویکون ها در چندین مکان در سراسر وب ظاهر می شوند. در اینجا تعداد کمی از آنها هستند:

• نوار جستجو
• توصیه های نوار جستجو
• تاریخچه جستجو
• برگه های مرورگر
• برنامه های نوار ابزار
• نشانک ها
• منوی کشویی نشانک

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

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

شایان ذکر است که شرکت ها معمولاً فاویکون های خود را بر اساس لوگوی خود قرار می دهند. به عنوان مثال، وب سایت مک دونالد از یک نسخه کوچکتر از لوگوی شرکت به عنوان فاویکون خود استفاده می کند.

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

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

تجربه ی کاربر

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

برندسازی و آگاهی از برند

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

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

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

اعتبار

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

به عنوان مثال، نگاهی به نتایج جستجوی گل فروشی ها در کارولینای جنوبی بیندازید. را گل و سبد وب سایت حرفه ای تر به نظر می رسد پائولین گرین وب سایت به این دلیل که یک فاویکون را نمایش می دهد – و در عین حال یکی با تم گل! بنابراین احتمال اعتماد و بازدید کاربران بیشتر است گل و سبد سایت.

فاویکون ها چگونه بر سئو تاثیر می گذارند؟

اگرچه فاویکون ها مستقیماً بر سئو تأثیر نمی گذارند، اما می توانند سیگنال های قوی به مرورگرها و کاربران ارسال کنند که به طور ارگانیک می تواند منجر به رتبه بندی بهتر سایت شود.

بیایید بررسی کنیم که چگونه:

1. فاویکون ها به موتورهای جستجو کمک می کنند تا وب سایت شما را شناسایی کنند

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

علاوه بر این، یک فاویکون به خوبی بهینه شده که به درستی در HTML پیوند داده شده است به موتورهای جستجو نشان می دهد که وب سایت شما با کیفیت بالا است، که می تواند رتبه سایت را بهبود بخشد.

2. فاویکون ها وب سایت شما را به یاد ماندنی تر می کنند

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

3. فاویکون ها شانس بوکمارک کردن وب سایت شما توسط کاربران را افزایش می دهد

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

نحوه ایجاد فاویکون در 4 مرحله

فقط به این دلیل که فاویکون کوچک است به این معنی نیست که باید در فرآیند ایجاد عجله کنید. با در نظر گرفتن این موضوع، این 4 مرحله را برای طراحی یک فاویکون ساده اما استراتژیک در نظر بگیرید.

1. طرح را تعیین کنید

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

به عنوان مثال، فاویکون آمازون اولین فلش اولیه و خمیده (نماینده لبخند مشتریان راضی) را از لوگوی معروف خود قرض گرفته است.

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

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

2. آن را ساده نگه دارید

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

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

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

3. از رنگ های برند استفاده کنید

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

رنگ های برند نیز هویت بصری ثابتی ایجاد می کنند. برای مثال Cadbury به رنگ بنفش سلطنتی و غنی خود معروف است. این برند از این رنگ برای فاویکون، وب سایت و کانال های رسانه های اجتماعی خود استفاده می کند.

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

4. قالب و اندازه مناسب را انتخاب کنید

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

رایج ترین فرمت های فایل فاویکون هستند ICO، PNG، و SVG.

• ICO توسط تمام مرورگرها از جمله اینترنت اکسپلورر پشتیبانی می شود.
• PNG توسط اکثر مرورگرها به جز اینترنت اکسپلورر پشتیبانی می شود.
• SVG تنها توسط چند مرورگر از جمله کروم، فایرفاکس و اپرا پشتیبانی می شود.

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

• 16×16 برای فاویکون های مرورگر
• 32×32 برای فاویکون های میانبر نوار وظیفه
• 96×96 برای فاویکون های میانبر دسکتاپ
• 180×180 برای فاویکون های لمسی اپل
• 300×300 برای فاویکون های SquareSpace
• 512×512 برای فاویکون های وردپرس

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

4. اشتباهات رایج فاویکون

درک اشتباهات رایج فاویکون می تواند به شما کمک کند هنگام ایجاد اشتباه از آنها اجتناب کنید. در اینجا چهار دام وجود دارد که باید در نظر داشت:

1. طرح های پیچیده

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

2. تصویرسازی بی ربط

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

3. نام تجاری ناسازگار

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

4. سازگاری ضعیف

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

نحوه اضافه کردن فاویکون در HTML

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

گزینه دیگر این است که یک پوشه در پوشه اصلی با عنوان "images" ایجاد کنید و فاویکون را در این پوشه ذخیره کنید. در این مورد، شما باید خط کد زیر را وارد کنید:

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

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

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