Создание favicon для сайта

У рядового пользователя нередко встретишь более 20 открытых вкладок в браузере, по которым он легко ориентируется. Как он это делает? Запоминает название каждой вкладки? Все гораздо проще. Если вы взгляните на свои же вкладки, вы увидите, что каждая из них имеет свой значок рядом с названием страницы.

Чаще всего именно по этой иконке вы и ориентируетесь. Вы смотрите на вкладки и понимаете, что «Документы Google» открыты под иконкой с синим блокнотом. Под красной кнопкой спрятался YouTube, а логотип нашего издания дает понять, что вы сейчас на вкладке с этой статьей.

Эти значки известны как фавиконы (сокр. от англ. FAVorite ICON — «значок для избранного»). Они помогают не только найти нужную вкладку в загруженном браузере, но и увеличить узнаваемость бренда. Сегодня вы узнаете все про фавикон, поймете зачем его использовать и также научитесь его создавать. Так что не будем терять время, а сразу же переходим к самому интересному.

Содержание статьи

1. Что такое favicon (фавикон)?
2. Для чего нужен фавикон?
3. Какой формат использовать для favicon?
4. Размер фавикона
5. Дизайн фавикона: рекомендации
6. Онлайн-генераторы для создания фавикона (favicon generator)
7. Как разместить favicon на сайте?
8. Распространенные ошибки при создании фавикона

Что такое favicon (фавикон)?

Фавикон — это небольшое квадратное изображение размером 16×16 пикселей, которое представляет сайт в браузере. Эта иконка обычно содержит логотип, первую букву бренда или общее изображение, представляющее тип бизнеса.

Термин «favicon» представляет собой смесь двух слов: «favorite» и «icon». Это название происходит от того как первоначально использовались эти значки. Фавиконы впервые появились в Internet Explorer 5 в 1999 году в разделе «Favorites», которое сейчас вы знаете как «Закладки».

В отличие от множества терминов, в которых сочетаются два слова, термин «favicon» не был создан, как сокращение. Это было фактическое имя файла, который был расположен в корневом каталоге сайта. И сегодня, какой бы файл ни был сохранен как favicon.ico в корневом каталоге, он будет отображаться в качестве значка сайта.

Эти иконки чрезвычайно полезны для брендинга и удобства пользователей. В браузерах они позволяют легко найти нужный сайт по значку рядом с названием:

Они также отображаются в списке URL-адресов, которые вы отметили как закладки в вашем браузере. А при просмотре раздела истории Google Chrome единственное, что упрощает поиск конкретной ссылки, — это маленькие красочные значки:

Некоторые поисковые системы (кроме Google) также включают значки в результаты поиска. На сегодняшний день Google их отображает только в мобильной версии:

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

Для чего нужен фавикон?

1Узнаваемость бренда

Фавикон обычно представляет собой уменьшенную версию логотипа компании или специально разработанное изображение, напоминающее логотип или название бренда. Так как логотип может не всегда подходить для относительно небольшого формата фавикона. Например, если вы видите значок Facebook или Youtube, вам не нужно обращать внимание на название вкладки, чтобы понимать, какой сайт там загружен. Поэтому фавикон — это идеальное решение, если вы хотите начать развитие своего бизнеса онлайн. Люди будут ассоциировать фавикон с вашим брендом, поэтому они узнают вашу компанию, когда вы появитесь в их офлайн поле зрения.

2SEO

Хотя наличие значка не имеет прямого влияния на SEO, оно может косвенно принести пользу вашему сайту. Если сайт был добавлен в закладки и пользователи после смогли легко его найти по иконке, то он вероятно получит больше посещений. В результате это может немного улучшить результаты поисковых систем, поскольку они, как правило, отдают предпочтение популярным сайтам. Кроме того, браузеры обычно ищут изображение favicon.ico и, если не находят его, выводят в консоли ошибку «404 Not found». Хотя это небольшая проблема, но подобная ошибка также не может способствовать развитию SEO.

