فاویکون -(مخفف کلمات "آیکون مورد علاقه") اندازه تصویر کوچک است 16x16 پیکسل،که بازدید کننده از سایت شما خواهد دید. در کنار URL سایت در نوار آدرس مرورگر ظاهر می شود. علاوه بر این، این نماد در کنار نام سایت شما در لیست برگه‌های باز، نشانک‌ها و نتایج جستجو ظاهر می‌شود و یافتن سریع سایت شما را برای کاربران آسان‌تر می‌کند.

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

اگرچه بسیاری از مرورگرهای وب مدرن از فاویکون ها در GIF، PNG یا سایر فرمت های فایل محبوب پشتیبانی می کنند، اما همه نسخه های اینترنت اکسپلورر همچنان به فاویکون ها به عنوان فایل نیاز دارند. ICO(فرمت مایکروسافت). در این قالب، هر مرورگری نماد شما را درک خواهد کرد.

چرا به فاویکون نیاز دارید؟

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

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

می خواهم فوراً خاطرنشان کنم که برای سایت هایی که دارای برچسب "GS" هستند ، خود نماد قادر به بهبود برداشت از منبع نیست. اما مثل یک جلسه بر سر لباس است. یک فاویکون فوق‌العاده قطعا اولین تصور را از سایتی ایجاد می‌کند که دعوت به بازدید است.

نحوه ایجاد فاویکون

مطمئناً می توانید سعی کنید یک فایل آماده favicon.ico را در وب سایت www.iconfinder.com پیدا کنید، اما فکر می کنم خیلی ها دوست دارند چیزی از خودشان بسازند. پس از همه، این فاویکون است که سایت شما را در نتایج جستجو برجسته می کند. اکنون می دانید که چگونه این کار را انجام دهید. پس بیایید شروع کنیم.

Logaster یک سرویس آنلاین برای ایجاد آرم و عناصر هویت سازمانی است. در آن، شما به طور خودکار، تنها با چند کلیک، یک نماد برای سایت با فرمت ICO و PNG دریافت خواهید کرد.

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

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

روند ایجاد یک نماد در Logaster چگونه کار می کند؟

1. برای اطمینان از اینکه فاویکون شما با لوگوی شما مطابقت دارد، ابتدا از شما خواسته می شود که یک لوگو ایجاد کنید (رایگان است).
2. یک نام بنویسید و در صورت تمایل یک شعار، نوع فعالیت را مشخص کنید و Logaster به طور مستقل گزینه های لوگوی زیادی را برای شما آماده می کند.
3. یک لوگوی مناسب انتخاب کنید، می توانید بعداً آن را تغییر دهید.

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

اکنون می توانید بر روی دکمه "دانلود لوگو" کلیک کنید. در نسخه رایگان یک علامت Logaster.com روی آن وجود خواهد داشت

لوگو قابل خرید است. پس از آن، می توانید با فرمت انتخاب شده (PNG، JPEG، PDF، SVG) و اندازه (1024 پیکسل، 5000 پیکسل) دانلود کنید.

حالا بیایید به ساخت فاویکون بپردازیم.

1. باز هم گزینه ای را که دوست دارید انتخاب کنید.
2. شما می توانید شکل را به شکل مربع، گرد، گرد یا بدون شکل تغییر دهید.
3. در صورت تمایل، با کلیک بر روی ابزار Stroke، یک stroke رنگی اضافه کنید.
4. بر روی دکمه "ذخیره" کلیک کنید.

فاویکون اینگونه شد. در اصل به نظر خوب می رسد.

چگونه یک فاویکون به وب سایت خود اضافه کنیم

1. فاویکون را بخرید و فعال کنید.
2. آن را دانلود کنید.
3. فایل دانلود شده را در پوشه ریشه سایت خود از حالت فشرده خارج کنید.
4. کد زیر را در تمام صفحات سایت در تگ قرار دهید :

پکیج طراحی با تخفیف

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

مقاله مرتبط: نحوه اتصال Yandex.Speller به وردپرس

