Favicon

Что такое favicon

Многие пользователи интернета не знают, что такое фавикон, хотя регулярно сталкиваются с ним во время работы в сети. Слово favicon происходит от английского словосочетания favorite icon – избранная иконка или значок. Эта пиктограмма отображается во вкладках браузеров перед названием страницы (которое выводится с помощью тега title) и в качестве иконки в закладках.

Что такое favicon

Где можно увидеть favicon сайта?

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

Более подробно об иконке сайта

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

Favicon – это отображаемая в открытой вкладке браузера, левее от названия открытой странички, пиктограмма, так называемый мини-логотип. Является своеобразной визитной карточкой ресурса, независимо от движка (CMS), на котором тот создан, установленной темы и используемого шаблона. Пиктограмму можно встретить на сайтах под управлением как популярных CMS, таких, как WordPress, Bitrix, Joomla, Drupal, так и на менее распространенных. Изображение имеет размеры 16×16 пикселей и зачастую хранится в формате ico.
Инфографика Favicon

Назначение favicon

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

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

Favicon в поисковой выдаче Яндекса

Favicon в поисковой выдаче Яндекса

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

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

Все эти факторы могут повлиять на увеличение посещаемости страниц вашего сайта.

Способы создания favicon

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

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

Разберемся с каждым способом подробнее.

Галереи готовых значков

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

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

  1. www.iconj.com/favicon-gallery-page1.html – содержит более 4 тысяч изображений, позволяет скачивать готовые решения необходимого размера в форматах ico и gif. После регистрации появится возможность добавления значков в избранное. Скопировав HTML-код, можно быстро вставить его в код своего сайта.

Добавление иконок в избранное на ICON J

Добавление иконок в избранное на сайте ICON J
  1. www.favicon.cc – большая коллекция значков, которые можно найти по дереву тегов или путем перелистывания страниц. Из функционала доступны загрузка в формате ico, online-редактирование оригинальной пиктограммы, конвертирование картинки в значок и просмотр новых/популярных файлов.

favicon.cc

Сайт favicon.cc
  1. www.freefavicon.com/freefavicons/objects – крупнейший тематический каталог, где можно отыскать и загрузить иконку. Файлы рассортированы по категориям для удобства выбора и названы согласно своему содержимому.

Категории для поиска фавикон

Категории для поиска фавикон на сайте freefavicon.com

Онлайн генераторы

При помощи специализированных сервисов нужную favicon можно создать самому за несколько минут.

  1. Favicon.cc – редактор, который дарит возможность выбрать фон и пиксель за пикселем нарисовать рисунок при помощи кисти, поддерживающей прозрачность. Также на сайте можно преобразовать любой графический файл в фавикон с его последующим редактированием.

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

Создание с помощью онлайн-редактора Favicon.cc
  1. Logaster.ru предлагает поработать над визиткой, логотипом и фавиконкой сайта одновременно, дабы основные графические элементы были взаимосвязаны и выполнены в едином стиле. Выполняется все в несколько простых шагов: создаем логотип, на его основе генератор предлагает соответствующую ему иконку, после выбора которой откроется графический редактор для ее корректировки. Готовый логотип и значок загружаем после регистрации в системе или через контекстное меню.

Регистрация на Logaster.ru

Регистрация на сайте Logaster.ru
  1. www.favicon-generator.org – простой сервис, создающий favicon из выбранного изображения без возможности его редактирования или обрезки.

Сервис для создания favicon

Сервис favicon-generator.org
  1. www.michurin.net/online-tools/favicon-editor.html – узконаправленный ресурс, где после загрузки картинки в jpeg, bmp или gif формате она будет уменьшена до 16 пикселей по обеим сторонам без сохранения пропорций, а число цветов уменьшится до 16 для минимизации размера файла на выходе. Дополнительно доступна функция модификации готовых ico.

Онлайн-редактор иконок favicon.ico

