×
А Б В Г Д Е Ё Ж З И Й К Л М Н О П Р С Т У Ф Х Ц Ч Ш Щ Ъ Ы Ь Э Ю Я
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z 0-9
Ф

Фавикон

Фавикон – значок сайта, отображающийся в браузерных вкладках и избранном, а также результатах поиска. Слово «Favicon» (Favorites Icon) буквально означает «значок для избранного».

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

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

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

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

Поддерживаемые форматы

Самые популярные форматы для создания фавиконок:

  • ICO – самый распространенный формат, позволяет создавать фавиконки в разных разрешениях.
  • PNG – этот формат позволяет создавать даже маленькие файлы. Недостаток – этот формат не поддерживается браузером Internet Explorer.
  • Единственный плюс формата GIF – это возможность отображения в старых браузерах.
  • Фавиконкам формата JPG часто не хватает четкости по сравнению с форматом PNG,
  • Формат SVG не поддерживается большинством браузеров, но подходит, к примеру, для Safari MacOS и Opera.
  • Фавиконки в формате APNG (анимированный PNG) могут раздражать и отвлекать пользователей.

Совместимость форматов SVG и PNG с разными браузерами можно посмотреть на сайте https://caniuse.com.

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

Рекомендуемые размеры

Размер фавиконок стоит выбирать в зависимости от места их отображения:

  • Для десктопных браузеров подходят форматы 16х16, 32х32, 48х48,
  • Для браузеров на Android предпочтительно использовать размеры 36х36, 48х48,72х72, 96х96 и 144х144.
  • Для iOS браузеров стоит использовать разрешения от 57х57 до 76х76 для не ретины версии и от 120х120 до 152х152 для ретины. Для iPhone 6 Plus версия 8 и выше – 180х180 пикселей.

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

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

Что учесть при создании фавиконки

  • Изображение на фавиконке должно быть простым и понятным, а также ассоциироваться с сайтом.
  • Не стоит использовать стандартные значки CMS, так как сайт может затеряться на фоне других с такими же фавиконками.
  • Анимированные фавиконки привлекают внимание пользователей, но в то же время отвлекают и раздражают их. Лучше остановиться на статичной картинке.
  • Можно сделать кроссплатформенные значки для разных браузеров, чтобы избежать некорректного ресайза одного и то же файла.

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

  • Файл с названием favicon.ico (разрешение файла может быть любым) нужно загрузить в корневую директорию сайта через веб-интерфейс или FTP-менеджер.
  • Прописать адрес в коде на главной странице в теге head. Например, link rel="icon" sizes="192x192" href="/images/icons/icon-192.png"

Проверить, виден ли фавикон, можно через специальные сервисы, подставив адрес своего сайта вместо «mysite»:

http://favicon.yandex.net/favicon/mysite.ru;

http://www.google.com/s2/favicons?domain=mysite.ru.




Похожие темы: нет

Синонимы: нет
Все термины на букву «Ф»
Все термины в глоссарии

Отправьте отзыв!