پلاگین برای ایجاد فاویکون

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

شما می توانید یک فاویکون را مستقیماً در فتوشاپ ایجاد کنید. برای انجام این کار به یک افزونه نیاز دارید که می توانید آن را از www.telegraphics.com.au دانلود کنید. برای نصب آن فایل را کپی کنید ICOFormat.8biبه دایرکتوری c:Program FilesAdobeAdobe Photoshop CS2Plug-InsFile Formats.

با استفاده از یک افزونه ICOFormat.8bi، می توانید تصاویر را به عنوان فایل های ico ذخیره کنید.

نحوه نصب پلاگین فرمت ICO (آیکون ویندوز).

1. ویندوز 64 بیتی (ویستا/ویندوز 7):
   • راه اندازی مجدد قبل از نصب؛
   • افزونه را در پوشه C:Program FilesAdobePhotoshopPlug-InsFile Formats قرار دهید، اما من ساختار متفاوتی دارم، من این فایل را در اینجا ذخیره می کنم: C:Program FilesAdobeAdobe Photoshop CS6 (64 بیت) Plug-in.
   • اگر روی سیستم ویندوز 64 بیتی کار می کنید و نسخه 64 بیتی Photoshop CS4 یا CS5 را راه اندازی می کنید، نسخه 64 بیتی این افزونه را دانلود کنیدو آن را در پوشه Plug-Ins مربوط به فتوشاپ 64 بیتی قرار دهید (یعنی پوشه ای که در "Program Files" نه "Program Files (x86)").
2. افزونه را به پوشه «فرمت‌های فایل» داخل پوشه افزونه‌های فتوشاپ خود منتقل کنید:
   • برای ویندوز (32 بیت) ICOFormat.8bi
   • برای ویندوز (64 بیت) ICOFormat64.8bi
   • برای Mac OS X، پلاگین ICOFormat(توجه داشته باشید که نسخه های جداگانه برای CS2، CS3/4 و CS5 ارائه شده است)
   • برای Mac OS X/Classic، icoformat
   • برای MacOS 68K، icoformat (68K)
3. اگر از Corel PSP Photo X2 استفاده می کنید، افزونه را در C:Program FilesCorelCorel Paint Shop Pro Photo X2LanguagesENPlugIns قرار دهید.
4. اگر فتوشاپ از قبل در حال اجرا است، خارج شوید و دوباره راه اندازی کنید.

همچنین یک سرویس آنلاین www.convertico.com وجود دارد. ConvertICO یک مبدل فایل ICO/PNG آنلاین رایگان است. به سرعت کار می کند و استفاده از آن آسان است. برای تبدیل آیکون های دسکتاپ، نمادهای برنامه ها و فاویکون ها برای وب سایت ها استفاده می شود.

چگونه خودتان favicon.ico درست کنید

1. فتوشاپ را باز کنید.
2. یک سند 32x32 پیکسل ایجاد کنید.
3. یک شی هوشمند از تصویر تمام شده از Illustrator وارد کنید.
4. با استفاده از دستور "Save As"، فاویکون را با فرمت ICO * ذخیره کنید.
5. فاویکون به دست آمده را در ریشه سایت آپلود کنید و آن را از طریق قالب وردپرس متصل کنید یا به صورت دستی آن را در قالب سایت ثبت کنید. قبلاً در مورد نحوه اتصال فاویکون قبلاً نوشته ام.

*اگر افزونه خاصی نصب نکرده اید فرمت ICO (نماد ویندوز).، می توانید آن را از www.telegraphics.com.au/sw/ دانلود کنید. برای مک، ویندوز 32، 64 بیتی با پشتیبانی از تمام نسخه های فتوشاپ از جمله CS6 وجود دارد.

نمایش فاویکون

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

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

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

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

فاویکون عملکردهای زیر را انجام می دهد:

نام تجاری.

شناسایی سایت توسط کاربر (سهولت استفاده).

