От автора: раньше фавиконам не уделялось такое внимание, и только в последнее время появилось множество способов их создания, сам подход к созданию фавикона сильно усложнился. А это значит, что для создания продвинутых и современных превью изображений можно использовать такие инструменты, как Real Favicon Generator. Данный генератор все сделает за вас; а в данной статье речь пойдет о создании более простых фавиконов. В том числе мы узнаем как сделать фавиконку для сайта.
Как я ранее говорил, фавиконы из простых изображений 16х16 пикселей превратились в многомасштабные и многоцелевые. В этом уроке вы научитесь создавать современные, многослойные фавиконы… но прежде чем начать, давайте оговорим детали:
Вы можете столкнуться с тем, что многомасштабные фавиконы не работают в старых браузерах, в том числе в Firefox 5 и ниже. Если большая доля ваших пользователей использует устарелые браузеры, то вам лучше остановиться на обычных фавиконах.
Ниже в статье вы увидите, что многомасштабные иконки сайтов создаются путем добавления новых слоев в файле .ico; так же как и в PhotoShop файле .psd, а с добавлением новых слоев, увеличится и размер файла. Полностью может случиться так, что с файлом больше чем 50Кб будет невозможно работать, он будет тормозить страницу. Постарайтесь не превышать вес файла .ico и держите его в пределах до 20Кб; Если же вы не уложились в отведенные цифры, мой совет – удалите самые верхние слои с наибольшими разрешениями.
Насколько мне известно, единственным кроссплатформенным инструментом для создания многомасштабных иконок для сайта является GIMP. Инструкция по установке на Mac OS X прилагается ниже; если же вы на Windows, то придется поискать самим.
Шаг 1: Создание основного изображения с высоким разрешением
Для создания основного изображения с наибольшим разрешением можете использовать любой инструмент, какой пожелаете нужным: я предлагаю использовать изображение примерно 256х256 пикселей. Помните о том, что созданное вами изображение будет уменьшено до 16х16 пикселей в самой маленькой версии, так что изображение должно быть простым, понятным и четким.
Перед созданием изображение убедитесь, что правильно установили редактор, в котором будете работать: в этой статье будут использоваться наилучшие настройки для Photoshop’а из этой статьи.
Шаг 2: Сохраните слои фавикона в PNG
Уменьшите размер изображения до необходимого и сохраните его; я предлагаю сделать так:
Начните с наибольшего разрешения и идите вниз, сохраняя каждое из них в отдельный файл. Иконки apple-touch-icon-precomposed.png и facebook.png далее задействованы не будут: это резервные иконки для мобильных устройств и социальных сетей, подробнее об этом в следующих статьях.
Можете попробовать оптимизировать полученные PNG файлы любым известным способом: как вариант – альфа прозрачность.
Шаг 3: Установите GIMP
GIMP (GNU Image Manipulation Program) – бесплатный графический редактор с открытым исходным кодом, альтернатива Photoshop’у. Разработан для X Windows System, так что необходимо позаботиться о поддержке. К счастью, если вы пользуетесь OS X 10.5 (Леопард) или выше, то данная система уже установлена по умолчанию; тем же, кто использует более ранние версии, придется установить X11 на OS X самостоятельно.
Скачайте подходящую версию GIMP для OS X, установите и запустите ее. (для первого запуска потребуется несколько минут, так как потребуется сначала запустить X11).
Шаг 4: Откройте иконку с самым большим разрешением и импортируйте в нее все PNG файлы с помощью «Open As Layers»
Интерфейс в GIMP разительно отличается от стандартного в Mac OS X или Windows: к примеру, строка основного меню находится в верхней части окна GIMP, а не в верхней части экрана. Откройте иконку размером 64х64. Если будет предложено установить текущий цветовой профиль, выберите RGB.
Затем кликните правой кнопкой мыши в окне программы по картинке и выберите File / Open as Layers… и так выбирайте остальные фавиконы от большого к наименьшему.
Шаг 5: Сохраните фавикон
Для этого нажмите File / Save As… пропишите имя файла (favicon.ico). Можете выбрать опцию по сжатию PNG.
Шаг 6: Вставьте иконку в веб-страницу
Добавьте код ниже в хедер каждой страницы, на которой вы хотите в качестве иконки сайта использовать наше изображение:
|
1 |
<link rel="icon" href="/favicon.ico" sizes="16x16 32x32 48x48 64x64" type="image/vnd.microsoft.icon"> |
«Ухты, а это не похоже на обычную вставку фавикона на страницу!»
Так и есть. Во-первых, мы не используем короткое значение для атрибута rel, которое было разработано специально для IE и было неофициальным. Во-вторых, все слои выстроены списком. В-третьих, мы даем понять IE, какие разрешения используются с помощью атрибута sizes.
На деле, можно вообще не указывать эту строку: до тех пор, пока имя вашего файла favicon.ico и он расположен в корне сайта (т.е. вместе с index). Браузеры автоматически подставят изображение. Строка просто подсказывает браузеру, что нужно сначала загрузить сам фавикон и информацию о разрешениях, а только потом остальной контент. В противном случае все будет наоборот.
Вот и все: у нас получилась современная и многомасштабная иконка. В следующих статьях я расскажу об использовании остальных PNG изображений, которые мы создавали для мобильных устройств и социальных сетей.
Источник: //thenewcode.com/
Редакция: Команда webformyself.
