Favicon это: что это такое и как его сделать | Дропшиппинг

Содержание

Используйте фавиконки правильно / Хабр

Фавиконка (favicon) — это иконка, которая отображается во вкладке браузера перед названием страницы. Также эта иконка отображается в закладках и на рабочем столе для веб-приложений.

Фавиконка при установке веб-приложенияФавиконка на вкладке в браузере

Подключение

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

Почему именно набор, а не одну иконку? Дело в том, что браузеры и экраны развиваются и не стоят на месте. Чем современнее браузер, тем более современный формат он может поддерживать. Например, вы можете подумать, что можно подключить только одну SVG-иконку и браузер уже сам правильно отрисует её, но не все браузеры до сих пор поддерживают SVG-формат для фавиконок. На таблицу совместимости SVG-фавиконок можно посмотреть тут.

Эта статья — фрагмент из учебника по вёрстке с курса «HTML и CSS. Профессиональная разработка сайтов».

Обязательная фавиконка

Все — старые и новые — веб-серверы и браузеры поддерживают .ico-формат.

Для подключения нужно добавить в <head>:

<head>
  <link rel="icon" href="favicon.ico"><!-- 32×32 -->
</head>

Обратите внимание на две детали: размер и расположение.

Размер. В интернете можно найти информацию, что нужно подключать фавиконку в формате .ico в размере 16×16. Это так и не так. Дело в том, что контейнер ico динамический и он может изменять размеры «на лету». Поэтому браузеры, которые понимают размер 16×16, сами сожмут 32×32 до необходимого. В каком случае нужно создавать favicon.ico в размере 16×16? Когда фавиконка размером 32×32 при сжатии начнёт мылиться (будет нечёткой). Это можно проверить вручную, сжав фавиконку с 32×32 до 16×16. Если размыливание картинки произошло, то без дизайнера не обойтись и придётся отрисовывать фавиконку вручную в графическом редакторе.

Расположение. Фавиконку в формате ico обязательно нужно класть в корень проекта, как это показано в примере выше. Дело в том, что любой веб-сервер незаметно для вас всегда ищет favicon.ico в корне проекта и пытается её подключить к сайту.

Дополнительные необходимые фавиконки

Расположение. Только favicon.ico должна лежать в корне проекта. Остальные иконки могут лежать в любом месте в проекте, например:

project/
  favicon.ico
  img/
    180.png
    192.png
    512.png
    icon.svg

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

project/
  favicon.ico
  img/
    favicons/
      180.png
      192.png
      512.png
    icon.svg

SVG

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

Подключение точно такое же, как и для favicon. ico, только нужно добавить тип, чтобы браузер понимал, с чем имеет дело:

<head>
  <link rel="icon" href="images/favicons/icon.svg" type="image/svg+xml">
</head>

Для устройств Apple

Apple пошли по другому сценарию развития и предложили собственные размеры фавиконок для своих устройств — iPhone и iPad. Формат для подключения favicon для Apple поддерживают все современные браузеры.

Самым востребованным размером для старых устройств фавиконок стал размер 180×180. Давайте посмотрим пример подключения:

<head>
  <link rel="apple-touch-icon" href="images/favicons/apple.png"><!-- 180×180 -->
</head>

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

Устройства Apple работают и с большими размерами иконок, но так получилось, что устройства, которые понимают большие размеры, можно подключать более современным способом с помощью манифеста. Манифест позволит скрыть подключение всех размеров из <head>, что сделает разметку более читаемой.

Манифест

Манифест — это JSON-файл со всеми подробностями веб-приложения для браузера. Формат был разработан Google по инициативе PWA.

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

Файл. Создадим файл в корне проекта и назовём его manifest.webmanifest. Расширение .webmanifest нужно указать, чтобы браузер понимал, с каким файлом имеет дело. Само название файла может быть любым (в нашем случае — manifest).

Так как манифест — это JSON-файл, то он должен начинаться с открывающей скобки { и заканчиваться закрывающей скобкой}.

manifest.webmanifest
{
}