ظاهری حرفه ای به سایت می دهد.

بیایید نگاهی دقیق تر به مزایای اصلی استفاده از فاویکون ها بیندازیم.

شناخت برند

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

اعتماد به نفس

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

بازدیدهای تکراری

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

باعث صرفه جویی در زمان کاربر می شود

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

مزایای SEO

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

چگونه یک فاویکون ایجاد کنیم؟

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

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

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

اکنون که یک لوگو دارید، روی «ایجاد فاویکون با این لوگو» در صفحه لوگو کلیک کنید.

مرحله 6. طرح فاویکون مورد نظر را انتخاب کنید

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

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

می توانید الهام بخش فاویکون ها را در سایت های زیر بیابید:

مرحله 7. فاویکون را دانلود کنید

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

پس از پرداخت می توانید فاویکون را با فرمت ico و png دانلود کنید.

کجا می توانم از فاویکون استفاده کنم؟

می توانید از فاویکون استفاده کنید:

در سایت؛

دستگاه های موبایل. کاربر می تواند یک فاویکون را به صفحه اصلی دستگاه خود اضافه کند (چیزی شبیه نشانک) - Android، IOS، Windows Phone و غیره.

برنامه ها و برنامه های کاربردی برای PC/Mac.

چگونه می توان Favicon را در یک وب سایت نصب کرد؟

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

مرحله 1.شما باید فایل favicon.ico را در سرور آپلود کنید. برای این کار باید یک کلاینت ftp مانند FileZilla را دانلود و نصب کنید. سپس نام کاربری و رمز عبور خود را وارد کرده و فایل را دانلود کنید. می‌توانید دستورالعمل‌های دقیق‌تری درباره نحوه آپلود فایل فاویکون بخوانید.

گام 2.اکنون باید صفحه HTML سایت خود را ویرایش کنید تا به مرورگرها کمک کنید تا تصویر فاویکون شما را پیدا کنند. با باز شدن پنجره FTP، فایل index.html یا header.php را پیدا کرده و از سرور دانلود کنید.

فایل index.html را در یک ویرایشگر متن باز کنید - Notepad، Notepad++، Sublime Text.

اگر سایت شما حاوی HTML خالص است، کد ویژه را در قسمت HEAD فایل index.html قرار دهید.

کد را می توان در صفحه فاویکون در وب سایت Logaster کپی کرد.

اگر از وردپرس استفاده می کنید، کد زیر را در قسمت HEAD فایل header.php خود قرار دهید.

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

اکثر مرورگرهای مدرن به اندازه کافی هوشمند هستند که می توانند فایل فاویکون را حتی بدون چنین کدی پیدا کنند، اما تنها در صورتی که فاویکون دارای یک تصویر 16x16 پیکسلی به نام favicon.ico باشد و در فهرست اصلی سایت شما ذخیره شود.

امیدواریم این مقاله اطلاعات مفیدی در اختیار شما قرار داده باشد تا به شما در ایجاد فاویکونی کمک کند که وب سایت شما را موفق تر و جذاب تر کند.

سلام دوستان! من اخیراً یک فاویکون در یکی از وبلاگ هایم نصب کردم و فکر کردم که هنوز مقاله ای در این زمینه ندارم. پس چرا نمی نویسی؟ من می دانم که موضوع هک شده است و بسیاری از مدت هاست که همه اینها را می دانند. بسیاری، اما نه همه، طبق آمار wordstat.yandex.ru (به تصویر زیر مراجعه کنید). همه ما برای اولین بار یک فاویکون ساخته ایم و به دنبال اطلاعات مشابه هستیم. بنابراین اجازه دهید وب مسترهای تازه کار آن را در وبلاگ من پیدا کنند. علاوه بر این، من آن را دقیقا برای این منظور ایجاد کردم. و ترافیک اضافی موتورهای جستجو برای این درخواست به من آسیبی نمی رساند. پس بزن بریم.

favicon.ico چیست؟

