Смарт ТВ 

Что такое фавикон и зачем он нужен. Фавикон — что это такое и как его сделать. Как происходит процесс создания иконки в Логастер

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

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


Основные плюсы

    Улучшает вид сайта в поисковой выдаче

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

    Узнаваемость сайта

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

Как создать и установить фавикон для сайта?

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

Данная строчка ‹link rel="icon" type="image/png" href="/шаблон/favicon.ico" /› вставляется в код сайта после тега ‹head› и указывает браузеру и поисковикам, откуда брать иконку.

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

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


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

Почему у моего сайта не отображается иконка в поиске?

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

Вывод

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

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

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

Что такое фавикон

Favicon (сокр. от англ. FAVorites ICON - «значок для избранного») - значок сайта или страницы. Отображается браузером в адресной строке перед , а также в качестве картинки рядом с закладкой, в табах и в других элементах интерфейса. Лучше всего смотрится изображение, которое можно вписать в квадрат. Стандартные размеры - 16x16, 32x32, для некоторых браузеров и ОС нужны размеры 60x60, 120x120, 192x192.

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

В России фавиконы в выдаче поддерживает Яндекс:


Сайты с фавиконами в выдаче Яндекса

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

Выдача Google в Великобритании

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


Сайты с фавиконами на вкладках и на панели закладок

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

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

Разберем, для чего нужен файл favicon.ico и можно ли без него обойтись.

  • Выделяет сайт в выдаче

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


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

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


Логотип компании в фавиконе
  • Упрощает поиск нужного сайта

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


Закладки в Google Chrome
  • Избавляет от ошибки в лог-файлах

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

К примеру, такую:

Failed to load resource: net::ERR_EMPTY_RESPONSE (20:00:55:963 | error, network) at http://localhost:8383/favicon.ico

Фавикон из картинки: какую выбрать

  • Тематическую

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


Фавикон с чашкой для сайта о кофе выглядит гармоничнее
  • Контрастную

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

  • Упрощенную

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

  • Оригинальную

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

Как создать favicon для сайта

Есть три самых распространенных способа:

  1. Специальный плагин для Photoshop
    Позволяет работать этому популярному редактору изображений с форматом ico.
  2. Специальные программы для изготовления фавиконов
    Они специально «заточены» для изготовления иконок для сайта.
  3. Онлайн генератор favicon
    Самый простой и доступный способ - загрузить картинку в генератор, который сделает иконку для сайта из любого изображения. Иконка получится красивее, если изображение-донор кадрировать до квадрата.

RealFaviconGenerator сделает фавиконы для разных платформ и браузеров. Если вам достаточно одного значка, отконвертирует изображение в файл ICO 16х16.


Панель бесплатного генератора фавикона

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

... ...

Атрибут "rel" указывает на тип ресурса. Большинство браузеров распознают "icon", для Internet Explorer нужен "shortcut icon".

От формата файла зависит тип передаваемых данных. Для ICO это "image/x-icon" или "image/vnd.microsoft.icon", для PNG - "image/png" и аналогично для других форматов.

Для мобильных устройств часто прописывают отдельные фавиконы, указывая, к примеру, rel="apple-touch-icon".

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

Фавиконка не появится сразу после установки кода, нужно дождаться, пока поисковик ее проиндексирует.

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

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

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

Популярные десктопные браузеры

Стандартно для фавикона делают файл favicon.ico , он поддерживается всеми браузерами, но можно выбрать и другой формат. Обычно рекомендуют установить несколько размеров фавикона для разных случаев: 16x16, 32x32 и 48x48.

Пример кода:

Фавикон в HTML5

В HTML5 с помощью расширенного описания можно указать размеры и формат иконки. Для файла ICO, в котором несколько фавиконов, можно указать размеры в атрибуте sizes через пробел. Для фавикона в векторе укажите размер "any".

Пример кода:

Android

Указать фавикон и его расположение для Android можно через спецификацию The Web App Manifest . В ней описан простой JSON-файл, в котором веб-мастера указывают иконки, размеры и форматы для сайта или приложения. Его поддерживают Chrome, Opera, Samsung Internet и Firefox.

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

Пример кода:

{ "name": "My App", "icons": [{ "src": "64.png", "sizes": "64x64" }, { "src": "192.png", "sizes": "192x192" }], "display": "fullscreen", "orientation": "landscape", "theme_color": "tomato", "background_color": "cornflowerblue" }

Apple

Для iOS рекомендуют делать иконку PNG размером 180x180. В документации Safari такие называются Web Clips , в них не должно быть прозрачности, углы автоматически округлятся при добавлении на главный экран. Это значок высокого расширения, он будет отображаться и в других браузерах.

