Как создать фавикон для сайта: полезные советы и сервисы

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

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

Как создать фавикон

Начнем с разработки дизайна фавикона. Хороший дизайн, несмотря на свою компактность, должен отражать всю сущность вашего сайта и являться органичной частью фирменного стиля. Обычно в качестве иконки выступает графический знак (иконка) компании а не целый лого (иконка, текст и слоган).

Создать фавиконВ качестве фавикона эти вебсайты используют свои иконки (или близкие к ним изображения).

Текст в фавиконе использовать не стоит, поскольку из-за маленького размера изображения этот текст будет нечитабельным. Исключением из этого правила могут служить лишь всемирно известные текстовые символы, которые автоматически ассоциируются с определенными брендом. Например, онлайн-ресурс Wikipedia оставил на фавиконе свою заглавную букву «W», а Facebook — букву «F».

Сделать фавикон
На этих фавиконах присутствуют буквы, которые прочно ассоциируются с определенным брендом. Например, Facebook использует свой графический знак. Также обратите внимание на то, что на изображении Disney видны пиксели. Это объясняется тем, что скриншот был сделан на Retina-дисплее, который совместим с иконками размером 16×16, в то время как сайты используют иконки размером 32×32.

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

редактировать фавикон
Чтобы избежать этого нужно изменить размер логотипа с помощью специальных редакторов, например Photoshop или GIMP. Сначала нужно уменьшить размер изображения до 64х64 пикселей (это самый крупный размер фавиконки). Затем нужно отредактировать каждый пиксель с помощью инструмента «Карандаш», пока изображение не будет четким. Это трудоемкий процесс, но результат того стоит. Когда фавикон 64х64 будет готов, нужно проделать ту же самую работу с изображением 16×16, 24×24 и 32×32 пикселей. Столько размеров нужно, чтобы изображение правильно отображалось во всех браузерах и гаджетах:

  • 64х64 — закладки браузера Safari;
  • 32х32 — дисплеи высокого разрешения (Ретина);
  • 24х24 — закладки браузера Internet Explorer и MicroSoft Edge;
  • 16х16 — Google Chrome и другие браузеры.

Как сделать фавикон в Фотошопе

Для начала нужно создать несколько холстов с вышеуказанными размерами.

Фавикон фотошоп
Затем нужно добавить иконку, букву или другое изображение на холст.

фавикон в фотошоп

Как сохранить фавикон

Создав иконки разных размеров, сохраните каждую из них как прозрачный файл PNG (24 бит). В Photoshop можно воспользоваться функцией «Сохранить для веб», доступной в меню «Файл». Затем необходимо объединить все PNG-файлы в один ICO-файл. Можно одновременно использовать и файлы PNG, и файлы ICO, но нередко даже Safari и Chrome предпочитают исключительно формат ICO. На мой взгляд, проще создать один ICO-файл. Формат ICO нельзя назвать очень распространенным, но, к счастью, существует ряд инструментов, которые помогут вам конвертировать ваши файлы в этот формат. Для этой цели я предпочитаю использовать X-Icon Editor. Это бесплатный онлайн-сервис, который мгновенно конвертирует загруженные изображения в один ICO-файл, после чего вы можете его скачать. В этом нет ничего сложного, просто следуйте инструкции на сайте. Если вы считаете себя отчаянным человеком, можете поэкспериментировать с пиксельным редактором этого сервиса и нарисовать фавикон самостоятельно. (Хотя я предпочитаю редактировать фавиконы в более профессиональном редакторе, например, в Photoshop).

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

Как вставить фавикон на сайт

Итак, у вас уже есть файл формата ICO. Теперь его необходимо добавить на веб-сайт. Переименуйте файл в favicon.ico и разместите его в корневой папке вашего веб-сайта (туда, где хранится файл index.html и другие стандартные файлы). После успешного добавления вы можете посмотреть его по адресу: вашсайт .com/favicon.ico. Практически все браузеры ищут файл favicon.ico в корневой папке. Поэтому важно, чтобы вы загрузили фавикон именно в эту папку. Для обеспечения совместимости с разными браузерами, лучше не добавлять никакие HTML-элементы или ссылки, которые указывают на его местоположение. Этот прием работает для всех браузеров, вплоть до IE6. Также, если у вас сайт на WordPress, то во многих темах фавикон можно добавить в настройках темы. Этот способ также можно использовать.

Как заменить фавикон

По какой-то необъяснимой причине браузеры добавляют его в кэш. Поэтому когда вы загружаете новый файл ICO, браузер может продолжать показывать ваш старый фавикон. Что же делать в таком случае? Вы можете добавить временный HTML-файл который указывает на местоположение вашего нового фавикона. Также в конец URL необходимо добавить короткую строку запроса:

<link rel=»shortcut icon» href=»вашсайт .com/favicon.ico?v=2″ />

Так браузер будет думать, что это уникальный URL, и, следовательно, будет вынужден отображать новую иконку. После обновления фавикона этот HTML-код можно полностью удалить. Если вам нужно будет внести изменения в фавикон, воспользуйтесь тем же приемом, каждый раз увеличивая цифру после «v» в строке запроса. Таким образом, браузер будет каждый раз воспринимать этот URL как уникальный и отображать новую его версию. И не забывайте удалять HTML-код после успешного обновления.

Как создать более сложные фавиконы

В этой статье я хотел описать универсальный и простой способ создания фавиконов, которые будут работать на практически любых платформах. Но в веб-дизайне и разработке нет предела совершенству. Если вы хотите научиться создавать более сложные иконки, то можете попробовать использовать сервис favico.js. Он позволяет создавать динамические изображения с изменяющимися цифрами. Благодаря такой иконке, вы сможете видеть количество непрочитанных сообщений, даже когда соответствующая вкладка не активна. Если вы хотите создать анимированные фавиконы онлайн, то можете попробовать использовать генератор фавиконов favicon.cc.

Больше онлайн генераторов вы можете найти здесь.

Если вы хотите поделиться своими советами по созданию фавиконов или задать вопрос, я жду вас в комментариях!