Подробное руководство по фавикону (favicon) для сайта

Содержание
  1. Что такое фавикон и где он используется
  2. Где же можно увидеть фавикон?
  3. Как создавать фавиконки для разных браузеров и устройств
  4. На что обратить внимание при создании фавикона
  5. Создание favicon.ico
  6. Онлайн-сервисы
  7. Adobe Photoshop
  8. RealFaviconGenerator.net
  9. Онлайн-генераторы для создания фавикона (favicon generator)
  10. Favicon.by
  11. Logaster
  12. Perfectoweb
  13. Favicon.io
  14. Изменение и удаление фавиконки
  15. Размеры фавиконов для браузеров и устройств
  16. Достаточный пакет фавиконок для популярных браузеров
  17. Android
  18. Apple
  19. Edge и IE 12
  20. Сервисы для самостоятельного создания фавикон
  21. Favicon.cc
  22. Genfavicon.com
  23. Realfavicongenerator
  24. Faviconit
  25. Что это такое?
  26. Как установить фавикон на сайт
  27. Зачем нужен фавикон
  28. Помогает в навигации
  29. Вызывает доверие
  30. Увеличивает кликабельность
  31. Бонус — инструменты для создания иконки для сайта
  32. Онлайн-сервисы для создания фавикон
  33. Почему фавикон нужен каждому сайту
  34. Как добавить фавикон на сайт
  35. Подготовка изображения для favicon
  36. Генерация иконки favicon для всех платформ
  37. Установка фавиконки на сайт
  38. Дизайн фавикона — когда проще не значит хуже
  39. Что такое favicon, почему плохо, если он отсутствует?
  40. Favicon
  41. Онлайн-генераторы фавиконок
  42. Рекомендации Яндекса по фавиконкам
  43. Рекомендации Google
  44. Заключение

Что такое фавикон и где он используется

Фавикон (favicon) — это в дословном переводе с англ. «значок для избранного» (FAVoritesICON). Именно так называются закладки в браузере Internet Explorer, где впервые стали использоваться визуальные иконки для быстрого поиска нужного сайта. 

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

Где же можно увидеть фавикон?

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

2. В истории просмотров браузера.

3. На панели закладок.


4. В избранном, куда вы сохраняете все интересные страницы.

5. В мобильной и десктопной выдаче Google. Фавиконы на мобильных экранах появились еще весной 2019 года, а вот в десктопной выдаче — буквально в первые недели 2020 года.  

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

Как же создать собственный фавикон для сайта? Можно ли просто уменьшить существующее лого бренда и загрузить его на сайт? Какого размера фавикон лучше использовать? Давайте разбираться.

Как создавать фавиконки для разных браузеров и устройств

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

Файл favicon.ico — стандартный пакет, в котором могут хранится разные фавиконы. Разместите в нём изображения разных размеров: 16*16, 32*32, 48*48. Такой контейнер обеспечит корректное отображение иконки на любых платформах: Chrome, Opera, Firefox, Safari, «Яндекс.Браузер» и др.

Примеры кода

<link rel=»icon» type=»image/ico» sizes=»32×32″ href=»/icons/favicon.ico»>

<link rel=»icon» type=»image/ico» sizes=»16×16″ href=»/icons/favicon.ico»>

<link rel=»shortcut icon» href=»/icons/favicon.ico»>

Чтобы иконка отображалась на мобильных устройствах, её нужно сжать.

Для андроида

Загрузите изображение в формате .png. Оптимальный размер — 180*180 пикселей. Значок и его расположение можно указать через . В ней вы найдёте описание JSON-файла, в котором можно указать значки, их данные для веб-ресурсов и мобильных приложений.

Указать манифест можно так: <link rel=»manifest» href=»/manifest.json»>.

Пример кода