Внутри скобок нужно создать секцию иконок. Секция с иконками ожидает несколько иконок, поэтому добавим массив []:

manifest.webmanifest
{
  "icons": []
}

Осталось добавить фавиконки по шаблону:

manifest. webmanifest
{
  "icons": [
    { "src": "", "type": "", "sizes": "" }
  ]
}

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

manifest.webmanifest
{
  "icons": [
    { "src": "", "type": "", "sizes": "" },
    { "src": "", "type": "", "sizes": "" },
    { "src": "", "type": "", "sizes": "" }
  ]
}

Размеры. В манифесте мы укажем размер 192×192 и 512×512. 192 — так как это следующий размер после 180, а 512 — так как это очень большой размер для фавиконки, его будет достаточно. А что с промежуточными разрешениями? Всё хорошо: как и раньше, браузер сожмёт картинку к нужному размеру. Например, из 512 до 256.

manifest.webmanifest
{
  "icons": [
    { "src": "images/favicons/192.png", "type": "image/png", "sizes": "192x192" },
    { "src": "images/favicons/512.png", "type": "image/png", "sizes": "512x512" }
  ]
}

Настройки:

Можно добавить дополнительные размеры иконок, если этого требует браузерная поддержка вашего проекта. Например, вам потребовалась иконка 256×256. Давайте добавим её:

manifest.webmanifest
{
  "icons": [
    { "src": "images/favicons/192.png", "type": "image/png", "sizes": "192x192" },
    { "src": "images/favicons/256.png", "type": "image/png", "sizes": "256x256" },
    { "src": "images/favicons/512.png", "type": "image/png", "sizes": "512x512" }
  ]
}

Откуда брать фавиконки и как их приготовить

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

Если дизайнер не предоставил фавиконки, у верстальщика есть два пути:

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

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

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

Для генерации фавиконок используйте сервис favicon-generator: экспортируйте изображение фавиконки в формате PNG, добавьте это изображение в сервис генерации фавиконок, нажмите кнопку «Create favicon», а потом — ссылку «Download the generated favicon». Вы скачаете архив со всеми возможными вариантами фавиконок. Возьмите favicon.ico и другие необходимые версии, подключите к странице проекта.

Итог

Итоговый способ подключения фавиконки:

<link rel="icon" href="favicon.ico"> <!-- 32×32 -->
<link rel="icon" href="images/favicons/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="images/favicons/apple. png">  <!-- 180×180 -->
<link rel="manifest" href="manifest.webmanifest">

manifest.webmanifest

{
  "icons": [
    { "src": "images/favicons/192.png", "type": "image/png", "sizes": "192x192" },
    { "src": "images/favicons/512.png", "type": "image/png", "sizes": "512x512" }
  ]
}

Таким способом мы будем поддерживать самые старые браузеры и самые новые.

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

Фавиконки — часть программы курса «HTML и CSS. Профессиональная вёрстка сайтов». Кроме этого в комплекте два месяца теории и практики, интересные проекты и личный наставник. А по промокоду SKUCHNO — скидка 1000 ₽.

зачем нужен и как сделать

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

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

В статье рассказывается:

Понятие и задачи фавикона
Требования к фавикону у «Яндекса» и Google
Выбор картинки для фавикона
Размер и формат фавикона
Добавление фавикона на сайт
Добавление фавикона для мобильных устройств
Проверка фавикон на ошибки
Сервисы для создания фавикона
3 примера необычных фавиконов
Пройди тест и узнай, какая сфера тебе подходит:
айти, дизайн или маркетинг.
Бесплатно от Geekbrains

Понятие и задачи фавикона

Термин «фавикон» (англ. favicon) был образован путем сложения двух слов: favorite (избранный) и icon (значок). Фавикон для сайта должен четко обозначать конкретный ресурс.

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

