Как сделать Favicon? / Студия Виталия Комлева, разработка веб-сайтов Харьков

Как сделать Favicon?

Веб-дизайн и аналитика

Favicon Википедии по узнаваемости может соперничать с ее логотипом

Одним из самых неприятных и запутанных элементов современного веб-дизайна является Favicon. Сокращение от «favourite icon», эта маленькая картинка встречается вам в закладках браузера, в поле адреса, во вкладках и, возможно, в каких-либо других местах вашего браузера и операционной системы.

Я слышал, как одни произносят «фав-ик-он», другие говорят «фав-ай-кон»... Конечно же, более распространенным является первый вариант, но все же.

Favicon может быть трудно создать технически и с эстетической точки зрения из-за необычного формата файла и маленького размера. Для того, чтобы добавить кросс-браузерность и кросс-платформенность, придется помучить себя еще немного. Да ну о чем речь, если даже в произношении есть путаница!

Итак, давайте в этом всем разберемся и уберем лишнее.

Проектирование Favicon

Первым шагом к созданию иконки является проектирование. Хороший Favicon должен отражать суть вашего сайта в изображении размером со смайлик и донести информацию о вашем бренде в очень маленьком размере. Чаще всего это логотип-знак компании, а не полный логотип с текстом или слоганом.

Эти сайты используют логотип-знак их бренда, или, по крайней мере, что-то близкое к нему

Это хороший вариант, потому что Favicon слишком мал, и любой текст превратится в пару линий. Исключением являются те случаи, когда у бренда уже есть узнаваемый графический элемент. Для Википедии это большая буква W, а для Facebook буква F.

Эти сайты используют одну букву, которая ассоциируется с их брендом. В этом примере, иконка Дисней пикселизирована. Это вызвано тем, что чаще всего иконки делают размером 16х16, тогда как скриншот сделан на retina-дисплее, которому необходимо предложить изображение размером 32х32.

Иконки Favicon настолько малы, что каждый пиксель имеет значение. Часто сжатие логотипа большого размера дает эффект пикселизации, из-за чего Favicon может выглядеть размытым. Для того, чтобы избежать подобных ошибок, требуется редактировать изображение на уровне пикселей.

Это часть полноразмерного логотипа Facebook после того, как он был уменьшен до 32х32. Размытое сглаживание по краям дает эффект размытия, значит, придется поработать с пикселями.

Для редактирования растрового изображения можно воспользоваться программами вроде Photoshop или Pixelmator. Я обычно начинаю с уменьшения размера логотипа до 64х64, потому что это самый большой размер из тех, которые мне нужны. Затем, используя карандаш, я правлю пиксель за пикселем, пока не добьюсь резкого изображения. Это чрезвычайно трудоемкий процесс, который может занять час или два, но такой подход дает наилучшие результаты.

После того, как мне наконец понравится иконка 64х64, я прохожу через тот же алгоритм для 32х32, 24х24 и 16х16. Вот зачем нужны все эти размеры:

  • 64х64 — Список для чтения Safari и иконки сайтов в Windows
  • 24х24 — Прикрепленный сайты в IE9
  • 32х32 — Иконки для дисплеев с высоким разрешением и retina-дисплеев
  • 16х16 — Наиболее часто используемый размер для основных браузеров, таких, как IE, Safari, Chrome, Firefox и так далее

Часто достаточно уменьшить 64х64 до нужных размеров, но это не является правилом, и иногда требуется дополнительная работа. Кстати, помните о том, что вы можете включить альфа-канал для иконок. Если раньше это было проблемой, то сейчас абсолютное большинство браузеров успешно поддерживают это свойство.

Сохранение Favicon

Как только вы закончите редактирование иконки, сохраните ее в 24-битном PNG. В Photoshop для этого можете использовать «Сохранить для Web», доступную в меню File.

Далее, вам нужно объединить все ваши изображения в формате PNG в один файл ICO. Кроме того, вы могли бы использовать комбинацию PNG и ICO-файлов, но Safari и Chrome будут использовать ICO. Для формирования файла иконки нужно пользоваться нестандартными средствами. Мне нравится использовать инструмент X-Icon Editor. Это бесплатный веб-сервис, что позволяет легко работать с ним с любого компьютера, загружая изображения надлежащего размера в соответствующие слоты, а затем экспортируя в один ICO-файл. Просто следуйте пронумерованным шагам инструкции на сайте. В принципе, у них даже есть пиксельный редактор для быстрой корректировки, но это уже на любителя. =) Мне кажется, пользоваться Photoshop будет быстрее и удобнее.

X-Icon Editor позволяет легко загружать изображения в формате PNG, а затем экспортировать их в один файл ICO.

Добавление Favicon на сайт

После того, как вы экспортировали файл ICO из инструмента наподобие X-Icon Editor, вы готовы разместить его на своем сайте. Убедитесь, что вы назвали файл favicon.ico, а затем просто поместите его в корень вашего сайта. Другими словами, ваша иконка должна открываться по адресу http://example.com/favicon.ico.

Почти каждый браузер будет искать в корневом каталоге файл с названием favicon.ico и использовать для иконки именно его. Не прячьте его в отдельную папку, иначе браузер на сможет его найти. Кроме того, для кросс-браузерной поддержки, лучше не добавлять никаких HTML-элементов или ссылок, которые ведут на файл Favicon. Такой подход успешно работает для всех браузеров вплоть до IE6.

Обновление Favicon

Большинство браузеров кэшируют иконки. Поэтому часто при редактировании Favicon вы можете столкнуться с такой неприятностью, когда изменение файла на сервере не влияет на смену изображения в браузере. Это очень неприятно и вызывает массу негативных эмоций.

В таких ситуация рекомендуется добавить временный HTML-который будет указывать на расположение иконки, добавив к адресу параметр версии:

<link rel="shortcut icon" href="http://example.com/favicon.ico?v=2" />

Так, браузер воспринимает путь как уникальный URL и запрашивает его повторно, при этом обновляя кэш. Каждый раз при обновлении иконки увеличивайте число версии, чтобы браузер сохранял себе самую актуальную версию. После того, как все работы по иконке завершены и вы довольны результатом, удалите этот HTML-тег.

Создание более сложных Favicon

В этой статье рассматриваются самые основы создания Favicon, которые будут покрывать 80% ваших задач по разработке. Однако, всегда остаются 20% задач, которые требуют более тщательной реализации. Если вы хотите глубоко вникнуть в специфику использования иконок для iOS, для плиток Metro, для Google TV и многого другого, ознакомьтесь с подробной шпаргалкой по Favicon. Это объемный материал, который в полной мере сможет помочь вам решить все вопросы с иконками сайта.

Favico.js позволяет создавать динамические значки, которые могут отображать пронумерованные иконки.

Вы также можете использовать динамические иконки для того, чтобы показать последовательность действий или для других целей. Для этого вы можете воспользоваться утилитой favico.js, которая доступна на GitHub. Имейте в виду, что пока что она не очень хорошо поддерживает кросс-браузерность, однако активно дорабатывается и, возможно, вполне подходит для вашего проекта.