{

    «name»: «%title%»,

    «icons»: [

        {

            «src»: «\/android-chrome-36×36.png»,

            «sizes»: «36×36»,

            «type»: «image\/png»,

«density»: «0.75»

        },

Для Apple

Рекомендованный размер фавикон для iOS — 180*180, но допустим 57*57. Формат — PNG. В Safari такие файлы именуются как Web Clips. Изображения прекрасно отображаются в других браузерах и смотрятся качественно: картинка чёткая, углы автоматически округляются при добавлении приложения на главный экран телефона. apple-touch-icon.png — так вы должны указать файл в rel.

Пример кода

<link rel=»apple-touch-icon» sizes=»180×180″ href=»/icons/apple-touch-icon.png»>

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

На что обратить внимание при создании фавикона

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

Но есть несколько лайфхаков:

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

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

Если это важно — измените его на 2-3 тона, не более.

Измените пропорции элементов. Например, на логотипе есть тонкие линии, которые будут незаметны на небольшом изображении

Достаточно сделать их чуть шире, и картинка готова.

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

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

Размер Форматы Особенности
Яндекс 120*120, 32*32, 16*16 Рекомендуемый: SVG

Альтернативные варианты: JPEG, PNG, GIF без анимации, ICO

Гугл Кратный 48: 144*144, 96*96, 48*48. 

Не рекомендуется загружать изображения размером 16*16

Поддерживаются файлы всех допустимых форматов: PNG, JPEG, SVG, ICO, GIF без анимации и другие

Создание favicon.ico

Самые распространенные способы – это с помощью онлайн сервисов или знаменитого растрового редактора – Adobe Photoshop.

Онлайн-сервисы

Интерфейс сервиса состоит из следующих разделов:

  1. Нарисовать самостоятельно – в этом разделе есть все что необходимо для самостоятельно рисования фавиконки (карандаш, ластик, пипетка, заливка, переместить).
  2. Импорт из файла – выбираете любой рисунок и сервис сам создает фавикон.
  3. Импорт с сайта – создаст favicon.ico на основе импорта фавиконки с сайта.
  4. Область для рисования.
  5. Готовый результат – сразу можете оценить, как будет выглядеть favicon.
  6. Скачать готовую фавиконку.

Вот такой простой, не сложный сервис поможет создать красивую и уникальную фавиконку.

Adobe Photoshop

Я выбираю именно фотошоп, потому что редактирую в нем все картинки для блога. Если у Вас нет опыта работы с Adobe Photoshop, не переживайте, я все подробно покажу.

Открывает программу, создаем документ с размером 32×32 пикселей.

Далее с помощью инструментов можно:

  1. сделать заливку;
  2. написать текст;
  3. создать фигуру.

Или загрузить картинку, например, свой логотип и его уменьшить до необходимых размеров.

  • Для этого открываем меню Файл -> Открыть, далее выбираем свою картинку и нажимаем кнопку Открыть.
  • После, инструментом выделение, отмечаем нужную часть логотипа, далее меню Редактирование -> Копировать.
  • Закрываем логотип, открываем документ с нашей будущей фавиконкой, нажимаем меню Редактирование -> Вставить.
  • Далее на клавиатуре нажимаем сочетание клавиш Ctrl+T (eng), подгоняем картинку под наши размеры. Готово.

Фавиконку сохраняем, выбрав меню Файл -> Сохранить как…, указываем имя favicon и выбираем расширение .png или .jpeg или .jpg.

После сохранения можно устанавливать, но рекомендуется файл с расширением .ico. Поэтому наш favicon.png конвертируем в favicon.ico.

Далее нажимаем кнопку Конвертировать, ждем и можем скачивать готовую фавиконку.

Вот теперь можно поставить фавикон на сайт.

RealFaviconGenerator.net

Онлайн-генератор позволяет на основе всего одной вашей картинки (желательный размер исходника не менее 260×260) создать иконку для вашего сайта для всех типов браузеров и устройств.

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

На вкладке настройки под iOS мы можем указать цвет фона для иконки, а так же указать размер отступов внутри области иконки. Вкладка Dedicated picture позволяет загрузить другой вариант иконки для конкретного типа устройства (аналогично для Android, Windows и Mac OS)

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

Для закрепленных вкладок в Safari 9 под Mac OS X El Capitan используется новый вариант с svg иконками.

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

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

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

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

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

Favicon.by

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

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

Logaster

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

Perfectoweb

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

Favicon.io

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

Изменение и удаление фавиконки

При правильном размещении иконки (указании верного пути), значок сайта появляется по мере обхода сайта роботом.

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

То же самое касается и удаления значка. Удалите файл и удалите упоминание о нем в <head>, примерно через три-четыре недели поисковая система удалит значок напротив вашего сайта. Иногда придется ждать до двух месяцев.

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

Но! Считается, что сайт без favicon не такой хороший, каким мог бы быть и мешает продвижению сайта. Считается не мной, а поисковыми системами, которые делают анализ привлекательности сайта в поисковой выдаче, сравнивая его с конкурентами. Например: по запросу рядом расположены два сайта, у одного из них более кликабельный и красивый значок (допустим, сниппеты одинаково информативны). Куда пойдет пользователь? Очевидно, на сайт с фавиконом. Делаем вывод — обязательно устанавливаем фавикон на сайт. Фавикон в выдаче появится не разу, а через 1-2 апдейта поисковой системы.

Размеры фавиконов для браузеров и устройств

С технической точки зрения быстрее и проще сделать одну иконку ICO, PNG или SVG для всех устройств. С точки зрения юзабилити лучше сделать несколько для разных устройств и браузеров, потому что они могут отличаться внешне — где-то требуется больший размер, где-то достаточно небольшого файла.

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

Фавиконы сайтов на экране смартфона

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

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

Стандартно для фавикона делают файл favicon.ico — это контейнер для нескольких файлов. Будет достаточно favicon.ico с файлами в размерах 16×16, 32×32 и 48×48.

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

Дополнительно можно добавить файлы для мобильных устройств.

Android

Обычно используют файл .png размером 180×180, можно использовать прозрачность. Указать фавикон и его расположение для Android можно через спецификацию Web App Manifest. В ней описан простой JSON-файл, в котором веб-мастеры указывают иконки, размеры и форматы для сайта или приложения.

Манифест указывают с помощью:

Пример кода:

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

Цвет файла и фона для иконки можно указать с помощью метаданных в HTML, к примеру:

Apple

Для iOS иногда используют размер 57×57, но рекомендуют лучше делать иконку PNG размером 180×180. В документации Safari такие называются
Web Clips, в них не должно быть прозрачности, углы автоматически округлятся при добавлении на главный экран. Это значок высокого расширения, он будет отображаться и в других браузерах. В rel нужно указать “apple-touch-icon.png”.

Пример кода:

Apple поддерживает и другой формат иконок. Для закрепленных вкладок в Safari и кнопок на Touch Bar в MacBook есть возможность указать монохромную векторную маску и цвет, который ее заполнит при наведении.

Настраивают с помощью link rel=»mask-icon».

Пример кода:

Edge и IE 12

Цвет файла и фона для иконки можно указать с помощью метаданных в HTML.

Пример кода:

У Microsoft есть
«Browser configuration schema reference» — XML-документ, в котором перечислены различные значки, соответствующие интерфейсу. Файлы конфигурации браузера позволяют задавать настройки с помощью внешних XML-файлов.

Пример кода:

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

Сервисы для самостоятельного создания фавикон

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

Favicon.cc

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

Genfavicon.com

Сайт Genfavicon.com позволяет конвертировать любое изображение, независимо от формата и размера. Когда всё будет готово, вам останется сохранить его в формате .ico. Сервис работает на нескольких языках и есть опция предварительного просмотра.

Realfavicongenerator

Чтобы создать фавикон на сервисе Realfavicongenerator, загрузите изображение размером не менее 70*70 пикселей. Оптимальный размер для создания качественных читабельных иконок — 260*260 и больше. Дальше вы сможете поменять фон, настроить отступы и подобрать цветовую гамму.

Когда всё будет готово, вы получите пакет файлов, которые нужно скачать и добавить на сайт код.

Faviconit

Исходный файл, который вы должны загрузить на сайт Faviconit, должен быть размером 310*310 пикселей, вес — не более 1 мегабайта. Вы можете задать имя иконки и указать папку хранения. Готовый вариант вы получите в виде папки с файлами. Откройте его, внутри увидите текстовый файл с кодом, который нужен для встраивания значка на сайт.

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

Что это такое?

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

Изображение для фавикона должно быть с расширением .ico или .png, и иметь разрешение 16х16, 32×32, или 64х64 пикселей. В случае, если изображение не будет соответствовать этим требованиям, то фавикон не будет отображаться ни в поиске, ни во вкладке браузера.

Почему так важно установить фавикон на сайт? Дело в том, что он дает вашему сайту некоторые преимущества:

1.Ваш сайт становится более узнаваемым

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

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

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

4.Так же, существует мнение, что, хоть и незначительно, но отсутствие фавикона может отрицательно повлиять на ранжирование сайта в Яндексе.

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

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

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

Алгоритм действий будет такой:

  1. Сохраните элемент в корневом каталоге. Имя изображения — favicon.ico. У вас должен получится адрес подобный этому — https://sitename.ru/favicon.ico. Он нужен, если вы планируете ставить разные значки для разных страниц. Если будете использовать один ФИ для всех ситуаций — указывать адрес необязательно.
  2. В HTML-код главной страницы добавьте ссылку на изображение. Код будет выглядеть так: <link rel=»icon» href=»https://sitename.ru/favicon.ico» type=»image/x-icon»>.

Процесс установки ФИ на сайт зависит от CMS.

Для CMS WordPress. Можно повторить алгоритм, о котором говорилось выше или использовать плагин Favicon by RealFaviconGenerator. Прежде чем устанавливать иконку на сайт, познакомьтесь с официальными документами WordPress о фавиконках.

Для CMS Joomla. Сохраните изображение в директорию /joomla/templates/<ваш фавикон>. Изучите информацию о ФИ на сайте CMS в разделе «Документация».

Зачем нужен фавикон

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

Помогает в навигации

Фавиконка помогает быстро находить сайт среди других. Когда открыто много вкладок, проще найти значок, чем считывать название каждой вкладки.

Фавиконы можно увидеть:

    • на вкладках и закладках в браузере,
      Фавиконы на вкладках и закладках браузера Mozilla
    • в истории браузера,
      Фавиконы в истории браузера
    • в результатах поиска «Яндекс»,
      Фавиконы в результатах «Яндекс.Поиска»
    • в мобильном поиске Chrome и «Яндекс»,
      Фавиконы в поиске Android Chrome
    • в часто посещаемых сайтах на главной странице некоторых браузеров.


Крупные фавиконы на стартовой странице Mozilla Firefox

Вызывает доверие

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


Сайты с фавиконками и без них во вкладках мобильного браузера

Увеличивает кликабельность

Нет информации о том, является ли наличие фавиконки фактором ранжирования. Но

если сайт проще найти в результатах поиска, а доверие к нему выше — это повышает кликабельность.

Бонус — инструменты для создания иконки для сайта

Существует как минимум четыре способа, как сделать иконку.

1. Adobe Photoshop CS с плагином File Formats — позволит нарисовать иконку самому и сохранить ее в формате .ico (некоторые версии фотошопа имеют с этим проблемы, поэтому нужен вышеупомянутый плагин). После того как нарисуете фавикон, сохраните файл в требуемом формате:

Плюс фотошопа в том, что вы можете сделать 3D-эффекты и градиент, поиграться со шрифтами и цветами логотипа/значка, попробовать нарисовать что-нибудь красивое. Но эта программа слишком громоздкая, поэтому можно воспользоваться другими, специально созданными для этого дела. Например — Icon Craft или Icon Magic.

2. Поищите значок для сайта в каталоге фавиконок. Один из таких каталогов — сайт favicon.cс

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

4. Можно заказать иконку! Да, вы верно поняли — все сделают за вас, вам только нужно знать, что конкретно вы хотите.

Красивых вам фавиконок, друзья. Приходите еще.

Онлайн-сервисы для создания фавикон

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

Скриншот сервиса favicon.by для созания фавиконки

Как правило, эти сервисы позволяют не только рисовать, но и конвертировать графический файл в стандарт ICO. Вот несколько еще существующих онлайн сервисов:

  • Favicon.cc – англоязычный сервис.
  • Favicon.by – русскоязычный сервис.

Устарели эти сервисы потому, что ограничены малым разрешением – 16х16 пикселей. А также из-за того, что сохраняют иконку в уходящем потихоньку на покой формате ICO.

Почему фавикон нужен каждому сайту

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

Наш инструмент «Аудит сайта», который проводит полный техосмотр вашего ресурса, в том числе проверяет и наличие фавикона. Вы можете проанализировать свой сайт, просто зарегистрировав аккаунт в SE Ranking.

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

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

Хороший фавикон — неотъемлемая часть бренда и технический стандарт каждого сайта, и точно стоит потраченного на него времени.   

776 views

Юлия Торчинская

Юлия — контент-маркетолог c 10-летним опытом работы в журналистике, копирайтинге, рекламе и PR. Своим опытом и знаниями она делится, создавая полезные статьи про SEO и диджитал-маркетинг для блога SE Ranking и популярных медиа. Когда Юлия не пишет статьи, она осваивает новые асаны, путешествует и помогает волонтерской организации YWCA.

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

Процесс установки иконки favicon на сайт, как правило, начинается с её создания. Из-за того что требования к разрешению и формату иконки favicon на различных устройствах разные лучше её сначала подготовить в векторном формате svg (масштабируемой векторной графике). Это действие позволит, используя одно изображение (svg), получить в отличном качестве значок favicon как с разрешением 16×16 пикселей, так и с 512×512.

В качестве инструмента для работы с графикой svg можно использовать профессиональный свободный векторный редактор как Inkscape.

Подготовка изображения для favicon

Рассмотрим основные действия по подготовке изображения в формате svg для favicon.

Изображение, которое будет использоваться в качестве иконки favicon сайта, можно нарисовать, или получить через поиск картинок сервиса Google или Yandex. Поиск изображения (значка) желательно осуществлять в формате svg. Но если найти подходящей иконки в формате svg не удаётся, то можно выбрать и другой формат (например, png или jpg). А потом в программе Inkscape с помощью специального инструмента перевести её в векторную графику (векторизовать растр).

Например, рассмотрим, как с помощью программы Inkscape можно подготовить изображение (иконку двери) в формате svg для фавикон.

  1. Используя сервис «Google Картинки» находим подходящие изображение двери и сохраняем его на компьютер.
  2. Открываем программу Inkscape и создаём в ней новый файл.
  3. Устанавливаем странице любой размер в пикселях с одинаковыми значениями по ширине и высоте (например, 260×260).
  4. Импортируем найденное изображение двери. Если картинка имеет растровый формат (png, jpg), то дополнительно выполняем её преобразование в вектор (правая кнопка мыши на изображении -> Векторизовать растр).
  5. Размещаем изображение по центру области содержимого страницы (высоту изображения устанавливаем равной 260 пикселей с сохранением пропорций изображения). В горизонтальном направлении (если ширина изображения меньше 260 пикселей) выравниваем её по центру.
  6. Сохраняем файл (например, под именем ).

Примеры, подготовленных изображений (красная стрелка, лампочка, бабочка, часы, сердце и книга) для фавикон (для скачивания — в контекстном меню картинки выбрать пункт «Сохранить картинку как…»):

Генерация иконки favicon для всех платформ

Генерацию иконки фавикон для всех платформ (iOS, Android, PC, MAC и др.) осуществим онлайн на сайте http://realfavicongenerator.net/.

Для этого необходимо нажать на кнопку «Select your Favicon picture» и выбрать в диалоговом окне подготовленное изображение (door.svg).

После этого необходимо настроить цвета фона и ввести название приложения для операционной системы Android (Chrome).

После этого выбираем опцию «I will place …», которая говорит о том, что полученные файлы фавикон необходимо положить в корень сайта. Это действие обеспечит её поддержку в большинстве браузеров.

Далее нажимаем на кнопку «Generate your Favicons and HTML code».

После этого действия сервис realfavicongenerator.net осуществит генерацию иконки favicon и HTML-кода. Результат данной операции будет выведен на экран.

Установка фавиконки на сайт

После выполнения подготовительных операций приступим к подключению favicon на сайт. Все основные действия по добавлению иконки на веб-сайт приведены на странице «Install your favicon».

Основные шаги:

  1. Скачивание сгенерированного пакета (favicons.zip).
  2. Распаковка его в корень сайта
  3. Вставка HTML-кода представленного на странице в секцию head ваших страниц:
    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
    <link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
    <link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16">
    <link rel="manifest" href="/manifest.json">
    <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
    <meta name="theme-color" content="#ffffff">

Например, на CMF MODX подключение favicon (HTML-кода) к страницам обычно осуществляется в чанке, с помощью которого выполняется формирование раздела head документа.

Дизайн фавикона — когда проще не значит хуже

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

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

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

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

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

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

Теперь, когда вы знаете, как создать красивый фавикон и добавить его на сайт, а будет ли он отображаться в поисковиках? Давайте проверим!

Что такое favicon, почему плохо, если он отсутствует?

Фавикон – небольшая тематическая картинка – придаст вашему сайту индивидуальность и выделит его в браузере среди других веб-страниц. Установить фавикон для сайта на WordPress можно несколькими способами.

Фавикон (от английского словосочетания favorite icon) – это маленькая квадратная картинка, которая визуально представляет ваш сайт и отображается в ярлыках страниц в браузере, в закладках на страницу, и в адресной строке рядом с именем сайта. Правильно подобранный фавикон соответствует логотипу сайта или тематике информации, которая на нем содержится. При взгляде на фавикон пользователь должен безошибочно определять ваш сайт среди остальных, даже не видя его названия. Наш фавикон в закладке браузера выглядит так:

В качестве формата файла для фавикона в современных браузерах используются ico, png или gif. Некоторые браузеры поддерживают загрузку иконки в формате jpg, а Opera и Firefox могут отображать анимированный gif. Картинка фавикона бывает разных габаритов, обычно применяются размеры 16×16, 32×32, 48×48, 64×64, 128×128 или 512×512 пикселей. Для сайтов, предназначенных для просмотра на мобильных устройствах, размер иконки может отличаться.

Favicon

По умолчанию, в качестве значка (иконки) любого сайта отображается значок браузера или CMS (системы управления сайтом). Чтобы выделить свой сайт в списке поисковой выдачи или в списке закладок пользователя, каждый веб-мастер обязательно создаст для него фирменный значок (иконку сайта) — favicon (сокр. от англ. FAVorites ICON). Это может быть логотип компании в миниатюре или произвольная картинка.

Традиционно значок сайта именуют favicon.

Значок сайта (favicon) может быть выполнен форматах ico, png, gif или jpg.

Многие современные браузеры не требуют явного указания на favicon.ico в коде страницы. В случае отсутствия такого указания браузер загрузит файл favicon.ico из корня сайта. Тем не менее, лучше указать положение значка в HTML коде заголовка (внутри элемента <head>).

Онлайн-генераторы фавиконок

Для создания значка сайта существует большое количество онлайн-генераторов, где фавиконку можно нарисовать вручную или сделать её из какой-либо картинки.

Рекомендации Яндекса по фавиконкам

  1. Важен правильный формат фавиконки. Если фавиконка имеет расширение ico, то и в type необходимо указывать принадлежность к ico, например, type=»image/x-icon».
  2. Само изображение должно быть размером 16 х 16, 32 × 32 или 120 × 120 пикселей и однослойным.
  3. Как и со страницами на сайте, индексирование начинается с обнаружения ссылки — ссылки на фавиконку:
    • прописывайте адрес фавиконки в коде главной страницы;
    • по возможности располагайте фавиконку в корне сайта;
    • старайтесь использовать статический адрес фавиконки;
    • кириллический адрес необходимо написать, используя Punycode;
    • если сайт доступен по нескольким адресам (например, с www и без www, по протоколам http или https), то проследите, что везде размещена одинаковая фавиконка.
  4. Фавиконку скачивает специальный робот. Проследите, что:
    • в случае наличия нескольких адресов файла фавиконки в коде страницы первым расположен адрес для поискового робота;
    • адрес фавиконки разрешён для скачивания в файле robots.txt;
    • фавиконка отдаёт код ответа сервера HTTP 200.

Рекомендации Google

  1. Значок сайта должен быть доступен и открыт для сканирования Гуглботом;
  2. Не следует часто менять адрес, по которому находится фавикон;
  3. Значок для ресурса должен быть кратным 48-ми пикселям (48х48, 96х96 и т.д.);
  4. Favicon должен быть графическим продолжением вашего бренда, что позволит пользователю быстро найти ресурс в мобильной выдаче;
  5. Характер фавикона должен быть нейтральным – дискриминационные и непристойные значки в выдаче не появятся. Google заменит их на собственные по умолчанию.

Заключение

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

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

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

Рейтинг
( Пока оценок нет )
Понравилась статья? Поделиться с друзьями:
Знай и умей
Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: