اکثر شما کاربران هنگام ورود به وبسایتهای مختلف آیکون کوچکی که در تب مروگر درج شده است، را دیده اید.فاوآیکن (Favicon) مخفف عبارت Favorites Icon به معنای شکل کوچک و آیکون مورد دلخواه شما است. و تحت عناوین shortcut icon, website icon, tab icon, URL icon یا bookmark icon هم شناخته می شود. این ایکن کوچ متناسب با هر وبسایت و برندی، طراحی میشود؛گاهی این طراحی برگرفته از بخش کوچکی از لگو هست به عنوان مثال فاوآیکن گوگل یک آیکن کوچک G هست که برگرفته از عبارت google
مزایای ساخت فاوآیکون
داشتن favicon الزامی است و ما به همه صاحبان وبسایت ها توصیه میکنیم که فاوآیکن را در وبسایت خود استفاده کنند.در ادامه مزایای ساخت فاوآیکون را ذکر میکنیم:
شناخت برند
فاوآیکون باعث میشود سایت شما دربین چندین سایتی که در تب های مرورگر بازکردید برای کاربر مشخص باشد و سریعتر آن را پیدا کنند.شناخت برند برای سئو بسیار مهم است. به عنوان مثال، اگر در حال سئو برای یک شرکت دارویی هستید، فاوآیکون وبسایت به کاربران گوگل کمک می‌کند تا آن وبسایت را در نتایج جستجو تشخیص دهند.
اعتبار و اعتماد
اگر سایتی فاقد فاوآیکون باشد، مرورگر وب به صورت پیش فرض، سند خالی را در برگه مرورگر نمایش می‌دهد. و بدتر از همه اینکه اگر سایت شما کنار وبسایت رقیب قرار بگیرد و فاوآیکون نداشته باشد به اعتبار سایت ضربه وارد میشود.
صرفه‌جویی در زمان کاربران
favicon در شناسایی یک وبسایت از طریق بوک مارک‌ها، تاریخچه و سایر مکان‌هایی که یک مرورگر برای شناسایی سریع این آیکون را در کنار تب‌ها قرار داده، باعث صرفه‌جویی در وقت کاربران میشود.
بالا بردن کارایی سایت
کارایی خوب سایت ارتباط مستقیم با رتبه کلمات کلیدی آن در موتورهای جستجو دارد. وقتی یک آیکون در کنار عنوان وبسایت، تب‌های مرورگر یا تاریخچه داشته باشید به کاربر کمک خواهید کرد تا بدون فوت وقت، از میان تب‌های باز شده سایت را شناسایی کند و نقشی مثبت در سئو سایت خواهد داشت.
ساخت فاوآیکون
1. برای ساخت فاوآیکن وبسایت تان لوگوی سایت تان را باید به فرمت آیکون، ico، یا png تبدیل کنید. (از طریق سایت های انلاین مثل Online Favicon Maker میتوانید عکس لگوی خود را آپلود کنید تا با فرمت ico، یا png به شما تحویل دهد)
2. ابعاد این آیکون را باید روی 16*16 یا 32*32 یا 64*64 پیکسل تنظیم کنید.
3. اگر از سیستم های مدیریت مثل وردپرس استفاده می کنید، کار شما بسیار ساده تر خواهد شد. کافیست یک افزونه نصب کنید و از طریق آن افزونه، فاویکون خود را معرفی کنید. هم چنین بسیاری از قالب های از پیش آماده، در پنل خود گزینه ای برای این مورد در نظر گرفته اند. اگر از سیستم خاصی استفاده نمی کنید و مثلا سایت شما تحت html می باشد، کافیست خط زیر را در بین <head> و </head> قرار دهید ( به جای favicon.ico/ می بایست محل قرار گیری favicon خود را در هاست قرار دهید).
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
مرورگر های بروز مانند فایرفاکس و همچنین مرورگر محبوب گوگل کروم برای نمایش Favicon نیاز به کددهی ندارند و کافی است فایل مربوط به فرمت favicon.ico در پوشه اصلی وب سایت قرار داده شود.( اکثر سایت‌های وردپرسی عکس‌های png را هم قبول می‌کنند.)
درباره سیستم مدیریت محتوا (CMS) بیشتر بخوانید
چه اندازه هایی برای فاویکون در هر مرورگر مورد نیاز است؟
در طراحی فایوآیکن ها بطور کلی اندازه 16px و فرمت ico برای همه مرورگرها استفاده شود، اما اگر می خواهید برای هر کاربری یک فاویکون ایجاد کنید، می توانید از اندازه های زیر استفاده کنید:
· 16 پیکسل: برای استفاده عمومی در همه مرورگرها،
· 24 پیکسل: سایت پین شده در اینترنت اکسپلورر 9
· 32 پیکسل: صفحه برگه جدید در اینترنت اکسپلورر، دکمه نوار وظیفه در ویندوز 7
· 57 پیکسل: صفحه اصلی استاندارد iOS (iPod Touch، نسل اول آیفون تا 3G)
· 72 پیکسل: نماد صفحه اصلی iPad
· 96 پیکسل: فاویکون مورد استفاده پلتفرم Google TV
· 114 پیکسل: نماد صفحه اصلی iPhone 4
· 128 پیکسل: Chrome Web Store
· 195 پیکسل: Opera Speed Dial
نکته های مهم در طراحی فاوآیکون:
· طراحی فاوایکن باید ساده و مختصر باشد.
· فاوآیکون باید نشان دهنده‌ی هویت وب سایت و برند شما باشد.
· برای طراحی فاوآیکن از لگو خود استفاده کنید.
· فاوآیکنتان را بین 1تا 3کاراکتر طراحی کنید.
· برای فاوآیکن رنگی را انتخاب کنید که با هر پس زمینه ای قابل رویت باشد.
· فاوآیکون می‌تواند به صورت گیف استفاده شود.
· بهترین فرمت فاوآیکون .ico است.
· بهترین سایز16*16 پیکسل باشد.
· با استفاده از ابزارهای فشرده سازی، تصویر بهینه سازی شده باشد.
فاوآیکون در کجا نمایش داده می شود؟
· سمت چپ آدرس بار
· در تب های مرورگر
· در نشانه گذاری موارد دلخواه یا Bookmark
· آموزش ساخت فاوآیکون
ساخت فاوآیکون در وردپرس
· برای ایجاد فاوآیکن در ورد پرس ابتدا در داشبورد وردپرش به بخش نمایش > سفارشی سازی بروید.
· سپس در نوار کناری سمت راست بر روی هویت سایت کلیک کنید.
· در بخش نمادک سایت می توانید تصویر خود را انتخاب کنید و فاویکون مورد نظر خود را اضافه کنید تا نمایش داده شود.
به همین راحتی می توانید favicon مورد نظر خود را به سایت وردپرسی خود اضافه کنید. در ادامه دو روشی که برای اضافه کردن فاو آیکن ها استفاده می شود را ببینید.
آیا استفاده از فاوآیکون بر سئوی سایت تاثیرگذار است؟
استفاده از favicon عوامل اصلی برای بهبود رتبه سایت در موتورهای جستجو نیست. اما با استفاده کردن از این قابلیت، تصویر در کنار آدرس سایت نمایش داده شده و به بازدیدکنندگان کمک می‌کند که هنگام باز کردن چندین برگه ، صفحه شما را راحت‌تر پیدا کنند و منجر به افزایش نرخ کلیک شود.
چگونه فاو آیکون متحرک بسازیم؟
برای ایجاد فاوآیکون متحرک، ابتدا فایل را پسوند GIF را به فایل با پسوند ICO تبدیل کرده و سپس در سایت بارگزاری میکنیم.