3Доверие

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

4Возврат клиента

Поскольку иконка будет отображаться в закладках, истории браузера и результатах поиска, более вероятно, что люди снова посетят ваш сайт, если увидят знакомый значок. Закладки и история браузера обычно включают в себя множество записей, и многие из них содержат длинные ссылки, людям будет намного легче увидеть и щелкнуть на знакомую иконку.

Какой формат использовать для favicon?

Первоначально все значки создавались как файлы ICO — формат, разработанный Microsoft для хранения ярлыков программ Windows. Самым большим преимуществом этого формата является то, что он может хранить изображения разных размеров в одном файле.

Раньше Internet Explorer поддерживал только этот формат файла, но современные браузеры также позволяют использовать значки PNG, а некоторые браузеры даже поддерживают значки GIF, JPEG и SVG. Единственным исключением являются более ранние версии Internet Explorer, такие как 10 и ниже — они совместимы только с файлами ICO.

Как правило, значки ICO теперь считаются немного устаревшими, и большинство сайтов сегодня перешли на значки в формате PNG. Причина этого — качество изображения: высокая кроссбраузерность и кроссплатформенность. Иконки PNG выглядят намного лучше в большинстве современных браузеров и устройств.

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

Фавиконы в форматах файлов SVG, GIF и JPEG не так хороши с точки зрения совместимости с браузерами, но это может измениться в будущем. Формат SVG (масштабируемые векторные изображения) может стать новой нормой, поскольку его использование решит проблему создания нескольких иконок разных размеров для обслуживания всех популярных устройств.

Если вам интересно, какой формат файла использовать, мы рекомендуем либо классический ICO, либо более широко поддерживаемый PNG. Более подробно о других форматах вы можете узнать из таблицы ниже.

Основные браузеры и поддержка различных форматов фавикона в разных версиях

Браузер	ICO	PNG	JPEG	SVG	GIF
Google Chrome	Да	От 4.0	От 4.0	Нет	От 4.0
Opera	От 7.0	От 7.0	От 7.0	Нет	От 7.0
Firefox	От 1.0	От 1.0	Да	Да	От 1.0
Internet Explorer	От 5.0	От 11.0	Да	Нет	От 11.0
Safari MacOS	Да	От 4.0	От 4.0	Да	От 4.0

Размер фавикона

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

• 16 пикселей: для общего использования во всех браузерах, может отображаться в адресной строке, вкладках или закладках.
• 24 пикселя: закрепленный сайт в Internet Explorer 9
• 32 пикселя: новая вкладка в Internet Explorer, кнопка панели задач в Windows 7+ и боковая панель Safari «Читать позже».
• 57 пикселей: стандартный домашний экран iOS (iPod Touch, iPhone от первого поколения до 3G)
• 72 пикселя: значок главного экрана iPad
• 96 пикселей: значок, используемый платформой Google TV.
• 114 пикселей: значок главного экрана iPhone 4+ (в два раза больше стандартного размера для дисплея Retina)
• 128 пикселей: интернет-магазин Chrome
• 195 пикселей: Быстрый набор Opera
Онлайн-курс "Data Science with Python" від robot_dreams.
Навчіться користуватися бібліотеками Python для розв’язання задач дата-саєнтистики, обробки масивів даних та побудови ML-моделей.
Програма курсу і реєстрація

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

После того, как в HTML5 был введен атрибут размера, вы также можете легко указать несколько размеров одного и того же значка. Атрибут позволяет установить ширину и высоту значка, а также указать несколько значений, разделенных пробелом:

<link rel = "icon" sizes = "<16> X <16>">

<link rel = "icon" sizes = "<16> X <16>, <32> X <32>">

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

Дизайн фавикона: рекомендации

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

1. Используйте пространство с умом

Создавая фавикон, вы должны разумно использовать пространство. Не стоит создавать слишком маленькую иконку, которую пользователи просто не увидят.

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