ابتدا اجازه دهید تعریف کنیم که فاویکون چیست و چرا به آن نیاز داریم. این همان چیزی است که ویکی پدیا () به این سوالات پاسخ می دهد.

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

در مجموع، فاویکون برای سایتیک نماد یا تصویر خاص در اندازه 16x16 پیکسل در فرمت ICO است. معمولاً این فایل نام دارد favicon.icoو در پوشه ریشه سایت قرار دارد. سایزهای دیگر (24×24، 32×32، 48×48 و غیره) و فرمت ها (JPEG، BMP، PNG و GIF) نیز امکان پذیر است. بر این اساس، فرمت PNG به شما این امکان را می دهد که یک نماد در یک پس زمینه شفاف، GIF – متحرک بسازید.

چرا به فاویکون نیاز دارید؟

فایل ico فاویکون برای یک وب سایت بسیار مهم است. و نه تنها به این دلیل که چنین تصویری یافتن منبع وب مورد نظر را در میان تعداد زیادی از نشانک های مرورگر آسان می کند. ویژگی و فایده اصلی متفاوت است.

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

شایان ذکر است که Yandex توصیه نمی کند که تصویر حاوی شفافیت باشد و انیمیشن فقط در مرورگر FireFox پشتیبانی می شود. همچنین باید بدانید که با افزایش اندازه تصویر، وزن فایل و بار روی هاست افزایش می یابد. بنابراین ، بهتر است برای هر سایتی (وردپرس ، جوملا ، DLE و غیره) در قالب .ico با اندازه 16 در 16 پیکسل استفاده کنید.

برای نصب چنین نمادی در وب سایت ، ابتدا باید آن را داشته باشید. چندین گزینه در اینجا وجود دارد:

1. دانلود فاویکون های آماده؛
2. خودتان را با استفاده از فتوشاپ یا ژنراتورهای آنلاین خاص خود Favicon.ico درست کنید.

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

favicon.ico را از کجا دانلود کنیم. مجموعه های آماده از Favicons برای وب سایت

به منظور بارگیری یک Favicon برای یک سایت ، کافی است در یک موتور جستجو یک پرس و جو مشابه یا مشابه را وارد کنید. باور کنید نتیجه کم نخواهید داشت. در زیر آدرس های مختلفی را ارائه می دهم که می توانید تصاویر آماده را برای Favicon بارگیری کنید. برخی از آنها به شما امکان می دهند نمادهای خود را با استفاده از ژنراتورها ایجاد کنید.

گالری نمادها (favicon.ico) برای سایت:

• www.iconj.com/gallery.php - مجموعه بزرگی از تصاویر و یک ژنراتور آنلاین ؛
• www.audit4web.ru/info/favicon/- بیش از 15000 قطعه در اینجا وجود دارد.
• www.favicon.cc/؟action=icon_list&order_by_rating=1- ژنراتور و گالری نمادهای متحرک و استاتیک ؛
• www.favicon.co.uk/gallery.php - ژنراتور Favicon و کاتالوگ Favicons برای سایت ؛
• thefavicongallery.com – گالری تصاویر دیگر.

اما شاید بهترین مکان برای بارگیری نمادها و آرم های مختلف برای وب سایت شما Findicons.com باشد.

نگاهی کوتاه به این سرویس:

تصاویر در قالب ها و اندازه های مختلف ارائه می شوند. برای یافتن و بارگیری favicon.ico در سایت findicons.com ، باید یک تصویر را انتخاب کرده و روی دکمه "جزئیات" کلیک کنید. در پنجره ای که باز می شود، روی خط دارای تعداد اندازه ها کلیک کنید.

امیدوارم بفهمی

یکی دیگر از خدمات فوق العاده با جستجو توسط نمادها www.iconsearch.ru.

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

برای دانلود فاویکون انتخاب شده، روی نماد فرمت PNG یا ICO کلیک کنید. با کلیک بر روی "جزئیات بیشتر" می توانید این نماد را در اندازه های دیگر و نمادهای بیشتری از این مجموعه را مشاهده کنید.

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

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

