Все залежить від браузера. Для Microsoft Explorer підходить формат іконки ICO. C цим форматом ми вже стикалися, коли робили курсор. Для інших браузерів від Google Chrome до Apple Safari підійде звичайний GIF або PNG. Favicon може бути напівпрозорим. Для цього його потрібно зберегти в напівпрозорий PNG. а далі перетворити в формат ICO. Зробити це можна в непоганий програмі IcoFX. Однак для генерації фавікона існує маса сторонніх сайтів і найочевидніший з їх www.favicon.ru
Як бути впевненим в тому що favicon спрацює? Потрібно дотримуватися 4 умови.
В HTML вираженні це виглядає так:
Можна створити кілька іконок для різних браузерів, наприклад одну в форматі ICO. а іншу в PNG і все це вказати через тег link. Сучасні браузери найчастіше самі шукають в кореневому сайту фаил під назвою favicon. однак для впевненості не завадить вказати і точні лінки.
Створити favicon дуже просто. Хочете зробити такий же favicon як у Вконтакте або Однокласники? Хороший favicon не зробити, зменшуючи великі картинки у всяких «генераторах» фавікона, яких повним повно в інтернеті. Фавікон дуже маленький. Фактично ми це свого роду піксель-арт. який має свої особливості. Не можна написати букву і просто зменшити її до 16px.
Створіть фаил розміром 16 х 16px. Ми створимо дуже простий напівпрозорий favicon з у вигляді букви, з дещицею глибини. Глибина буде створена за рахунок тіні і градієнта.
Чому в заставці цього уроку ви бачите величезний гладкий і вилизаний favicon. Тому що я його збільшив для заставки до уроку. Як у мене вийшло якісно збільшити зображення 16px. Дуже просто, я завжди працюю в векторі, якщо його можливо використовувати і якщо в цьому є сенс. А вектор легко переносить будь-яку трансформацію і не втрачає в якості.
Виберіть інструмент Rounded Rectangle Tool. На панелі налаштувань виберіть режим Shape Layer. що дозволить малювати в векторі. У випадаючому меню панелі галочка - Snap To Pixels. Це необхідно для того, щоб векторні контури прив'язувалися до пікселів і не малювали «між» ними.
У нас є поверхню faviconа. а напівпрозорі краю створять згладжена округлості. Тепер пора позбутися білого заднього фону, він не потрібен. Вимкніть його видимість. Або зробіть подвійний клік по шару, перетворивши його в звичайний шар, а потім видаліть.
Буква «Н», яка зображена на фавікона сайті хронофаг.ру занадто проста, щоб вплутувати в цю справу шрифти, тому я просто намалював її інструментом Rectangle Tool. Але давайте зробимо щось складніше. Виберіть інструмент Type Tool і поставте будь-яку літери. Для нашого уроку найкраще підійде буква без округлостей. Я вибрав шрифт і поставив букву H.
Але як я не намагаюся маштабіровать і підбирати розміри для моєї букви, шрифт постійно виходить розпливчастим. Хоча його краю могли б бути гранично чіткими, в букві немає округлостей і завитків. Інакше і бути не може, адже Фотошоп відображає Растеризувати шрифт, він як би намагається його згладити, що відмінно, якщо мова йде про розміри побільше, але для 16 пиксельного фавікона хотілося б більше чіткості.
Зробіть ось що. На панелі налаштувань шрифту вимкніть режими растрирования - none. Тепер трансформуйте шрифт Edit> Free Transform Трохи розтягніть його. Відмінно.
Якщо у вашому випадку вийшла нісенітниця, а воно може відбутися у випадку з режимом растрирования none, так як відсутність згладжування часом спотворює шрифт при незначних обсягах, зробіть ось що. Переведіть букву в криві Layer> Type> Convent to Layer Shape Скористайтеся інструментом Direct Selection Tool.
Виберіть цей інструмент і затискаючи SHIFT виділяйте кілька векторних точок. Потім стрілочками на клавіатурі рухайте їх в потрібну сторону, щоб позбутися від непотрібних переходів і вирівняти краю.
Сподіваюся ви вловили сенс роботи. Звичайно немає ніякого сенсу витрачати стільки часу якщо ваша літера - дві палички і хрестик. Але в разі літери «В» або «D» цю роботу варто зробити з її рівними сторонами. Ми практично наблизилися до створення favicon-а.
Кінець близький, залишилося додати стилі для намальованої літери. На панелі шарів виберіть шар з буквою і зайдіть в Layer> Layer Styles> Drop Shadow Мені потрібна легка тінь з Opasity 50% і дуже чіткими краями Distance 1, Spread 0, Size 2
Щоб зберегти напівпрозорий фавікон відкрийте File> Save for Web Devices У діалоговому вікні виберіть PNG-24 і галочку на Transparensy. Це зробить наш фавікон полупрозначним. Залишилося помістити іконку на сайт вищепереліченими способами, або перетворити її в формат ICO. Favicon створений.