2. Будьте проще

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

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

3. Отражайте свой бренд

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

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

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

4. Проконсультируйтесь с дизайнером.

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

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

Онлайн-генераторы для создания фавикона (favicon generator)

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

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

Favicon.by

Создать свой значок в Favicon.by очень просто. Вам нужно всего лишь загрузить изображение, обрезать его до нужного размера, а после скачать получившийся результат в формате ICO или PNG.

Недостатком этого генератора является то, что Favicon поддерживает только один размер: 16×16 пикселей.

Logaster

Этот сервис позволяет создать логотип, а потом на его основе сгенерировать фавикон. Пользователям доступны множество размеров в форматах pdf, .svg, .png, .jpeg. Учтите, что в Logaster бесплатно вы можете создать только один фавикон на белом фоне, за остальное придется оплачивать платную подписку.

Perfectoweb

Инструмент для создания фавиконов в популярных размерах: 16х16, 32х32, 48х48, 64х64, 128х128. Процесс создания максимально прост: загрузить картинку, выбрать размер и скачать иконку.

Favicon.io

Сервис, позволяющий создать фавикон из картинки, текста или эмодзи. Он позволяет выбрать цвет фавикона и фона. Инструмент генерирует иконки в формате .ico и .png нескольких вариантов размера. Можно скачать иконку или скопировать нужный код для вставки фавикона на сайт.

Как разместить favicon на сайте?

WordPress

Если вы используете самую популярную систему управления контентом сайта, вы можете добавить готовый фавикон в панели управления WordPress — Внешний вид — Настроить. Там вы найдете опцию идентификации сайта, где вы можете добавить фавикон.

Если вам не доступна такая функция, вы можете добавить код прямо в заголовок сайта. Файл для этого находится в каталоге /wp-content/themes/theme-name/header.php. Если вы не очень разбираетесь в технологиях, вы можете установить плагин Insert Headers and Footers, а затем скопировать и вставить код для своего фавикона с помощью этого плагина.

Другое приложение или собственный сайт

Если вы используете OpenCart или Prestashop, вы найдете такую ​​опцию в админке сайта. Там вы сможете изменить настройки сайта и загрузить изображение иконки.

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

Код для формата ICO:

<link rel = "shortcut icon" href = "https://example.com/favicon.ico">

Код для формата PNG:

<link rel = "icon" type = "image / png" href = "https://example.com/favicon-16x16.png" sizes = "16x16">

Вы также можете указать разные размеры для фавикона, если хотите использовать его на нескольких устройствах с разными требованиями. Вы должны использовать атрибут «размеры»:

<link rel = "icon" sizes = "<16> X <16>, <32> X <32>">

Распространенные ошибки при создании фавикона

Если вы создали и добавили фавикон к своему сайту, но все еще видите стандартный значок, скорей всего была допущена ошибка. Существуют разные причины, по которым фавикон не отображается. Например:

• Кэширование страниц браузером. Чтобы увидеть новую версию страницы, просто  очистите кеш браузера и обновите страницу. Комбинация клавиш «CTRL + F5» поможет очистить кэш, оставаясь на странице.
• Неверный формат либо размер иконки. Проверьте совместимость формата и наличие всех необходимых атрибутов в коде фавикона.
• Ошибка в размещении кода. Убедитесь, что код фавикона расположен в блоке <head>.
• Прошло слишком мало времени. Индексация фавикона поисковиками может занимать от двух недель до двух месяцев.
• Неуместное изображение. Как уже говорилось выше, ваше изображение не должно содержать запрещенные элементы или быть похожим на запрещенные символы.
• Низкое качество либо неуникальность фавикона. Если ваша иконка была скопирована с другого ресурса или была загружена в низком разрешении, поисковик может ее проигнорировать.

Если найти причину не удается, протестируйте фавикон на отображение и валидность в специализированных сервисах. К примеру, Favicon Checker показывает отображение фавикона в различных браузерах и сообщает о проблемах.