فاویکون را با چه فرمتی ذخیره کنم؟

همه چیز به مرورگر بستگی دارد. برای مایکروسافت اکسپلوررقالب نماد مناسب ICO. ما قبلاً هنگام ساخت مکان نما با این قالب مواجه شده ایم. برای سایر مرورگرها از گوگل کرومقبل از اپل سافاریمنظم انجام خواهد داد GIFیا PNG. فاویکونممکن است شفاف باشد. برای انجام این کار، باید آن را به صورت شفاف ذخیره کنید PNGو سپس به فرمت تبدیل کنید ICO. این را می توان در یک برنامه خوب انجام داد ICOFXبا این حال، سایت های شخص ثالث زیادی برای تولید فاویکون ها وجود دارد که واضح ترین آنها www.favicon.ru است.

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

چگونه مطمئن باشیم که فاویکونآیا کار می کند؟ 4 شرط باید رعایت شود.

• فایل باید نامیده شود - فاویکون.
• اندازه فاویکون 16 بر 16 پیکسل
• مکان بهینه برای فاویکون، پوشه ریشه سایت است.
• آدرس آیکون را در متا تگ ها بنویسید هدردر فهرست سایت.

در عبارت HTML به شکل زیر است:

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

یک فاویکون در فتوشاپ ایجاد کنید

ايجاد كردن فاویکونبسیار ساده. میخوای یکی مثل این درست کنی؟ فاویکونمانند VKontakte یا Odnoklassniki؟ خوب فاویکوننمی توان با کاهش تصاویر بزرگ در انواع «مولدهای فاویکون» که پر از آنها در اینترنت هستند، این کار را انجام داد. فاویکون بسیار کوچک است. در واقع ما نوعی هستیم هنر پیکسلی، که ویژگی های خاص خود را دارد. شما نمی توانید نامه بنویسید و فقط آن را به آن کاهش دهید 16 پیکسل .

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

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

کشیدن پس زمینه

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

یک ابزار را انتخاب کنید ابزار مستطیل گرد. در پانل تنظیمات، حالت را انتخاب کنید، که به شما امکان می دهد وکتور را ترسیم کنید. در منوی کشویی پانل یک علامت تیک وجود دارد - Snap To Pixels. این امر ضروری است تا مسیرهای برداری به پیکسل ها کشیده شوند و "بین" آنها رسم نشود.

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

مقاله ای که در آن به نحوه ساخت فاویکون مناسب برای وب سایت می پردازیم.

فاویکون نمادی است که با یک وب سایت یا صفحه وب خاص مرتبط است. وجود فاویکون در یک سایت معمولا آن را بیشتر قابل تشخیص می کند. این به این دلیل است که این وب سایت (هر یک از صفحات آن) دارای یک نماد است که با مشاهده آن کاربر متوجه می شود که چه نوع منبعی است. نماد فاویکون سایت را می توان در عناصر مختلف مرورگر مانند برگه، نوار آدرس، تاریخچه مرور (log)، نوار نشانک ها و غیره مشاهده کرد. . نماد فاویکون همچنین هنگام قرار دادن پیوند (به صفحه وب سایت) در صفحه اصلی سیستم عامل های iOS (Safari)، اندروید (Chrome)، ویندوز 8 و 10 استفاده می شود.

نحوه افزودن فاویکون به وب سایت

روند نصب فاویکون در یک وب سایت، به عنوان یک قاعده، با ایجاد آن آغاز می شود. با توجه به اینکه الزامات رزولوشن و فرمت آیکون فاویکون در دستگاه های مختلف متفاوت است، بهتر است ابتدا آن را با فرمت وکتور svg (گرافیک برداری مقیاس پذیر) تهیه کنید. این عمل به شما امکان می دهد با استفاده از یک تصویر (svg)، یک نماد فاویکون با کیفیت عالی با وضوح 16x16 پیکسل و 512x512 به دست آورید.

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

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