Улучшение позиции сайта в результатах поиска. Фавикон позволяет привлекать больше внимания к описанию сайта, соответственно, пользователи начинают чаще проходить по ссылкам. Использование фавикона способно дать владельцу сайта значительные преимущества. Так, можно подобрать изображение, побуждающее пользователя к совершению определенных действий, например, телефонного звонка.
Повышение узнаваемости. Для современного человека весьма характерно запоминать изображения, тогда как текстовая информация сохраняется в памяти намного хуже. Популярность торгового знака во многом зависит от наличия фавикона. Когда пользователь ищет информацию, он зачастую жмет на ссылку с пиктограммой, даже если она находится внизу поисковой выдачи. Эффективным способом продвижения товара является использование логотипа компании в качестве фавикона. Таким образом, интерес к бренду растет одновременно как на офлайн-рынке, так и в Сети.

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

Понятие и задачи фавикона

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

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

Требования к фавикону у «Яндекса» и Google

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

Обе поисковые системы предъявляют различные требования к фавиконам. Их запомнить несложно.

Требования Google

В настоящее время данный сервис все больше избегает привычных иконок размером 16 на 16 – они индексируются, но могут выглядеть неправильно. Эту особенность рекомендуется учитывать при создании иконок. Другие требования вполне стандартны:

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

Индексация картинок «Гуглом» занимает относительно много времени, также он медленно реагирует на обновление иконки.

Требования «Яндекс»

Здесь требований еще меньше. Вдобавок ко всему «Яндекс» дает возможность при отсутствии иконки подобрать ее, основываясь на собственных алгоритмах. Впрочем, соглашаться не стоит, так как заниматься этим будет машина.

Требования «Яндекс»

Кроме обычного поиска, фавиконы показываются в ленте новостей.

Выбор картинки для фавикона

Фавикон можно увидеть в браузере рядом с адресом сайта и в поисковой выдаче «Яндекса». У «Гугла» внедряется отображение картинки рядом с названием сайта на компьютере, и еще неизвестно, станет ли эта практика постоянной. Таким образом, появляется дополнительная мотивация к тому, чтобы создать фавикон.

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

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

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

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

Выбор картинки для фавикона

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

Когда вы создаете фавикон, сначала выберите подходящий размер и формат изображения.

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

Для измерения размеров фавикона используются пиксели. Наибольшее распространение получили фавиконы с параметрами 16 x 16 пикселей в формате .ico – они отображаются правильно почти во всех браузерах.

Однако для конкретного браузера или устройства оптимальный размер иконки может отличаться. Так, для Google предпочтительными являются картинки со стороной, кратной 48 px (например, 48×48, 96×96) – их можно увеличивать в размерах без потери качества. Для формата .svg нет строго определенных размеров. Здесь подойдет любое квадратное изображение.

Ряд мобильных устройств (в частности, Apple с версией iOS выше 1.1.3) поддерживают фавиконы большого размера, которые могут применяться в качестве значков веб-приложений. Стандартный размер иконок для iPhone – 60 x 60 px, для iPhone с ретина-дисплеем – 120 x 120 px. Для аналогичных устройств iPad наиболее подходят размеры 76 x 76 и 152 x 152 px соответственно. Для ОС Android с браузером Chrome рекомендуется делать фавиконы с разрешением 192 x 192 пикселя в формате .png.

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

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

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

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

Затем вместо .ico получили распространение форматы .png и .svg. Они занимают мало места и отображаются без ошибок. В настоящее время стандартом для большинства устройств является формат .png, тогда как .svg применяется в Safari MacOS.

Также встречаются фавиконы с расширениями .jpeg и .gif. Такой вариант возможен, но не рекомендуется, так как не все браузеры умеют распознавать эти форматы. Анимированные изображения поддерживаются в Firefox и Opera, однако злоупотреблять ими не стоит, поскольку они не дают посетителю сайта сконцентрироваться на изучении его содержимого и не вписываются органично в общий вид окна браузера.

Топ-30 самых востребованных и высокооплачиваемых профессий 2023

Поможет разобраться в актуальной ситуации на рынке труда

Подборка 50+ ресурсов об IT-сфере

Только лучшие телеграм-каналы, каналы Youtube, подкасты, форумы и многое другое для того, чтобы узнавать новое про IT

ТОП 50+ сервисов и приложений от Geekbrains

Безопасные и надежные программы для работы в наши дни