Онлайн-редактор иконок favicon.ico
  1. www.favicon.by и favicon.ru поддерживают рисование собственных пиктограмм и превращение области или целого изображения в фавикон. Есть инструменты заливки и пипетка.

Рисование собственных пиктограмм

Рисование собственных пиктограмм
  1. www.favicomatic.com превратит загруженный графический файл в ico размером 16×16, загрузит его на ПК и сгенерирует HTML-код для вставки на сайт.

Фавикон генератор Favic-o-matic

Фавикон генератор Favic-o-matic
  1. www.antifavicon.com – генератор простых favicon с текстовыми надписями, в котором пользователь задает текст, выбирает цвет фона, букв и границы, и получает готовую иконку.

Генератор favicon с текстовыми надписями

Генератор favicon с текстовыми надписями

Графические программы

При помощи IconFX, Axialis IconWorkshop и подобных графических редакторов можно легко создать иконку для любого портала, но лишь при условии владения пользователем базовыми навыками работы с подобными приложениями. Если вы работаете в Photoshop, загрузите для него расширение под названием ICOFormat, тем самым добавив поддержку импорта иконок в формате ico.

Расширение ICOFormat

Расширение ICOFormat

Через IconFX и альтернативы, можно как нарисовать, так и конвертировать картинку или ее часть в иконку, отредактировав ее, выбрав цвет и размер.

Создание нового рисунка в IconFX

Создание нового рисунка в IconFX

Добавление на сайт

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

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

Ответы на популярные вопросы

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

Делаем иконку из картинки или фото

Множество графических редакторов, специализирующихся на работе со значками, позволяют конвертировать png, bmp, jpeg и прочие форматы в ico с возможностью обрезки исходного файла и редактирования результата. На примере IcoFX это делается следующим образом:

  1. Открываем редактор и перетаскиваем в его окно графический файл.
  2. Выбираем вариант создания иконки из изображения.

Создания иконки из изображения

Создания иконки из изображения
  1. После редактирования сохраняем полученный ico-файл и загружаем его на сайт.

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

Делаем прозрачный фавикон

Известно, что среди распространенных графических форматов прозрачность поддерживается файлами с расширением png. В качестве исходника берем файл png и конвертируем его в фавикон с помощью Photoshop (установив перед этим плагин ICOFormat), иного графического редактора или онлайн-сервиса, поддерживающих прозрачный слой, например, Favicon.cc.

Как получить анимированную иконку

Создать анимированный favicon поможет специализированный сервис:

  1. Переходим по ссылке favicon.htmlkit.com/favicon/.
  2. Жмем «Обзор» и указываем путь к первому слайду (кадру) анимации.

Создание анимированного favicon

Создание анимированного favicon
  1. Кликаем по кнопке «Add another image», дабы добавить второй кадр и указываем желаемую картинку, и так со всем кадрами.
  2. По окончании добавления слайдов щелкаем «Download FavIcon Package».

Скачивание FavIcon Package

Скачивание FavIcon Package

Как скачать favicon?

Пиктограммы, как правило, лежат в открытом доступе. Простейший способ копирования фавиконки с чужого сайта заключается в переходе по адресу: www.google.com/s2/favicons?domain=1 или favicon.yandex.net/favicon/1, где единицу в обоих случаях заменяем на URL площадки.

Копирование фавиконки с другого сайта

Копирование фавиконки с другого сайта

Также помогает дописывание /favicon.ico в конце корня сайта, к примеру, www.youtube.com/favicon.ico.

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

Дописывание /favicon.ico в конце корня сайта

Допишите /favicon.ico в конце названия сайта

Что делать если не отображается фавикон в Яндексе

Если в поисковике не визуализируется недавно добавленная пиктограмма, скорее всего проблема кроется в следующем:

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

Заключение

Добавление favicon способно не только сделать сайт красивее, но и повысить количество его посетителей. А как это сделать, вы уже знаете!


Буду признателен за каждый лайк:


Оставьте комментарий, Ваше мнение очень важно для меня!

Введенный e-mail не будет виден другим пользователям :

Back to Top