Как добавить значок фавикона «Favicon» на свой сайт
Фавикон — в переводе с англ. «Favicon», что означает «FAVorite ICON» — «избранный значок». Такой значок помогает создать визуальную идентичность для вашего веб-сайта и улучшить взаимодействие с пользователем. Что нужно знать о фавиконах? Что такое Favicon и как они помогают вашему сайту, практика их использования и многое другое в этой статье!
Фавикон появился в Internet Explorer 5 в 1999 году для отображения избранной иконки в разделах «избранное», «закладки», а также в адресной строке. Также значок стал отображаться в адресной строке в некоторых браузерах и рядом с заголовком в поисковой выдаче.
Что такое фавикон?
Вы, наверное, видели фавиконы по всему Интернету, иногда даже не осознавая этого. Это очень маленькие значки, размером от 16 x 16 пикселей до 120 x 120 пикселей, которые располагаются рядом с заголовком страницы на панели вкладок вашего браузера, а также рядом со сниппетов в поисковой выдаче.
Фавиконы могут быть настолько малы по размеру, что могут казаться несущественными элементами вашего сайта. Но по общему признанию, сейчас они играют важную роль. Все аналитические кабенеты вебмастеров требуют наличие фавикона. Ранее это было практично и единственным надежным способом измерить трафик и подсчитать, сколько пользователей добавили в закладки конкретную страницу.
Значки Favicon и сейчас является важным пунктом в продвижении вашего проекта в браузерах и любых поисковых системах, закладках, ссылках и иногда даже в полях URL-адресов. Их также можно использовать в качестве ярлыка вашего сайта на смарт-устройствах.
Уделяете внимание о пользовательском опыте и хотите сохранить полный контроль над вашем брендом вашего бизнеса? Значит стоит задуматься об использовании значка на своем сайте.
Зачем вам добавлять фавикон на свой сайт?
Фавикон играет тонкую, но важную роль в брендинге вашего сайта. Посетители сайта будут точно знать, где они находятся, когда увидят ваш значок, он подсказывает пользователю, что он находятся в нужном месте. Найти творческие и тонкие способы брендинга вашего сайта - не самая простая задача, поэтому было бы ошибкой не добавлять фавикон.
Фавиконы играют еще одну немаловажную и очень важную роль на вашем сайте в поисковой системе. Они улучшают взаимодействие с пользователем. украшая скучную строку URL-адресов, а некоторые браузеры показывают значки в разделе быстрого перехода в виде ярлыка для соответствующего веб-сайта на своем компьютере или мобильном устройстве.
Одна из целей любого веб-сайта должна заключаться в том, чтобы побудить посетителей совершать повторные посещения. Favicon помогает вам укрепить ваш бренд и улучшить пользовательский интерфейс.
Как создать фавикон
Есть несколько способов создать фавикон для вашего сайта. Например, вы можете нанять дизайнера, который воспользуется вашим брендом и видением и создаст значок, который будет учитывать всевозможные способы просмотра, применения и размеры.
Кроме того, вы можете создать свой значок вручную, используя различные графические инструменты по разработке Favicon, например такие платформы, как Adobe Photoshop, Photoimpact и так далее, помогут вам создать высококачественные значки.
Для генерации значка из графического формата png, gif, jpg в формат .ico или .svg, вы можете, использовать онлайн генератор. Этот вид инструментов также может помочь вам создать некоторые дополнительные файлы, необходимые для правильного отображения значков на определенных устройствах.
На самом деле создать значок не так уж сложно для визуальных креативщиков. Однако она по-прежнему менее доступно начинающему пользователю, который при создании не учитывает многие факторы, которые должны быть учтены. Поскольку сама иконка, может быть очень маленькой, но должна быть понятной и простой. Процесс можно свести к следующим двум этапам.
Этап 1. Определите подходящий размер для вашего фавикона
Хотя значки значков могут иметь минимальный размер 16 x 16 пикселей, они также могут достигать до 120 x 120 пикселей и более. Таким образом, вам необходимо выбрать решение с учетом всех требований, которые необходимо выполнить после разработки.
Вот краткое описание некоторых рекомендуемых размеров для вашего значка:
- 16 x 16 пикселей — это минимальный размер для всех браузеров, он представляет собой самый минимизированный размер.
- 24 x 24 пикселя — этот размер используется для «закрепленного сайта» например в Internet Explorer 9.
- 32 x 32 пикселя — размер используется в некоторых инструментах, таких как новая вкладка в Internet Explorer и Microsoft Edge, кнопка на панели задач в Windows или боковая панель в IOS и Android.
- 57 x 57 пикселей — стандартный размер «Retina» на главном экране iOS.
- 72 x 72 пикселя — соответствует стандартному размеру значка на главном экране iPad.
- 114 x 114 пикселей — современный размер устройства на IOS, который использует установленный размер из-за дисплея «Retina» с возможностью четкого просмотра.
- 120 x 120 пикселей — размер рекомендуемого значка в поисковой системе Яндекс.
Учитывая различные моменты и способы применения, нужно учитывать тот факт, что требуется создать значки всех этих размеров. Тем более если вы ожидаете посетителей с разных типов устройств. Однако вы также можете просто выбрать конкретный размер, если стоит задача в применении только на некоторых устройствах, отказавшись от всего остального.
Шаг 2. Создайте свой значок и сохраните его в соответствующем формате ico, png или svg
На самом деле создание вашего фавикона займет немного больше времени так как должно быть определен еще и графический формат значка. Существует множество вариантов и присутствуют субъективные мнения о том, какой вы хотите и можете использовать метод.
Если у вас нет предпочтительного инструмента, который вы могли бы использовать, то специальные онлайн генераторы по конвертации вашего значка в любой формат, вам поможет. Но вы всегда должны помнить о следующих практических правилах при создании своего значка:
- Сохраняйте простой дизайн, так как он часто будет отображаться в таком крошечном размере, что будут потеряны сложные детали.
- Считайте свой значок продолжением вашего бренда. Другими словами, используйте те же цветовые схемы, шрифты и графику, что и ваш основной логотип или другие ключевые элементы брендинга.
- Сначала создайте самый большой размер, который вам нужен, а затем уменьшите размер значка по мере необходимости.
- Проверьте как ваш значок будет виден на темных, светлых или разноцветных фонах.
Когда ваш дизайн будет готов, вам нужно будет сохранить его в правильном формате. Многие графические пакеты позволяют использовать расширение .ico , png , svg и иметь название «favicon», после чего имя вашего значка будет favicon.ico , favicon.png , favicon.svg . Для значков разного размера вы можете включить их размеры в имена файлов. Например:
- apple-icon-114x114.png
- apple-icon-144x144.png
- apple-icon-57x57.png
- apple-icon-72x72.png
Инструменты для создания фавиконов
Если вы хотите быстро создать значок, вы можете использовать ряд онлайн инструментов. Вот пример и краткий обзор онлайн редактора значков и онлайн конвертора для изменения размера вашего favicon.
Favicon.cc является ведущим разработчиком значков и очень прост в использовании. Выбирав цвет, вы раскрашиваете каждый пиксель, а затем нажимаете кнопку «Загрузить Favicon» или импортировать свою картинку, отредактировать и скачать иконку в нужном формате и размере.
Favicon — является ведущим разработчиком значков и очень прост в использовании. Выбирав цвет, вы раскрашиваете каждый пиксель, а затем нажимаете кнопку «Загрузить Favicon» или импортировать свою картинку, отредактировать и скачать иконку в нужном формате и размере.
Perfectoweb — является надежным выбором для сохранения вашего значка в разных размерах, начиная от 16px до 144px. Вам потребуется выбрать и загрузить на сайт ваш фавикон, далее выбрать размер и после конвертации сохранить полученный файл в нужном размере.
Эти два инструмента предлагают гибкие настройки при преобразовании вашего значка в разные размеры, хотя мы должны дать преимущество последнему, основываясь на расширенных параметрах для изменения размера ваших файла.
Конечно, существуют более мощные инструменты чем те, которые мы вам показали в примере. Вы можете найти и выбрать другие инструменты для создания своих иконок. С более высоким разрешением или под современные дисплеи, с возможностью загрузить и отредактировать свои собственным изображения.
Плагины и расширения для Favicon
Как вы уже поняли, фавиконы необходимо сохранять в файле определенного типа, который обычно не используется для изображения на сайте. Генератор Favicon может быть полезен для преобразования ваших изображений в файлы .ico . Это формат был разработан и стал специально использоваться для значков. Поисковые системы стали уделять внимание на другие форматы, например .svg , который пользуется успехом из-за своего качества значка.
В зависимости от генератора вы можете преобразовывать текст, смайлики и другие типы изображений в файл правильного типа с учетом всех требований. В поиске существует множество онлайн генераторов, а также специальных плагинов, они позволят создавать свои значки, которые можно адаптировать на различных платформах. За считаные секунды вы можете настроить значок так, как вам будет необходимо и удобно в использовании.
Генератора позволяют создавать копии изображений и с разными размерами. Это означает, что вам не придется выяснять последние рекомендации по совместимости для каждого устройства, на котором вы хотите, чтобы ваш значок отображался корректно и понятно.
Куда и где размещается фавикон на сайте
Есть несколько вариантов на выбор, если вы ищете способы добавить значок на свой сайт без использования файловых менеджеров, которые потребуют подключения к корню сайта через FTP, и специальных плагинов, то существует простой вариант:
Зайдите на ваш хостинг провайдер. Перейдите в раздел панели управления сайтом. Открыв корневую паку с вашим шаблоном сайта (Рис 1) , (Рис 2), вы увидите среди других файлов favicon.ico , который установлен и загружен по умолчанию. Удалив его, вы загружаете свой значок.
- Внимание!
- Перед удалением и загрузкой фавикона, убедитесь, что загружаемый ваш значок имеет такое же название, что и тот, который удалите.
Также можно загрузить значок, не удаляя тот который загружен по умолчанию. При загрузке нового фавикона, в окне предупреждения согласитесь с тем, что уже существует файл с тем же названием, при загрузке вашего нового файла, будет заменен.
- Внимание!
- Так как некоторые системы берут фавикон не из паки шаблона например ваш_сайт/название_шаблона_сайта/favicon.ico (Рис 3), а именно из корня сайта; ваш_сайт/favicon.ico, то не забудьте в robots.txt указать путь к вашему favicon в папке шаблона (Рис 4), прописав: Allow: ваш_сайт/название_шаблона_сайта/favicon.ico