Установка favicon на сайт

Краткая техинструкция по фавиконам

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


Формат фавикона

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

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

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

У фавиконов в формате SVG, GIF, JPEG проблемы именно в отсутствии такой широкой поддержки. Но пару слов в защиту SVG формата все-таки хочется сказать — иконки в SVG масштабируются без потери качества, что в будущем может стать отличным решением всех проблем с отображением фавиконов. Дело за браузерами, которые уже постепенно начали внедрять поддержку этого формата свободной векторной графики. 

Узнать, какие именно форматы фавиконов поддерживают разные браузеры, можно с помощью онлайн-сервиса . Например, вы сможете увидеть, какие браузеры поддерживают или не поддерживают фавиконки в формате PNG и SVG.

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

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

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

Не так давно некоторые веб-мастера получили от Google письмо с рекомендацией увеличить разрешение фавикона до 192×192. 

В письме речь шла о том, что более качественные фавиконы могут принести в 2 раза больше кликов по новым вкладкам в Chrome и на главной странице Android. Согласитесь,  на расплывчатый фавикон вряд ли захотят кликать — значит, низкое разрешение иконки не вариант для хорошего пользовательского опыта.

Несколько общих правил, которых стоит придерживаться:

  • Использовать квадратный значок сайта.
  • Не использовать фавикон чужой компании или неприемлемого характера (например, свастика) — иначе поисковик будет отображать картинку по умолчанию – бесцветную планетку.
  • Фавикон должен быть доступным для сканирования поисковыми роботами.

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

<link rel="icon" sizes="<ширина>X<высота>">

<link rel="icon" sizes="<ширина1>X<высота1>,<ширина2>X<высота2>">

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

Как добавить favicon для портативных устройств


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

Android

Выбор фавиконки для Android-устройства зависит от показателя PPI (pixels per inch – пикселей на дюйм); это важно учитывать, так как из-за этого одно и то же изображение может выглядеть по-разному на экранах с различным параметром PPI. Общая таблица с указанием коэффициента плотности и соответствующего ему размера фавиконки выглядит следующим образом:

Что касается формата, то изображения должны быть в формате png.

iOS

В отличие от Android, размер иконок для iOS-устройств зависит от наличия Retina и версии операционной системы. В таблице это выглядит так:

Для того, чтобы создать фавиконку для всех возможных форматов и устройств, вы можете воспользоваться специальным сервисом: https://realfavicongenerator.net/.

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

Сначала вам нужно выбрать изображение, которое составит основу вашей фавиконки. Оно необязательно должно быть квадратным, но такой формат предпочтителен. В противном случае вы сможете заполнить пустые края изображения каким-либо цветом (для iOS) либо оставить их прозрачными (для Android). Также RealFaviconGenerator создает иконки и для других платформ (Windows 8 и 10).

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

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

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

Иконка веб сайта в браузере и в поисковике

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

<link rel=»SHORTCUT ICON» href=»/favicon.ico» type=»image/x-icon»>

Название «Favicon» — это английское сокращение от слов FAVorites ICON, что в переводе обозначает «значок для избранного». Иконка веб сайта в браузере отображается в адресной строке, непосредственно перед url-адресом страницы. Так же иконку веб сайта в браузере можно увидеть во вкладках и рядом с закладками.


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

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

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

Почему favicon имеет значение

Основная цель использования фавикона – это улучшение удобства пользования сайтом. Этот файл присутствует практически во всех современных популярных браузерах и вкладках браузера. Изначально фавикон был создан для быстрого визуального поиска необходимого сайта среди тысяч закладок в Интернете. Сейчас же он является удобным символом идентификации сайта при большом количестве открытых вкладок. А в некоторых поисковых системах (например Яндекс, а с 2019 года и Google), фавикон появляется и в результатах поисковой выдачи напротив каждого сайта.

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

favicon для сайта WordPress: этапы установки

Одним из вариантов установки иконки является размещение иконки в корневом каталоге, с добавлением кода в файл functions.php. Для этого способа установки favicon на сайт нужно сделать три шага.

  • Сделать картинку favicon.ico на любом генераторе favicon;
  • Загрузить картинку favicon.ico в корневой каталог сайта;
  • Поместить код в файле functions.php.

Остановимся на каждом шаге подробнее.

Сделать картинку favicon.ico на любом генераторе favicon

В статье я подробно рассказывал, как сделать картинку favicon.ico. В этом нет ничего сложного. Делается она на любом генераторе иконок, в режиме on-line. Не требуется устанавливать на компьютер дополнительных программ. Делается картинка в формате .ico из картинки любого размера и любого формата.

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

Еще один расширенный инструмент для создания иконок это favicon.ru.На нем можно не только рисовать, но и заказать изготовление уникального favicon.


Будем считать, что свой favicon вы сделали. Будем размещать его на сайте.

Мало? Держите список сервисов для создания иконок:

•  iconfinder.com •  freepik.com/free-icons •  fian.my.id •  ru.iconka.com •  genericons.com •  materialdesignicons.com •  flaticons.net •  iconbird.com •  iconizer.net •  webhostinghub.com •  iconspedia.com •  iconsearch.ru •  icons8.com •  glyphicons.com •  findicons.com •  icomoon.io •  iconarchive.com •  themify.me •  fontawesome.io •  thenounproject.com •  flaticon.com •  fontello.com

Сделанный Favicon для сайта WordPress, при помощи FTP соединения, закачиваем в корневой каталог вашего сайта, скорее всего в папку или .

Проверьте, чтобы в этой папке не было старых иконок. Если они есть,  удалите их. Жалко удалять, переименуйте. Также проверьте папку с рабочим шаблоном. Из нее также удалите файл ico если есть.

Разместить код в файле functions.php

Остается поместить код в шаблоне сайта. Для этого авторизуемся в административной панели. В консоли открываем: Внешний вид →Редактор.

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

В любое место раздела THEME SETUP вставляем следующий код

Не забываем сохраняться.

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

На этом все! Тему Favicon для сайта WordPress закрываю. На сайте получились три статьи, где я рассказывал о трех вариантах установки уникальной иконки на свой сайт WP. Читать другие статьи:

  • ,
  • Плагины WP для установки favicon (иконок) на сайт WordPress

Заключение

Начав свой путь с самого конца XX века, фавиконка от обычного типового оформления закладок стала неким атрибутом, который должен присутствовать у каждого интернет-сайта априори. Без данного элемента, о котором кстати часто, как владельцы сайтов, так и их администраторы или специалисты по продвижению, совершенно забывают, сложно представить полную завершенность оптимизации веб-ресурса. Надеемся, что написанный материал, коснувшийся объяснения определения «favicon», самых различных способов его создания и двух вариантов установки поможет вам выделиться на фоне конкурентов, а при необходимости проверить наличие данного изображения и произвести его корректировку с целью наибольшего вовлечения интернет-пользователя с поисковых систем или рекламы.

вебмастер продвижение сайта favicon


С этим читают