pdf 3,7mb

doc 1,7mb

Уже скачали 20079

В таблице ниже указано, какие форматы фавикона поддерживаются в популярных браузерах:

Основные браузеры и поддержка различных форматов фавикона в разных версиях
Браузер	ICO	PNG	JPEG	SVG	GIF	APNG	GIF-анимация
Google Chrome	Да	От 4. 0	От 4.0	Нет	От 4.0	Нет	Нет
Opera	От 7.0	От 7.0	От 7.0	Нет	От 7.0	От 9.5	От 7.0
Firefox	От 1.0	От 1.0	Да	Да	От 1.0	От 3.0	Да
Internet Explorer	От 5.0	От 11.0	Да	Нет	От 11.0	Нет	Нет
Safari MacOS	Да	От 4.0	От 4.0	Да	От 4.0	Нет	Нет

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

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

Точный инструмент «Колесо компетенций»

Для детального самоанализа по выбору IT-профессии

Список грубых ошибок в IT, из-за которых сразу увольняют

Об этом мало кто рассказывает, но это должен знать каждый

Мини-тест из 11 вопросов от нашего личного психолога

Вы сразу поймете, что в данный момент тормозит ваш успех

Регистрируйтесь на бесплатный интенсив, чтобы за 3 часа начать разбираться в IT лучше 90% новичков.

Только до 23 марта

Осталось 17 мест

Виды и размеры фавиконов разных форматов, подходящие для конкретных браузеров и ОС, приведены в следующей таблице.

Классические десктопные браузеры
16×16, 32×32, 48×48	PNG	Прозрачный
Браузер Safari
Вектор	SVG	Прозрачный
Мобильный браузер Opera
228×228	PNG	Сплошная заливка
Windows 8.0
144×144	PNG	Прозрачный
Windows 8.1
128×128, 270 x 270, 558×558	PNG	Прозрачный
Apple iOS
180×180	PNG	Сплошная заливка
Google Android и Chrome
192×192, 512×512	PNG	Сплошная заливка

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

Если вы все равно не уверены, какой вариант вам подойдет, то берите фавикон со стороной 16 px или 32 px в формате .ico или .png. Однако чтобы сделать сайт наиболее удобным для пользователя, следует все же принять во внимание рекомендуемые размеры.

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

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

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

Для добавления иконки проще всего внести изменения непосредственно в код сайта. Этот вариант сработает в любом случае.

Как добавить фавикон на сайт через код

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

Затем в HTML-коде внутри тега head следует указать ссылку на иконку.

<head>

</head>

Атрибуты:

rel:

icon — учитывается большинством браузеров,

shortcut icon — учитывается браузером Internet Explorer.

type:

image/svg+xml — для формата SVG,

image/x-icon или image/vnd.microsoft.icon — для формата ICO,

image/gif — для формата GIF,

image/jpeg — для формата JPEG,

image/png — для формата PNG,

image/bmp — для формата BMP.

Стоит отметить, что, если для сайта используется несколько доменных имен, желательно прописывать не полный путь к файлу, а относительный (то есть просто /favicon.ico).

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

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

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

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

зайдите в админ-панель WordPress;
откройте вкладку «Плагин», нажмите «Добавить новый»;
найдите и установите плагин RealFaviconGenerator, затем активируйте его;
откройте «Внешний вид», затем «Фавикон»;
загрузите изображение и нажмите «Генерировать фавикон», после чего вы попадете на сайт RealFaviconGenerator;
оказавшись на сайте, нажмите кнопку для создания фавикона;
снова откроется ваш сайт, и вам придет уведомление, что настройка прошла успешно.

Также загрузить фавикон достаточно легко стандартными средствами WordPress:

в админ-панели выберите «Внешний вид» – «Настроить»;
откройте «Общие настройки» – «Свойства сайта»;
зайдите в раздел «Иконка сайта», нажмите кнопку выбора;
загрузите файл изображения.

Далее нажмите «Опубликовать», и правки будут сохранены.

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