بیایید به مراحل اولیه برای تهیه یک تصویر با فرمت svg برای فاویکون نگاه کنیم.

تصویری که به عنوان فاویکون سایت استفاده می شود را می توان از طریق جستجوی تصویر در Google یا Yandex ترسیم یا به دست آورد. توصیه می شود یک تصویر (آیکون) را با فرمت svg جستجو کنید. اما اگر نمی توانید یک نماد مناسب با فرمت svg پیدا کنید، می توانید فرمت دیگری را انتخاب کنید (مثلا png یا jpg). و سپس در برنامه Inkscape با استفاده از ابزاری خاص آن را به گرافیک برداری (وکتوریزه کردن شطرنجی) تبدیل کنید.

به عنوان مثال، بیایید ببینیم که چگونه می توانید از Inkscape برای تهیه یک تصویر (یک نماد در) با فرمت svg برای فاویکون استفاده کنید.

نمونه هایی از تصاویر آماده شده (فلش قرمز، لامپ، پروانه، ساعت، قلب و کتاب) برای فاویکون (برای دانلود - "ذخیره تصویر به عنوان..." را در منوی زمینه تصویر انتخاب کنید):

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

ما می‌توانیم آیکون‌های فاویکون را برای همه پلتفرم‌ها (iOS، Android، PC، MAC و غیره) به صورت آنلاین در http://realfavicongenerator.net/ ایجاد کنیم.

برای این کار بر روی دکمه "Select your Favicon picture" کلیک کنید و تصویر آماده شده (door.svg) را در کادر محاوره ای انتخاب کنید.

پس از این کار باید رنگ های پس زمینه را پیکربندی کرده و نام اپلیکیشن را برای سیستم عامل اندروید (Chrome) وارد کنید.

پس از این، گزینه “I will place…” را انتخاب کنید که نشان می دهد فایل های فاویکون حاصل باید در ریشه سایت قرار بگیرند. این عمل تضمین می کند که در اکثر مرورگرها پشتیبانی می شود.

پس از این عمل، سرویس realfavicongenerator.net یک نماد فاویکون و کد HTML ایجاد می کند. نتیجه این عملیات روی صفحه نمایش داده می شود.

نصب فاویکون در وب سایت

پس از اتمام عملیات مقدماتی، ما شروع به اتصال فاویکون به سایت می کنیم. تمام مراحل اولیه برای افزودن یک نماد به یک وب سایت در صفحه "Install your favicon" آورده شده است.

مراحل اساسی:

به عنوان مثال، در CMF MODX، اتصال فاویکون (کد HTML) به صفحات معمولاً به صورت یک تکه انجام می شود که برای تشکیل بخش سر سند استفاده می شود.

بررسی فاویکون سایت

فاویکون سایت با استفاده از لینک ارائه شده در بند 4 بررسی می شود (فاویکون خود را بررسی کنید). این عمل از طریق منوی اصلی Favicon -> Favicon checker نیز قابل انجام است.

برای شروع اعتبارسنجی فاویکون سایت، پروتکل سایت (http:// یا https://) را در فرم ارائه شده انتخاب کنید، نام دامنه را وارد کرده و بر روی دکمه «بررسی فاویکون» کلیک کنید.

پس از این کار، مطمئن می شویم که فاویکون سایت توسط سرویس realfavicongenerator.net تست شده و در تمامی پلتفرم ها به درستی نمایش داده می شود.

نمایه سازی سایت Favicon توسط موتورهای جستجو

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

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

• Yandex - https://favicon.yandex.net/favicon/domain_name
• Google - https://www.google.com/s2/favicons?domain=domain_name

به جای domain_name، باید نام دامنه (مثلا وب سایت) را مشخص کنید.

توجه: استفاده از تصاویر متحرک (گیف) به عنوان فاویکون تنها توسط برخی از مرورگرها (Firefox) پشتیبانی می شود. سایر مرورگرها از یک تصویر ثابت به عنوان فاویکون استفاده می کنند.