Пример кода:

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

Настраивают с помощью.

Пример кода:

Edge и IE 12

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

Пример кода:

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

Пример кода:

#da532c

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

Честно, я очень люблю фавикон. Я питаю к нему сколь глубокую, столь же и целомудренную платоническую любовь. Это не значит, что я рассказываю знакомым вебмастерам байки о том, как я сменил фавикон и трафик вырос на 10% (хотя постойте… может такое и было), но значит, что когда фавикон моего нового сайта появляется в индексе Яндекса, то сам сайт начинает казаться мне чуть более СДЛьным.

Что такое фавикон?

Фавикон (Favicon – сокращение от «favorite icon») — это изображение, которое отображается в адресной строке браузера перед адресом, во вкладке, соответствующей окну с открытой страницей сайта, а также при добавлении ресурса во вкладки с избранным. Эти изображения могут помочь пользователю лучше запомнить бренд или компанию, повысят узнаваемость сайта. Часто в качестве фавикона используют уменьшенное или немного переделанное в соответствии с форматом изображение логотипа компании или бренда.

Преимущества использования фавикона

Использование favicon приносит пользу со временем. Вот например зацените такие варианты:

  • Когда пользователь открывает много вкладок в браузере, он может сразу определить, на какой из них находится сайт, даже если текст с названием уже не отображается;
  • В выдаче Яндекса фавикон отображается слева от сайта или его страницы, что привлекает внимание посетителей и отличает его от других;
  • Картинка хорошо запоминается и остается в памяти – в результате сайт становится более узнаваемым и привлекательным для пользователей.

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

Особенности работы Яндекса с фавиконками

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

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

Чтобы проверить, отображает ли Яндекс favicon, можно найти свой портал в списке выдачи и посмотреть, видна ли иконка слева от него. Также можно вписать в адресную строку следующую конструкцию: для Яндекса - http://favicon.yandex.net/favicon/www.site.ru (где вместо www.site.ru нужно напечатать домен своего сайта). Правильно созданный Фавикон отобразится на черном фоне, и это значит, что Яндекс его видит.

Если фавикон не виден, это может быть связано со следующими причинами:

  • Размер изображения не соответствует требуемому: 16х16 пикселей;
  • Формат изображения не тот – должен быть ico, jpeg или png (первый вариант – более предпочтительный для Яндекса);
  • Картинка размытая или не уникальная – иногда по этим причинам поисковик блокирует иконки;
  • У Яндекса происходит обновление системы – тогда спустя какое-то время все должно исправиться само;
  • Сайт находится далее сотой позиции в выдаче – в этом случае фавикон тоже может не отображаться.

Проверив картинку по этим критериям, нужно исправить недостатки. Если и после этого не отображается иконка, можно обратиться в поддержку Яндекса.

Чтобы фавикон отображался в Яндекс.Директе, он должен быть правильно оформлен и находиться в нужном месте на сайте. Тогда поисковой робот Яндекса проиндексирует его и начнет показывать в выдаче. Происходит это обычно через 2-4 недели после публикации сайта с изменениями. Уведомлять или просить Яндекс о публикации фавиконки не нужно, это произойдет автоматически по прошествии определенного времени после ее появления на портале.

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

Если вы хотите создать из большого изображения в формате, например, png, ico-файл, то вам не помешало бы поставить Adobe Photoshop для начала. Затем устанавливается плагин ICO для Фотошопа (поищите в поисковике плагин для вашей версии ФШ). Когда он установлен, мы копируем нужный файл ICOFormat.8bi (для 32-бит) или ICOFormat64.8bi (для 64-бит) по одному из следующих путей:

C:\Program Files\Adobe\Adobe Photoshop CS6 (64 Bit)\Plug-ins\File Formats
C:\Program Files (x86)\Adobe\Adobe Photoshop CS6\Plug-ins\File Formats

Если папки «Plug-ins» или «File Formats» нет, то ее необходимо создать. Теперь при диалоге сохранения можно выбрать ico формат. Размеры создаваемых значков могут быть кратны 8 (16×16, 24×24, 32×32 и так далее, но надежнее всего выбрать именно 16×16).

Затем изображение, которое должно стать фавиконом, открывается в Фотошопе. Жмется “Image – Image Size” и размер изображения меняется на 16х16 пикселей. Затем жмется “File – Save as” и выбирается формат ICO (название файла нужно сделать favicon.ico).

Сам я в последнее время перевожу изображения в ico формат без фотошопа. С помощью сервиса https://realfavicongenerator.net/ .

< link rel = ”shortcut icon ”href = ”/ favicon . ico ”type = ”image / x - icon ”/ >

