شنبه ۱ دی ۱۴۰۳ |  عضویت / ورود

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


Monday, 2010 December 20   نویسنده: Hamid   تعداد بازدید: 7826 بار  #طراحي صفحات وب   امتیاز متوسط: 3

مطمئناً در مرورگرهای جدید متوجه شده‌اید که به هر سایتی که وارد می‌شوید، یک آیکون که معمولاً آرم آن سایت است، در کنار اسم آن نمایش داده می‌شود:

http://dl.aftab.cc/wp-content/uploads/2010/12/iconworkshop.gif

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

این کار خیلی خیلی ساده است.

ابتدا باید از لوگوی سایت خود یک آیکون با ابعاد ۱۶ در ۱۶ پیکسل و با پسوند ico بسازید و نام آن‌را favicon بگذارید و در پوشه اصلی سایت (یا پوشه‌ی زیردامنه‌ی مد نظرتان) قرار دهید.

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

۱- استفاده از سایت favicon.cc:

- وارد این سایت شوید: http://www.favicon.cc

- روی دکمه Import image کلیک کنید و لوگوی مورد نظرتان را انتخاب و آپلود کنید. (تنظیمات پبیش‌فرض را دستکاری نکنید)

- پس از اینکه آیکون ساخته شد، در پایین صفحه روی Download Favicon کلیک کنید تا آیکون مد نظر شما ساخته شود.

- آیکون را در پوشه مورد نظرتان آپلود کنید...

۲- استفاده ازاین آموزش: چگونه از آرم مورد نظرمان یک آیکون بسازیم؟

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

نام آن را بگذارید favicon.ico و در روت اصلی سایتتان آپلود کنید.

همین!

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

مثلاً این آیکون سایت آفتابگردان است:

 

http://aftab.cc/favicon.ico

 

سؤال: آیا برای وبلاگ هم این امکان وجود دارد؟

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

اگر این تنظیمات نبود، باید این آیکون را در یک فضای رایگان مثل persiangig.com آپلود کنید و سپس قطعه کد زیر را در بالای کدهای قالب سایت خود (بین تگ head) قرار دهید:

<link rel="icon" href="آدرس آیکون">

 * به جای «آدرس آیکون» آدرس جایی که لوگو را آپلود کرده‌اید بدهید...

 

 

موفق باشید؛
حمید رضا نیرومند


.



ارسال سؤال یا نظر


1- meh_ham:
بوسیله: meh_ham, در: Friday, 2010 December 31-کد: 2618
سلام
سایت iconverticons.com هم به راحتی می‌تواند تصاویر شما را به favicon تبدیل کند؛


2- بهار:
بوسیله: , در: Wednesday, 2011 August 03-کد: 3381
ممنون!!!!


3- hojjat:
بوسیله: , در: Wednesday, 2014 May 21-کد: 10300
عالی بودن خیلی ممنون

Tutorials ©