parsgreen.com
article

نحوه قرار دادن فاوآیکن (favicon) در نوار آدرس وبلاگ و سایت

web-favicon

فاوآیکن یا favicon، آیکن کوچکی است که معمولا در گوشه نوار آدرس، کنار نشانی های وب نمایش داده می شود که می تواند معرف لوگوی آن پایگاه یا محتویات صفحه مورد نظر باشد، استفاده از فاوآیکن به نمایش در نوار آدرس مرورگر محدود نمی شود، بلکه می توان از آن به عنوان لوگو و نشان، در فید های آر اس اس یا قسمت مربوط به بوکمارک ها در مرورگر کاربران استفاده کرد، به همین دلیل بیشتر سایت ها و وبلاگ های حرفه ای ترجیح می دهند حتما از یک آیکن مناسب و منحصر به فرد برای این منظور استفاده کنند؛ نگاه به پیشینه استفاده از این تکنیک نشان می دهد که در ابتدا تنها فرمت ico توسط مرورگرها پشتیبانی می شد اما به مرور و با پیشرفت تکنولوژی وب، فرمت های استاندارد gif، jpeg و png نیز توسط مرورگرهایی نظیر فایرفاکس، سافاری و اپرا پشتیبانی شد، با این وجود مرورگر پردردسر اینترنت اکسپلورر همچنان در نمایش این فرمت ها به عنوان آیکن، مشکلاتی دارد.

چگونه یک آیکن برای قرار دادن در نوار آدرس بسازیم؟


برای ساخت یک آیکن با فرمت ico نیاز به برنامه هایی تحت عنوان سازنده آیکن دارید برای مثال axialis iconworkshop انتخاب مناسبی است، سپس در فتوشاپ آیکنی در ابعاد 16×16، 32×32 یا 64×64 پیکسل با طرحی دلخواه و با فرمت png بسازید (در نهایت ما به اندازه 16×16 پیکسل نیاز داریم)، سعی کنید از ترکیب رنگی یک دست و به صورت متمایز استفاده کنید، مثلا از رنگهایی که شباهت زیادی به هم دارند یا از سایه ها کمتر استفاده کنید، چرا که با کوچک شدن آیکن، وضوح تصویر نیز کاهش می یابد و ممکن است فرم مورد نظر را از دست بدهد، آزمون و خطا روش خوبی است تا به انتخاب ایده آل خود نزدیک شویم؛ سپس تصویر مورد نظر را وارد برنامه سازنده آیکن کنید و با اندازه 16×16 پیکسل و ترجیحا با استاندارد رنگی true colors از آن خروجی بگیرید، آنگاه فایل خروجی را در سروری آپلود و آدرس آن را در لینک زیر جایگزین نمائید و کد را در قسمت هدر صفحه یا قالب (بین تگهای head) قرار دهید.

کد قرار دادن آیکن در نوار آدرس، سازگار با تمام مرورگرها


همانطور که گفتیم، فرمت استاندار favicon، فرمت ico است، اما برخی از مرورگرها از فرمتهای دیگر نیز پشتیبانی می کنند، به هرصورت کد زیر به صورت استاندارد برای این کار استفاده می شود.
<link rel="shortcut icon" href="http://yoursite.com/favicon.ico" type="image/x-icon" />

کد قرار دادن آیکن در نوار آدرس، سازگار با برخی از مرورگرها