Фавикон принято сохранять в файле favicon.ico, который может содержать одновременно несколько изображений. Здесь вполне хватает иконок с разрешениями 16×16, 32×32 и 48×48.

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

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

Android

Для этой системы стандартными являются формат .png и размеры 180 x 180, иконка может быть прозрачной. Для указания параметров фавикона применяется спецификация Web App Manifest. Она представляет собой обычный файл с расширением .json, в котором прописываются путь к иконкам, их размеры и свойства.

Вначале указывается манифест:

Пример кода:

{

«name»: «%title%»,

«icons»: [

{

«src»: «\/android-chrome-36×36.png»,

«sizes»: «36×36»,

«type»: «image\/png»,

«density»: «0.75»

{

«src»: «\/android-chrome-48×48.png»,

«sizes»: «48×48»,

«type»: «image\/png»,

«density»: «1.0»

{

«src»: «\/android-chrome-72×72.png»,

«sizes»: «72×72»,

«type»: «image\/png»,

«density»: «1.5»

{

«src»: «\/android-chrome-96×96.png»,

«sizes»: «96×96»,

«type»: «image\/png»,

«density»: «2.0»

{

«src»: «\/android-chrome-144×144.png»,

«sizes»: «144×144»,

«type»: «image\/png»,

«density»: «3.0»

{

«src»: «\/android-chrome-192×192.png»,

«sizes»: «192×192»,

«type»: «image\/png»,

«density»: «4.0»

}

]

}

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

Apple

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

Apple

В rel нужно указать “apple-touch-icon.png”.

Пример кода:

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

Пример кода:

Edge и IE 12

Цвет фона изображения определяется в коде страницы через тег meta:

Пример кода:

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

Пример кода:

<tile>

</wide310x150logo></square310x310logo></square150x150logo></square70x70logo></tile>

</msapplication>

</browserconfig>

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

Проверка фавикона на ошибки

Если вы хотите удостовериться, что фавикон настроен правильно, попробуйте найти ваш сайт через «Гугл». Также вы можете пройти по следующей ссылке, указав в ней свой адрес:

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

Кроме того, есть особые сервисы, позволяющие посмотреть, как выглядит фавикон.

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

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

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

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

Сервисы для создания фавикона

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

Realfavicongenerator

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

Favic-o-matic

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

ico & App Icon Generator

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

Faviconit

Этому сервису нужен квадратный исходник со стороной не менее 310 px, максимальный размер файла – 5 Мб. На выходе вы получаете архив, содержащий графические изображения и текст с кодом HTML.

3 примера необычных фавиконов

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

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

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

Креативные фавиконы

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

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

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

Youtube. Фавикон Youtube превосходно сочетает в себе креативность и минимализм. Вместо уменьшенной версии главного логотипа используется красный значок в виде кнопки проигрывателя. Таким образом, пользователю сразу становится ясно, что на странице имеется контент, который можно воспроизводить. Кроме того, иконка меняется при просмотре видео, например, когда вы нажимаете на паузу.
Sitepoint. При создании фавикона этого сайта также применялся творческий подход. Он выглядит как буква S в виде двух скобок, используемых в программировании. При взгляде на такую иконку разработчик сразу получает представление о содержании сайта.
Trello. Фавикон Trello меняется в соответствии с тем, какой цвет фона вы выбрали или же загрузили.
Mixcloud. Внешний вид фавикона у Mixcloud различается в зависимости от того, звучит ли музыка в данный момент или стоит на паузе. Еще по иконке можно определить, сколько осталось до конца песни.
Github. Особенностью фавикона Github является способность менять цвет при изменении состояния системы.
Flickr. При добавлении изображения на данный сервис появляется небольшой значок, свидетельствующий о ходе загрузки.

Динамичные фавиконы

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

Динамичные фавиконы

Похожий функционал реализован в Campaign Monitor. Для гостей сайта фавикон выглядит как закрытый конверт, который открывается после авторизации.

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

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

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

Рейтинг: 3

( голосов 2 )

Поделиться статьей

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

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

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

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

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

Фавикон (произносится как «любимая иконка») — это крошечная знаковая картинка, изображающая ваш веб-сайт.

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

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

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

Каким файлом изображения должен быть ваш значок?

В то время как большинство современных браузеров могут распознавать форматы favicon GIF, PNG и JPG, старый Internet Explorer по-прежнему требует файлов .ico.

Какого размера должен быть мой значок?

Еще одна веская причина для использования формата ICO — включение в файл ICO различных фавиконов разного размера. Идеально иметь хотя бы версию 16×16 пикселей.

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

Какие форматы я могу использовать для Favicon?

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

Windows ICO: ICO кажется наиболее часто поддерживаемым файлом в цифровом мире. Преимущество ICO заключается в том, что он может включать различные разрешения и битовые глубины, которые работают очень хорошо и особенно полезны для Windows. ICO также предоставляет 32-пиксельную иконку, удобную для панели задач Windows 7 Internet Explorer. Кроме того, это единственный формат, в котором эта функция не используется.

PNG: Формат PNG выгоден по нескольким причинам. Вам не нужны причудливые инструменты для создания файла PNG, что делает его довольно удобным для пользователя. Он предлагает нам наименьший размер файла и поддерживает альфа-прозрачность. Однако одним из основных недостатков этого стиля является то, что Internet Explorer не поддерживает файлы PNG и поддерживает только файлы ICO.

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

SVG: Этот формат может использоваться и распознается браузером Opera.

JPG: Хотя этот формат можно использовать, он не популярен и не обеспечивает дополнительное качество разрешения, такое же хорошее, как PNG. Кроме того, учитывая небольшой размер фавикона, JPEG теряет все свои преимущества.

APNG: Это просто анимированная версия PNG, и хотя Firefox и Opera могут ее поддерживать, она имеет те же проблемы, что и анимированный GIF, что сбивает пользователей с толку при работе с их интерфейсом.

Где ты собираешься увидеть фавикон?

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

Раскрывающееся меню истории и история браузера

Вкладки браузера

Раскрывающееся меню закладок

Панель поиска

Важны ли фавиконы для SEO?

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

Удобство и опыт

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

Брендинг вашего бизнеса

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

Как сделать хороший фавикон

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

Использовать все пространство

Часто значок не может быть просто мини-версией логотипа вашего бренда. Следует учитывать общий размер вашего значка. Вам лучше придерживаться 16px, так как это применимо ко всем браузерам (но вы можете найти другие примеры ниже). Если вы изменяете размер своего логотипа, убедитесь, что ваш интервал занимает все 16 пикселей, иначе ваш значок может уменьшиться в размере.

Взгляните на этот пример:

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

Вот лучший пример:

Простота

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

Фирменный стиль

Ваш Favicon — это визуальное представление вашего бренда, поэтому его визуальные элементы должны сообщать пользователям, чем занимается ваш бизнес. Это сразу показывает им, что представляет собой ваш бренд и чем он занимается. Несмотря на то, что это довольно сложно сделать с таким маленьким и дешевым дизайном, постарайтесь быть инновационным.

Фавикон YouTube — отличный пример, вы сразу поймете, что это за бренд (видео) и что они означают с первого взгляда.

Сокращение

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

Согласование цвета

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

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

Раньше фавиконы нужно было явно переименовывать в favicon.ico и помещать в корень вашего домена (например, http://www.mydomain.com/favicon.ico). Это предполагало, что вы можете получить только один Favicon для каждого домена за раз. Тем не менее, была введена большая универсальность, поскольку фавиконы были стандартизированы. В настоящее время для этого существует два метода. Если вы добавите значок фавикона, не привязав его к своему HTML, вы заметите, что некоторые браузеры все еще могут его найти и просмотреть. Это возможно только в том случае, если Favicon находится в корневом каталоге.

Один фавикон для всего домена

Если вам нужен только один значок Favicon для всего домена, просто сохраните файл favicon.ico в корневую папку вашего веб-сайта. После загрузки он должен быть легко доступен из http://www.mydomain.com/favicon.ico. Как только файл будет загружен, ваш браузер должен начать отображать значок для всех страниц на веб-сайте. Если нет, очистите кеш браузера и перезагрузите вкладку.

Фавиконы для конкретных страниц

Если вы хотите большей гибкости (и немного больше соответствовать стандартам), вы можете назначать значки на странице за страницей. Чтобы использовать этот метод, сохраните файл .ico в любом месте вашей сети, например, в папке или изображении. Прикрепите к своей странице следующий код: Обновите отмеченный путь до последней ссылки на файл значка. Обратите внимание, что мы используем относительный путь к сайту (начинающийся с косой черты) как действительную ссылку независимо от пути к текущей странице. При использовании этого метода вам всегда нужно загружать значок резервной копии на http://www. mydomain.com/favicon.ico для сценариев, когда пользователь просматривает или добавляет в закладки не-HTML-контент (например, PDF).

Проверьте фавикон на наличие ошибок

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

https://www.google.com/s2/favicons?domain=enteryoursite.com

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

Находится ли графическое изображение в корневой папке ресурса в формате PNG ICO или GIF?
Правильно ли написан код, ведущий к картинке на страницах ресурса?
Является ли Favicon основным и уникальным?
Открыт ли файл favicon для поиска сканером?

Я хочу подчеркнуть, что путь к изображению оказывает существенное влияние на то, насколько хорошо отображается Favicon. Если вы хотите каким-либо образом удалить или изменить свой Favicon, все, что вам нужно сделать, это удалить или изменить файл favicon.ico (GIF, JPEG, PNG). Даже если у вас все в порядке со своей стороны, имейте в виду, что поисковым системам требуется время для архивации фавиконов. На самом деле, есть целый исключительно преданный бот, который не делает ничего, кроме этого. Он загружает значки веб-сайтов на свой сервер, поэтому индексация вашего графического изображения может занять до нескольких недель.

Заключение

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

Фавикон — это маленькая иконка на вкладке браузера. Вот основы, чтобы сделать один! | Кори Ходж Dot Net

a Новая вкладка в Firefox

Medium M? Символ воспроизведения YouTube? Автономный Google G ? Фавиконы есть во всем Интернете.

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

Сообщите о вкладке «Стиль дерева»: https://addons.mozilla.org/en-US/firefox/addon/tree-style-tab/ )

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

Файл .ico будет хранить вашу иконку в разных размерах, поэтому они подходят для крошечных вкладок браузера, вплоть до раздела популярных сайтов новой вкладки браузера. Различные смартфоны и потоковые устройства, такие как Roku или Chromecast, также имеют свои потребности в размерах. На приведенных выше снимках экрана у первого есть фавиконы размером 256×256, а у второго — значки вкладок 16×16. Для получения списка общих размеров установите флажки размеров на этом конвертере изображения в . ico: https://www.icoconverter.com/

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

Я собираюсь использовать Photoshop, чтобы продемонстрировать это, но вы можете использовать любое доступное вам программное обеспечение (Canva, Microsoft Paint и т. д.).

Сначала решите, что вы хотите создать. Для многих компаний или сайтов-портфолио люди выбирают аббревиатуры или инициалы. Дизайнер по имени John Nada может сделать фавиконку JN . Denver Dim Sum может иметь DDS. Некоторые выбирают значки или символы. В моем случае я не хотел использовать свои инициалы и подумал, что было бы забавно превратить свой большой палец вверх в значок. Решите, что подходит именно вам, и мы перейдем к следующему шагу.
Если вы создаете что-то с нуля, переходите к следующему пункту. Если вы создаете из чего-то уже существующего, задержитесь на этом шаге. Я начал с изображения своего поднятого вверх большого пальца, но, возможно, вы используете какой-нибудь бесплатный клипарт. Затем я использовал инструмент «Волшебная палочка» и удалил выделение, чтобы начать стирание фона (чтобы он был прозрачным). Если вы используете клип-арт, сделайте то же самое (удалите все белые или фоновые пиксели и убедитесь, что нет пикселей или прозрачности). Затем я очистил все это, увеличив масштаб и используя ластик по мере необходимости. Наконец, я скопировал все изображение, вставил его в новый документ размером 256×256 для максимального размера фавиконки и использовал ctrl+t, чтобы выбрать и перетащить (с сохранением пропорций) мою огромную фотографию большого пальца вниз, чтобы она соответствовала новым ограничениям 256×256.

использовал инструмент «Волшебная палочка» и удалил выделение, чтобы начать стирание фона… очистил все это, увеличив масштаб и используя инструмент «Ластик» по мере необходимости.

В Photoshop прозрачность представлена черными и белыми клетчатыми прямоугольниками. В вашей программе редактирования изображений это может быть по-другому. Свежий новый документ 256×256 скопировал все изображение, вставил его… использовал ctrl+t для выбора и Shift-перетаскивание (сохранение пропорций)… вниз, чтобы соответствовать новым ограничениям 256×256. Наш новый 256×256 продукт, готовый к экспорту

Если вы создаете что-то с нуля, создайте новый документ в своей программе (в Photoshop он должен выглядеть как на скриншоте выше N ew Document ). Теперь просто нарисуйте то, что хотите, поскольку вы уже установили правильные ограничения 256×256, все должно работать.
ПРИМЕЧАНИЕ. Пока вы работаете, убедитесь, что ваше изображение не станет действительно крошечным, чтобы убедиться, что ваша идея работает в очень маленьком масштабе. Таким образом, ваш дизайн не зависит от определенных деталей, которые плохо переносятся на меньший размер.
Когда вы будете довольны тем, что у вас есть, экспортируйте его в формате PNG и убедитесь, что прозрачность включена.

установите флажок «Прозрачность»

Теперь, когда у нас есть подходящий PNG для преобразования (файлы PNG и GIF поддерживают прозрачность, которая нам нужна, а файлы JPG — нет). Давайте воспользуемся одним из множества красивых инструментов, чтобы преобразовать наше изображение в файл favicon. Если вы ищете «изображение на фавикон», вы найдете множество вариантов. Мы будем использовать https://www.favicon-generator.org/
Убедитесь, что вы отметили Создание значков для веб-приложений, приложений Android, Microsoft и iOS (iPhone и iPad) , что гарантирует наличие всех необходимых нам размеров в одном файле .ico. Вот где наша работа по созданию файла значка с более высоким разрешением 256×256 окупается!
Если хотите, снимите флажок Включить favicon.ico в общедоступную галерею
Наконец, сохраните и извлеките новые файлы favicon в корневой каталог вашего веб-сайта и скопируйте предоставленный код в заголовок вашего HTML-файла.

Используйте фавиконки правильно / Хабр

Подключение

Обязательная фавиконка

Дополнительные необходимые фавиконки

SVG

Для устройств Apple

Манифест

Откуда брать фавиконки и как их приготовить

Итог

зачем нужен и как сделать

Понятие и задачи фавикона

Требования к фавикону у «Яндекса» и Google

Требования Google

Требования «Яндекс»

Выбор картинки для фавикона

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

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

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

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

Как добавить фавикон на сайт через код

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

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

Android

Apple

Edge и IE 12

Проверка фавикона на ошибки

Сервисы для создания фавикона

3 примера необычных фавиконов

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

Креативные фавиконы

Динамичные фавиконы

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

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

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

Каким файлом изображения должен быть ваш значок?

Какого размера должен быть мой значок?

Какие форматы я могу использовать для Favicon?

Где ты собираешься увидеть фавикон?

Важны ли фавиконы для SEO?

Удобство и опыт

Брендинг вашего бизнеса

Как сделать хороший фавикон

Использовать все пространство

Простота

Фирменный стиль

Сокращение

Согласование цвета

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

Один фавикон для всего домена

Фавиконы для конкретных страниц

Проверьте фавикон на наличие ошибок

Заключение

Фавикон — это маленькая иконка на вкладке браузера. Вот основы, чтобы сделать один! | Кори Ходж Dot Net

Я собираюсь использовать Photoshop, чтобы продемонстрировать это, но вы можете использовать любое доступное вам программное обеспечение (Canva, Microsoft Paint и т. д.).

Добавить комментарий Отменить ответ