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

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

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

Кстати, Яндекс.Вебмастер предупреждает об ошибке, если у сайта нет фавиконки. Также ошибка может отобразиться в лог-файлах. Браузеры запрашивают favicon.ico, если не находят нужный файл, сервер фиксирует ошибку 404.

Лог-файл — журнал с системной информацией о работе сервера и действиях пользователей.

Видео

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

Классический фавикон имеет размер всего 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

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

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

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

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

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

Как оптимизировать favicon

Используйте кэширование – пропишите в файле .htaccess соответствующую строку:

Не забудьте про Nginx: проверьте, что тип файла ico включен в перечисление в файле конфигурации веб-сервера:

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

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

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

Положите файлы в корневую директорию сайта и проверьте корректность. Для этого введите в адресную строку “yoursite.com/favicon.ico” для файлов формата .ico, для других форматов — соответствующее расширение файла. Браузер должен отобразить иконку.

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

Десктоп (ico) — <link rel=»icon» type=»image/ico» href=»favicon.ico»>

Декстоп (png) — <link rel=»icon» type=»image/png» href=»favicon.png»>

Apple — <link rel=»apple-touch-icon» href=»apple-touch-favicon.png»>

Safari — <link rel=”mask-icon” href=”icon.svg”>

Андроид— <link rel=»shortcut icon» href=»favicon.png»>

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

Проверьте ответ сервера. Фавикон индексирует специальный робот. Чтобы индексация прошла успешно, проверьте, что ссылка на фавикон не закрыта от индексации в файле robot.txt и отдает ответ сервера HTTP 200.

Узнайте, виден ли фавикон. Проверьте через сервисы, подставив адрес своего сайта: 

  • в Яндекс —
  • в Google — .

Если у сайта нет фавиконки, то Яндекс.Вебмастер предупреждает об ошибке. Она может отображаться в журнале с системной информацией. Если же браузер не нашел в коде сайта нужный файл, например, favicon.ico, то сервер зафиксирует ошибку 404.

Когда поисковые роботы видят наличие технических недостатков, то понижают сайт в выдаче. Так фавиконы косвенно влияют на SEO-продвижение ресурса.

Создание

Для создания фавикона можно использовать практически любой графический редактор, однако формат изображения, которое вы выбрали должен быть 16×16, 32×32 или 64×64 пикселя, с использованием 8-битного или 24-битного цвета. Изображение должно иметь расширение PNG (стандарт W3C), GIF или ICO.

При создании изображения следует обращать внимание на следующие нюансы:

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

В качестве примера программы, позволяющей создавать иконки, можно привести Favicon Create (скачать) – это самая простая программка. Чтобы сделать иконку понадобится всего лишь обычная картинка в формате *.jpg, или *.bmp, которую можно сделать в любом графическом редакторе, даже в том же пейнте. Загружаем картинку в программу, затем выбираем размер, глубину цвета и нажимаем кнопку старт. Все готово.

Где скачать готовый вариант

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

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

Скачиваем картинку себе на ПК, а после устанавлива

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

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

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

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

Для разной аудитории сайта нужна поддержка основных браузеров и платформ — Windows Firefox, iOS Safari, Internet Explorer, Android Chrome и других. Для мобильных устройств часто прописывают отдельные иконки с другими размерами. Для этого указывают тип устройства в rel, к примеру, «apple-touch-icon», и атрибут sizes с размером.

Достаточный пакет

Будет достаточно одного файла favicon.ico с размерами 48×48.

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

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

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

Картинку вы можете найти в интернете или заказать на бирже фриланса чтобы ее нарисовали.

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

Фавикон и логотип на сайте

А для сайта, на котором я все показываю я подобрал вот такую тематическую картинку размером 512×512 пикселей в формате png.

Картинка с изображением мозга

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

А дальше с помощью сервиса онлайн-генератора фавиконов такие сервисы еще называют – favicon generator, преобразуем картинку в нужный формат и размер.

Создание фавикона онлайн

Переходим на сервис PR-CY по ссылке https:///favicon/ и нажимаем «Выбрать»

Генератор favicon на сервисе PR-CY

Находим на компьютере нашу картинку выбираем ее и нажимаем «Открыть»

Процесс загрузки картинки в сервис генератор favicon

После загрузки картинки жмем «Создать favicon»

Процесс создания фавиконки онлайн

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

Распаковываем архив и видим, что в папке у нас две картинки. Нам нужна будет размером 48×48 в формате «ico»

Готовый фавикон в формате ico

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

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

Вот ссылки на пару таких сервисов:

  1. Бесплатный онлайн-конвертер
  2. Online-convert

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

Фавикон выполняет следующие функции:— Брендинг.— Идентификация сайта пользователем (удобство использования).— Придает сайту профессиональный вид.

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

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

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

Доверие

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

Повторные посещения

Известно, что люди лучше реагируют на изображение, чем на текст. Давайте представим, что посетитель вашего сайта торопился, когда впервые посетил его, и решил добавить его в закладки, чтобы вернуться позже. Допустим, этот человек впоследствии решает снова посетить ваш сайт, для чего обращается к своим закладкам. Вам повезло, если у вас есть узнаваемый фавикон, такой, как заметная и уникальная буква G у Google, так пользователь найдёт вас. Если фавикона нет, вас могут даже удалить из списка закладок.

Экономит время пользователя

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

Преимущества для SEO

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

Как разместить 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" sizes = "<16> X <16>, <32> X <32>">

Фавикон: что следует запомнить

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

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

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

Готовую фавиконку можно даже использовать в рассылках. Регистрируйтесь в SendPulse и создавайте красивые письма в удобном блочном редакторе!

[Всего: 7    Средний:  4.9 /5]

Теги