مرورگرهایی نظیر فایرفاکس از آیکن های متحرک (با فرمت gif) نیز پشتیبانی می کنند، به عنوان یک ترفند می توانید هر دو روش را با هم استفاده کنید تا در مروگرهایی که از این فرمت پشتیبانی نمی کنند، آیکن ساده نشان داده شود و در سایر مرورگرها، به صورت متحرک.
<link rel="icon" type="image/gif" href="http://yoursite.com/gif-favicon.gif" />
چند توصیه:
- بهتر است از آیکن های متحرک استفاده نکنید، چرا که نظر کاربران به جای اینکه به مطالب سایت یا وبلاگتان جلب شود، بیشتر به آیکن متحرک در نوار آدرس جلب می شود.
- اندازه فایل را در حد امکان کم حجم ایجاد کنید، ارزش این کار مخصوصا زمانی که کاربران با وسایلی نظیر تلفن همراه در حال مرور صفحات یا فید آر اس اس وبلاگ یا سایتتان هستند، مشخص می شود.
- سعی کنید آیکنی ساده و واضح بسازید، به یاد داشته باشیم که فاوآیکن تنها یک نشانه است و قرار نیست تمام محتوای صفحات خود را در آن نشان دهیم.
sectionدسته بندی: مهارتهای وب » وبلاگ نویسی
related مطالب بیشتر:
» پلیر قدرتمند، ساده و زیبا برای پخش آهنگ در وب
» چگونه از تمام امکانات وبلاگ خود استفاده کنیم؟
» آموزش نحوه درج تصویر در وبلاگ
» آموزش نحوه قرار دادن کلیپ فلش در وبلاگ و سایت
» اشتباهات رایج در وبلاگ نویسی غیر حرفه ای!
commentنظرات (۲۶ یادداشت برای این مطلب ارسال شده است)
نویسنده: ERTY
زمان: ۱۸:۰۱:۰۴ - تاریخ: ۱۳۹۲/۰۴/۲۳
ALIIIII BOOOOOOOD
نویسنده: حمید
زمان: ۱۳:۰۷:۲۹ - تاریخ: ۱۳۹۲/۰۵/۱۰
سلام خسته نباشید .
من همه کارهای بالا را انجام دادم . آدرسی که نهایتا به اون رسیدم این آدرس شد :
http://s4.picofile.com/file/7872426983/favicon.ico.html
جریان این html آخر آدرس چیه ؟ اشکالی ایجاد نمی‌کنه ؟
چون تا حالا به نتیجه‌ای نرسیدم .
پاسخ: 
سلام
دقیقا html انتهای آدرس باعث عدم نمایش آیکن خواهد شد!
لینک به فایل باید مستقیم باشد، یعنی زمانی که آدرس را در مرورگر وارد می کنیم، فایل دانلود شده یا نمایش داده شود، در اینجا به جای دانلود یا نمایش، به سایت سرویس دهنده منتقل می شویم که صفحه دانلود را نمایش می دهد!
نویسنده: حمید
زمان: ۱۵:۰۴:۰۳ - تاریخ: ۱۳۹۲/۰۵/۱۰
لطفا راهنمایی بیشتر کنید باید چه کار کنم . پیکوفایل این آدرس رو به من میده . و البته در مورد آیکن ها اینطوره . در مورد فرمتهای دیگه با این مشکل مواجه نشدم و آدرس درست دریافت کردم .
پاسخ: 
باید از سرویس دهنده ای استفاده کنید که برای فرمت ico لینک مستقیم در اختیارتان قرار دهد، یا اینکه یک هاست شخصی داشته باشید.
نویسنده: حمید
زمان: ۱۵:۵۳:۲۷ - تاریخ: ۱۳۹۲/۰۵/۱۰
از توضیحات بسیار بسیار عالیتون ممنون .
از طریق سایت
http://www.iconj.com
لینک مستقیم گرفتم و چند ثانیه طول نکشید که فاوآیکن وبلاگم درج شد . بازم ممنون
نویسنده: مریم
زمان: ۲۱:۳۲:۱۲ - تاریخ: ۱۳۹۲/۰۵/۱۸
سلام
ممنون از مطالب مفیدتون.
من فایل آیکون رو درست کردم. بعد توی یک سایت هم آپلود کردم و لینک مستقیم رو دریافت کردم. لینک هم سالمه. فقط وقتی آدرس رو تو قالب وبلاگم پیست می کنم، عملی نمیشه. شاید جایی که کد رو پیست می کنم اشتباهه. میشه لطف کنید بگید بین تگ های header کجاست؟ ممنون می شم.
پاسخ: 
سلام
الزامی به درج در قسمت هدر نیست، چه کدی را در قالب وبلاگ قرار می دهید؟ لطفا نمونه کامل آن را درج کنید تا بررسی گردد.
نویسنده: amir
زمان: ۰۶:۵۲:۴۵ - تاریخ: ۱۳۹۲/۰۷/۱۹
من با فتوشاپ درست کردم بعد فقط پسوندش رو عوض کردم بعدم آپلود کردم و خیلی راحت جواب داد
ممنون همیشه دوست داشتم این رو یاد بگیرم چجوریه :*
نویسنده: صالحی
زمان: ۲۰:۱۴:۴۵ - تاریخ: ۱۳۹۲/۱۰/۰۱
خسته نباشید
ببخشید من اگه بخوام یه فاوایکن متحرک بسازم چی کار باید بکنم؟ ممنون میشم جواب بدین
پاسخ: 
سلام
کافی است آیکن مورد نظرتان را به صورت یک تصویر متحرک (با فرمت gif) بسازید و در نمونه کدی به شکل زیر آدرس آن را جایگزین کنید:
<link rel="shortcut icon" href="image/favicon.gif" type="image/gif">
نویسنده: جواد
زمان: ۱۹:۳۲:۴۳ - تاریخ: ۱۳۹۲/۱۰/۰۳
سلام و خسته نباشید
خیلی ممنون از این آموزش ، دستتون درد نکنه واقعا
تو یه سایت دیدم که به این شکل آموزش داده بود
آیکون رو منتقل کنید به قالب و در آنجا اسم آیکون را به این شکل favico تغییر بدین ، درست میشه
تعجب برانگیز بود
نویسنده: جواد
زمان: ۱۶:۰۱:۰۷ - تاریخ: ۱۳۹۲/۱۰/۰۴
سلام و درود فراوان
طبق آموزش آیکون رو ثبت کردم و در کروم و موزیلا نمایش داده شد
اما نمیدونم چرا تو اکسپلورر درست نمیشه
پاسخ: 
سلام
استاندارد آیکن را در نرم افزار طراحی، به روی 16 در 16 true color قرار دهید (سایر استانداردها را نیز تست کنید).
نویسنده: فرزاد
زمان: ۱۷:۱۳:۱۰ - تاریخ: ۱۳۹۲/۱۰/۲۶
ممنون خوب بود
زمان: ۱۶:۴۳:۵۲ - تاریخ: ۱۳۹۲/۱۱/۰۴
دمتون گرم
خیلی مرسی
نویسنده: fereshte
زمان: ۱۱:۰۸:۱۶ - تاریخ: ۱۳۹۲/۱۲/۰۶
سلام
من سایت و هاست اختصاصی دارم اما نه با کد و نه با آپلود مستقیم توی قسمت public_html باز هم درج نمیشه. مشکل از چیه؟؟
پاسخ: 
سلام
ظاهرا فایل favicon.ico در ریشه سایت شما وجود ندارد!
این آدرس را تست کنید:
www.fookachoob.com/favicon.ico
نویسنده: Tarlan
زمان: ۱۱:۳۸:۰۷ - تاریخ: ۱۳۹۲/۱۲/۲۳
چه طوری کد ها رو بدون تغییر تو text area بزاریم؟؟
پاسخ: 
آموزشی مرتبط با این موضوع در سایت وجود دارد، لطفا عبارت "لوگوی حمایتی" را در قسمت جستجو وارد کنید.
نویسنده: مهدی معینی
زمان: ۱۶:۲۸:۵۵ - تاریخ: ۱۳۹۳/۰۱/۰۳
سلام
من تمام مراحل رو درست انجام دادم ولی آیکون در فایر فاکس نمایش داده نمیشه
چی کار کنم؟؟؟
پاسخ: 
سلام
آیکن را با اندازه 16×16 پیکسل و با استاندارد رنگی true colors بسازید، ظاهرا آیکن فعلی به این صورت نیست، در صورتی که با این روش هم مشکل حل نشود، مسئله به سایت میهن بلاگ ارتباط دارد.
نویسنده: farzam
زمان: ۲۰:۴۷:۵۸ - تاریخ: ۱۳۹۳/۰۱/۰۶
سلام برای من هیچ مرورگری نشون نمیده اگه میشه کمکم کنید
پاسخ: 
سلام
پارامتر
type="image/x-icon"
در دستور شما وجود ندارد! در صورتی که با افزودن ان نیز مشکل حل نشد، دقت کنید که فایل ico با استاندارد 16 در 16 پیکسل و به صورت true color باشد.
نکته: آیکن شما در حال حاضر در مرورگر فایرفاکس نمایش داده می شود (سایر مرورگرها تست نشده).
paged صفحه 1 از 2




more لطفا دقت کنید که یادداشت های زیر منتشر نشده و حذف خواهند شد:
- یادداشت های خارج از موضوع این مطلب.
- سوالات کلی، غیر ضروری و مشکلاتی که هیچ تلاشی برای رفع آن نکرده باشید.
- نظرات حاوی کدها و اسکریپت های خیلی طولانی (به طور مثال کد کامل قالب وبلاگ).

5 × 5
 refresh
آگهی
seonab.com
طراحی نرم افزار اندروید
رنگین کمان عکس
Ranginkamaan.com

آرشیو عکس های باکیفیت با موضوعات متنوع...