< link rel = ”icon ”href = ”/ favicon . ico ”type = ”image / x - icon ”/ >

Через некоторое время фавикон появится на сайте.

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

Яндекс пугает фавиконных очкошников

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

Сервисы

Для создания иконок также существуют специальные программы и ресурсы, среди которых популярностью пользуются:

  • favicon.cc – простейший редактор позволит создать несложное изображение, принцип работы немного напоминает Paint. Также выбираются цвета, и выполняется рисунок нажатием на пиксельные квадраты, которые нужно закрасить. Есть инструмент для исправления. Созданную картинку здесь же можно сохранить на компьютер в качестве готового изображения favicon. В процессе работы внизу экрана можно наблюдать предварительный результат в том виде, в каком он будет отображаться в браузере. Ресурс также предлагает большой выбор готовых иконок;
  • favicon.ru – здесь лучше создавать фавиконы из уже готовых изображений. Картинка загружается с компьютера, обрабатывается системой и преобразуется в файл favicon.ico, который затем можно скачать;
  • iconj и audit4web – базы, в которых можно найти готовые фавиконы.

Есть и такой сервис:

Можно обратиться за разработкой изображения и к дизайнеру, но это обойдется существенно дороже.

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

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

Что такое фавикон?

Favicon (от английского favorite icon - избранный значок) - это маленькая картинка, которая ассоциируется с определенным вебсайтом или страницей.

Она располагается в верхней вкладке браузера напротив названия сайта, который вы открыли. А также эта картинка отображается в закладках, если вы добавили сайт в избранное.

Зачем его нужно использовать?

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

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

Фавикон должен экономить время вашего посетителя. Вы спросите: каким же образом он может экономить время?

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

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



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

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

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



Таким образом, время моего поиска заметно сокращается.

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

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

Где мне его взять?

Фавикон обычно - это картинка рзмером 16х16 пикселей с расширением .ico или .png

Вы можете сами нарисовать его и потом просто перевести в нужный формат с помощью специальных сервисов или использовать фотошоп.

Либо вы можете найти подходящую картинку на одном из сайтов с бесплатными иконками.

Здесь нужно учитывать пару моментов: чтобы ваш фавикон не был слишком пестрым и чтобы картинка смотрелась целостно (не состояла из каких-то отдельных частей, лучше, чтобы это был один объект) чтобы даже в таком маленьком размере было понятно, что там нарисовано.

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

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

Это уже в зависимости от того, какой формат вы используете.

Мы выпустили новую книгу «Контент-маркетинг в социальных сетях: Как засесть в голову подписчиков и влюбить их в свой бренд».

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


Больше видео на нашем канале - изучайте интернет-маркетинг с SEMANTICA

Что такое фавикон и зачем он нужен

Примерами фавиконов для веб-ресурсов могут служить логотипы автомобильных брендов, размещаемые на капоте авто: у Шевроле – галстук-бабочка, у Шкоды – индеец со стрелой, у Ауди – четыре кольца, у Фольца – сплетение букв V и W и т.д.

Favicon отображается в поисковой выдаче Яндекса, на странице закладок и привязывается к веб-ресурсу при выборе, если пользователь добавляет веб-страницу в «Избранное».

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

Как сделать Favicon

Фавикон – обычный графический файл. Сделать его можно несколькими способами.

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

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

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

Для IE указываем shortcut icon (с конкретным примером для иконки PNG):

При этом можно указать 2 разных изображения: одно для IE, другое - для остальных веб-браузеров.

Не забывайте про отображение фавикона для мобильных устройств. В следует указать , при этом изображение должно иметь размер 60х60 или 120х120.

Яндекс отображает иконку веб-ресурса после того, как она попадет в его индекс. Специальный робот обходит сайты примерно 1 раз в месяц и обновляет свою базу.

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

Правильный Favicon – какой он

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

  • Иконка должна легко восприниматься. Не стоит рисовать на ней полную картину: достаточно 1-2 схематичных изображения.
  • Она должна быть заметной, привлекающей внимание. Картинка не должна теряться на белом фоне поисковой выдачи и должна бросаться в глаза.
  • Фавиконка должна быть запоминающейся, поэтому используйте простые образы, но не похожие на другие. Иначе вас могут спутать. Многие запомнив вашу иконку, увидев ее снова в выдаче захотят перейти к вам, как к старому знакомому, который однажды уже помог.К примеру, социальная сеть Одноклассники имеет favicon с оранжевыми буквами ОК. Цвет указывает на стилевое решение веб-ресурса, а буквы расшифровываются как две аббревиатуры: сокращенное название веб-ресурса и принятое во всем мире «Окей».