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" }
  ]
}

Настройки:

  • src — путь до иконки;

  • type — тип иконки;

  • sizes — размер иконки.

Можно добавить дополнительные размеры иконок, если этого требует браузерная поддержка вашего проекта. Например, вам потребовалась иконка 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. Не добавлять фавиконки в проект.

  2. Попросить дизайнера отрисовать фавиконку (лучше в векторном формате). Рассказать, что требуется отрисовать иконку в квадрате. Сама иконка может быть круглой или даже овальной, но изображение должно быть вписано в квадрат с пропорциями 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 ₽.

Фавикон сайта — что это такое? Как разместить Favicon.ico на сайт?

Что такое favicon (фавикон)?

Фавикон (в переводе с английского FAVorite ICON — «значок для избранного») — миниатюрное изображение, выполненное в формате ico. Он виден как в поисковой выдачи, так и при открытии самого сайта, а именно: в верхней части браузера (смотрите на картинку). Favicon является миниатюрным изображением, которое относится к числу основополагающих составляющих любого интернет-ресурса. Если в 2006 году сайты в большинстве своем работали без прикрепленных фавиконов, то сегодняшние веб-сайты невозможно представить без них. Конечно, остались проекты, запущенные без favicon, но в 2017 году это единичные случаи, найти которые очень сложно, так как сами поисковики в 95% случая не пропускают их в свой ТОП по высокочастотным запросам.

Предназначение favicon:

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

Где демонстрируется favicon (фавикон):

  • В поисковой выдачи — когда пользователь вводит в поиске поисковой системы какой-либо запрос, он в 90% случаях видит как названия страниц сайтов, так и их индивидуальные favicon.
  • В верхней части браузера —
    переходя на какую-либо страницу сайта, в верхней части браузера, пользователь всегда наблюдает картинку, под которой подразумевается favicon. Именно она в какой-то степени позволяет не ошибиться с веб-ресурсом при большом скопе открытых в браузере вкладок.
  • В закладках/истории браузера — современные версии браузеров демонстрируют в своей истории и закладках не только названия сайтов и их страниц, но и favicon.
  • На экране приложений в смартфоне — favicon отображаются не только в браузере и поисковой выдачи, но и на экранах смартфонов. Так если, при сохранении сайта в качестве приложения в своем смартфоне (что сегодня является нормой), пользователь вместе с его названием будет видеть favicon. Это в свою очередь облегчает сортировку интересных сайтов.
  • На внутреннем домашнем столе компьютера — когда пользователь сохраняет сайт на рабочем столе, он создает иконку, представляющую собой какое-либо изображение, под которым подразумевается favicon.

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

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

Favicon — миниатюрная иконка, которая имеет квадратную форму. Ее размер в большинстве своем равен 8х8, 16х16, 32х32, 64х64 и 128х128 пикселей. Именно поэтому возникает сложность при перекодировании объемных картинок в формат ico, ведь подчас в такого рода изображениях присутствует более 1280 пикселей, что сильно портит внешний вид конечной ico картинки, превращая ее в квадрат со всевозможными красками.

Где взять favicon?

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

  • Скачанный из интернета favicon. Основным преимуществом является то, что такой фавикон полностью бесплатен. Вторым же достоинством стоит считать то, что в качестве такого фавикона может выступать любое изображение, главное правило: перекодировать его в формат ico. Но бесплатность не несет в себе ничего хорошего, все скаченные из интернета фавиконы являются собственностью их авторов, и в 99% случаях они присутствуют на других сайтах, что лишает их какой-либо уникальности. Например, в Европе и Соединенных Штатах Америки нередки случаи, когда владельцев сайтов привлекали к уголовной ответственности за кражу favicon (нарушение авторских прав).
  • Созданный самостоятельно favicon. Создать фавикон самостоятельно сегодня может даже школьник. Для этого потребуется лишь воспользоваться возможностями, которые предоставляются специально разработанными для этих целей онлайн-генераторами иконок (icon) в формате ico. Основным преимуществом данного метода является то, что в качестве favicon может выступать логотип компании/фирмы/организации, перекодированный с помощью генератора фавиконов в формат ico.
  • Заказанный у специалиста favicon. Разумеется, фрилансеры и компании, ориентирующиеся на создании фавиконов используют доступные в открытом доступе всем пользователям интернета российские и иностранные генераторы и редакторы изображений в формате ico. Хотя при этом, профессиональный фавикон всегда будет стоять выше того, который пользователь сможет создать самостоятельно.

Генераторы фавиконов:

  • https://www.favicon.cc — один из самых первых онлайн-генераторов фавиконов, используя его пользователь сможет не только перекодировать картинку из классических изобразительных форматов в ico (например, логотип своей компании), но и создать свою иконку, которая хорошо будет выглядеть как при поисковой выдачи в Яндексе и Google, так и адресной панели браузера.
  • https://www.favicongenerator.com — минималистический сервис, облегчающий генерацию фавиконов и упрощающий процесс редактирования изображений в формате JPG в ico. Результат моментально демонстрирует в специально отведенном окошке.
  • https://www.genfavicon.com — этот сервис достаточно прост в понимании, так как создание фавикон проходит в три этапа, а именно: выбор файла в формате JPEG, GIF, PNG на компьютере; выбор конечного размера изображения и повсеместное его перекодирование в формат ico. Учтите, что изображение должно иметь квадратную основу.

Генераторы фавиконов с нуля:

  • https://antifavicon.com
  • https://favicon-generator.org
  • https://favicon.ru
  • https://www.favicon.cc
  • https://www.degraeve.com/favicon

Коллекции фавиконов:

  • https://www.iconj.com/gallery.php — коллекция фавиконов, насчитывающая свыше 10000 иконок.
  • https://www.audit4web.ru/info/favicon/ — коллекция с фавиконами для сайта, в базе которой хранится более 20000 изображений в формате icon (ico).
  • https://www.favicon.cc/?action=icon_list&order_by_rating=1 — генератор фавиконов и галерея анимированных и статичных иконок
  • https://www.favicon.co.uk/gallery.php — генератор фавиконов для сайта и блога, а также каталог статичных и анимированных картинок.
  • https://thefavicongallery.com — многообещающая веб-коллекция изображений в формате ico, доступных для бесплатного скачивания.
  • https://findicons.com — самый масштабный сток на просторах российского и иностранного интернета с изображениями в формате icon (ico).

Как разместить фавикон на сайте?

Для размещения Вам потребуется лишь доступ к серверу. Формат фавикон: ICO (рекомендуемый), GIF, JPEG, PNG, BMP.

1. Разместите favicon в корневую папку сайта.
2. Добавьте в HTML-код главной страницы сайта, в элемент , ссылку на размещенный файл.
… …

Что такое favicon для сайта, как сделать фавикон и зачем нужна иконка сайта?

09.08.2021


Инструментов, чтобы выделить свой сайт среди миллионов других в поисковой выдаче, не так-то много. Favicon ― это один из таких инструментов. 

Favicon сайта ― что это

Что такое favicon? Favicon (favorites icon ― иконка для избранного) ― это иконка сайта, которая отображается:

  • на вкладках перед названием сайта

  • в закладках пользователя

  • слева от названия сайта в поисковой выдаче:

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

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

Яндекс уже около 10 лет отображает фавиконы в поисковой выдаче. А вот Google долгое время не торопился внедрять эту фичу в свой поисковик, поэтому пользователям пришлось ждать аж до 2019 года. Пока Google экспериментирует с фавиконами в поисковой выдаче: ищет им подходящее место, проверяет их нужность. Последний крупный эксперимент в отношении фавиконов был в январе 2020 года. О технических работах разработчики писали в официальном Twitter компании.

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

Для чего нужен favicon

Как использовать favicon? На что он может повлиять?

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

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

  3. Удобный поиск сайта в закладках. Как мы говорили ранее, изначально фавикон создавался именно для того, чтобы нужный сайт было легче найти в избранном. До сих пор эта функция осталась, и иконки значительно облегчают поиск ресурсов. То же самое работает и с иконками во вкладках. Современные ПК очень производительные, поэтому они могут постоянно держать открытыми несколько десятков вкладок. В таких случаях иконка для сайта ― единственный способ найти то, что нужно.

  4. ​​Заставить пользователей больше доверять вам. Многие сайты уже давно пользуются иконками. Если вы не создадите себе отличительный знак, вы можете выделяться среди остальных ресурсов с плохой точки зрения. Пользователи могут задуматься о вашей профессиональности, а может даже принять за мошенников. Особенно это может сказаться на интернет-магазинах, так как люди будут бояться оплачивать товары через такой сайт. Всё это может значительно усложнить продвижение бренда.

Технические требования к изображению

Раньше для favicon использовали формат ICO. Сейчас браузеры поддерживают такие форматы, как SVG (чаще всего рекомендуют именно его), ICO, GIF, JPEG, PNG, BMP. 

Рекомендованный размер картинки в каждой поисковой системе разный. Яндекс говорит, что фавикон должен быть 120 × 120, 32 × 32 и 16 x 16 пикселей. В официальном справочном материале Яндекс рекомендует использовать изображения размером 120 × 120 пикселей (для растровых форматов) или изображение в формате SVG. Именно эти параметры позволят отобразить логотип сайта чётко и заметно на сервисах Яндекса.

В Google рекомендуемый размер значка должен быть кратным 48 пикселям, например, 48 x 48, 96 x 96, 144 x 144. Специалисты Google просят не использовать иконки 16 x 16, так как они слишком маленькие.

Как создать favicon

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

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

Как сделать favicon для сайта:

  1. Конвертировать уже готовое изображение. Если у вас уже есть готовая иконка или картинка, можно просто конвертировать её в нужный формат. Для этого подойдёт сервис pr-cy.ru, be1.ru.

  2. Нарисовать иконку самостоятельно. Есть сервисы, у которых очень ограниченный функционал, но с их помощью можно сделать простое начертание. Такие возможности дают сайты katvin.com, favicon.by, favicon.cc, xiconeditor.com
    Для примера сделаем иконку в виде радостного смайлика в сервисе favicon.by.
     

  3. Использовать готовые иконки. Необязательно рисовать иконку с нуля. Можно взять уже готовые иконки, которые выложены в библиотеки сайтов в свободном доступе. Взять готовые фавиконы можно на faviconka.ru и findicons.com.

Советы по созданию favicon

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

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

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

Favicon: как добавить на сайт

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

Самый универсальный способ ― добавить значок сайта через код. С него и начнём.

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

  1. Загрузите файл с иконкой в корневой каталог сайта.

  2. Добавьте в HTML-код главной страницы сайта в элемент head ссылку на размещённый файл.

<head>

     <link rel="icon" href="https://example.com/favicon.ico" type="image/x-icon">

     <link rel="shortcut icon" href="https://example.com/favicon.ico" type="image/x-icon">

</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.

Совет. Если сайт должен быть доступен по нескольким доменам, лучше указывать в коде не полный путь, а относительный. Например, не https://example.com/favicon.ico, а просто /favicon.ico.

Обратите внимание! Если у вас кириллический домен в атрибуте href используйте Punycode. Например, для адреса https://новыйсайт.рф/favicon.ico нужно указать https://xn--80advbqgxk0f.xn--p1ai/favicon.ico или просто использовать относительный путь /favicon.ico.

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

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

Чтобы добавить иконку можно, например, использовать плагин RealFaviconGenerator

  1. Перейдите в админку WordPress.

  2. Перейдите в Плагин ― Добавить новый.

  3. Найдите в поиске плагин RealFaviconGenerator установите и активируйте его.

  4. Перейдите во Внешний вид ― Фавикон

  5. Загрузите иконку. Нажмите Генерировать favicon. Плагин перенесёт вас на сайт RealFaviconGenerator.

  6. На веб-сайте найдите и нажмите кнопку Создайте свои значки Favicons и HTML-код.

  7. Плагин вернёт вас на ваш сайт. Вы получите уведомление о том, что ваш favicon настроен.

Не сложнее добавить favicon и через обычные настройки WordPress.

  1. В админке WordPress перейдите во Внешний вид ― Настроить.

  2. Выберите Общие настройки ― Свойства сайта.

  3. В разделе Иконка сайта нажмите Выберите иконку сайта 

  4. Загрузите фавикон.

  5. Чтобы сохранить изменения, нажмите кнопку Опубликовать:

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

В лучшем случае, поисковые системы начинают индексировать фавиконку через 1-2 недели после её настройки. А может и через несколько месяцев. К сожалению, здесь все зависит от решения системы. 

Иконка для сайта — Создать свой сайт бесплатно


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

Favicon (сокр. от англ. FAVorite ICON — «значок для избранного») — значок веб-сайта или веб-страницы. Отображается браузером во вкладке перед названием страницы, а также в качестве картинки рядом с закладкой, во вкладках и в других элементах интерфейса.

Традиционно использовались изображения размера 16×16 пикселей формата ICO, помещённые в корневой каталог сайта под именем favicon.ico, — тогда Microsoft Internet Explorer использовал их для закладок. До версии 7.0 MSIE использовал значки только для закладок, и поэтому администраторы серверов могли узнать, сколько пользователей создало закладку на их сайт.

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

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


Поддерживаемые форматы иконки сайта: ICO, PNG, GIF, Анимированный GIF, JPEG, но если вы хотите, чтобы ваш фавикон отображался во всех браузерах выбирайте ICO.

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

Делаем favicon онлайн


Перейти https://www.favicon.by

Нарисовать в сетке нужную фигуру цветом подходящим к дизайну сайта


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

Осталось скачать иконку нажав кнопку СКАЧАТЬ ФАВИКОНКУ 

 


Logaster — конструктор фирменного стиля: лого, фавикон, визитка, конверт, бланк, русские шрифты. 

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


Копируем наш файл favicon.ico в корневую папку сайта (там, где лежит главная страница сайта) и всё.

 

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


Только на премиум тарифе. В Редакторе сайта слева нажмите Настройки > Фавикон > кликните Изменить. Выберите изображение из Мои фавиконы или нажмите Загрузить фото > кликните Выбрать фавикон > нажмите Готово. Фавикон может быть загружен в следующих форматах: .JPG и .PNG. размером 16 на16 пикселей.

Чтобы изменить фавикон в новом редакторе wix:

  1. Войдите в Сайт — Настройки сайта.
  2. Нажмите Домен и хостинг.
  3. Нажмите Загрузить фавикон в разделе Фавикон.
  4. Выберите изображение или нажмите Загрузить изображение, что выбрать его на вашем компьютере.
  5. Нажмите Выбрать изображение и опубликуйте сайт.

    Как установить фавикон на blogger / blogspot



    Для этого заходим в административную панель, вкладка Дизайн. Видим в левом верхнем углу гаджет Значок. Нажимаем «Изменить», — откроется окно Настройка значка Загружаем свой фавикон. И нажимаем сохранить.

    В поиске Яндекс фавикон появиться после индексации роботом картинки, в браузере после перезагрузки вкладки, почистив кэш.

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

    Способы добавления Favicon на сайт

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

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

    Чтобы добавить рассматриваемый тип иконки на сайт, вам придется для начала создать подходящее изображение квадратной формы. Это можно сделать как с использованием специальных графических программ, например, Photoshop, так и прибегнув к некоторым онлайн-сервисам. Кроме того, подготовленный значок желательно заранее преобразовать в формат ICO и уменьшить до размера 512&#215;512 px.

    Примечание: Без добавления пользовательского изображения на вкладке отображается значок документа.

    Вариант 1: Добавление вручную

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

    Способ 1: Загрузка Favicon

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

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

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

    Способ 2: Редактирование кода

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

      Между тегами «HEAD» добавьте следующую строку, где «*/favicon.ico» необходимо заменить на URL-адрес вашего изображения.

    Примечание: Наиболее универсальным является ICO-формат.

    • ICO – «image/x-icon» либо «image/vnd.microsoft.icon»;

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

    Вариант 2: Средства WordPress

    При работе с WordPress вы можете прибегнуть к ранее описанному варианту, добавив упомянутый код в файл «header.php» или воспользовавшись специальными инструментами. Благодаря этому иконка гарантировано будет представлена на вкладке сайта вне зависимости от браузера.

    Способ 1: Панель управления

      Через главное меню разверните список «Внешний вид» и выберите раздел «Настроить».

    Способ 2: All In One Favicon

      В «Панели управления» сайтом выберите пункт «Плагины» и перейдите к странице «Добавить новый».

    Этот вариант является наиболее простым в реализации. Надеемся, у вас получилось установить Favicon на сайт через панель управления WordPress.

    Заключение

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

    Мы рады, что смогли помочь Вам в решении проблемы.

    Помимо этой статьи, на сайте еще 12447 инструкций.
    Добавьте сайт Lumpics.ru в закладки (CTRL+D) и мы точно еще пригодимся вам.

    Отблагодарите автора, поделитесь статьей в социальных сетях.

    Опишите, что у вас не получилось. Наши специалисты постараются ответить максимально быстро.

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

    Автор: Ольга Борисенко Опубликован 09.03.2021

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

    Содержание

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

    Фавикон (favicon, сокращенное от favourite icone) — маленькая иконка, которая сопровождает сайт в интернет-среде. Эта иконка появляется на вкладках, в результатах поиска и помогает сайту быть более узнаваемым.

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

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

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

    Помогает в навигации

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

    Фавиконы можно увидеть:

    • на вкладках и закладках в браузере,
      Фавиконы на вкладках и закладках браузера Mozilla
    • в истории браузера,
      Фавиконы в истории браузера
    • в результатах поиска «Яндекс»,
      Фавиконы в результатах «Яндекс.Поиска»
    • в мобильном поиске Chrome и «Яндекс»,
      Фавиконы в поиске Android Chrome
    • в часто посещаемых сайтах на главной странице некоторых браузеров.
    Вызывает доверие

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

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

    Увеличивает кликабельность

    Нет информации о том, является ли наличие фавиконки фактором ранжирования. Но

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

    Создание favicon

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

    Визуальная составляющая

    Что учитывать при создании фавиконки:

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

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

    Отличный фавикон у «Google Диска». Разноцветный треугольник хорошо смотрится в любом размере.

    Логотип «Google Диска» и он же в виде фавиконки на вкладке

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

    Логотип SendPulse и он же в виде фавиконки на вкладке

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

    Логотип VC.ru и он же в виде фавиконки на вкладке

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

    Размер: 120 * 120 пикселей, 32 * 32 или 16 * 16.

    Формат: SVG (рекомендуемый), ICO, GIF (без анимации), JPEG, PNG, BMP.

    Вот что «Яндекс» пишет по поводу фавиконок:

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

    Размер: кратный 48 — 144 * 144, 96 * 96, 48 * 48. Загружать файл 16*16 не рекомендуется.

    Формат: SVG, ICO, GIF (без анимации), JPEG, PNG.

    Кроме этого, Google рекомендует следующее:

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

    Сервисы для создания фавиконки без программиста

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

    Realfavicongenerator

    Этот сервис просит квадратный исходник с оптимальным размеров 260 на 260 пикселей. Здесь можно самостоятельно настроить результат: покрутить фон, отступы, цветовую тему.

    Настройка получившихся иконок в Realfavicongenerator

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

    Пакет нужно скачать в виде файлов и куска кода

    Favic-o-matic

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

    Результат создания фавиконок в Favic-o-Matic

    Favicon.ico & App Icon Generator

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

    Готовый пакет фавиконок и код для сайта в Favicon.ico & App Icon Generator

    Faviconit

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

    Готовый пакет фавиконок и код для сайта в Faviconit

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

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

    Загружаем иконки на сайт

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

    Корневая папка сайта может называться public_html, www, html или site. Если такой не найдете, уточните у своего провайдера. Загрузите все полученные на предыдущем шаге файлы в корневую папку.

    Редактируем код

    Теперь нужно открыть код главной страницы сайта. Там же, в файловой системе сайта, найдите файл под названием head или header. Откройте его и вставьте полученный ранее код в элемент <head>. Выглядеть это будет примерно так:

    Остается подождать, пока поисковики проиндексируют появивишиеся фавиконки для сайта.

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

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

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

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

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

    Подробное руководство по фавикону для сайта

    Favicon (от англ. FAVorites ICON — «значок для избранного») — значок сайта или страницы.

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

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

    В Google фавиконки не отображаются. Поисковик периодически тестирует эту функцию, так что они могут появиться в будущем.

    Фавиконки в выдаче Google (тест)

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

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

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

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

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

    Сайт без фавикона в выдаче среди прочих

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

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

    Логотип компании в фавиконе

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

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

    Закладки в Google Chrome

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

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

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

    Какую картинку выбрать для фавикона

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

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

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

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

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

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

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

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

    Загрузите квадратную картинку в генератор от PR-CY, он создаст архив с файлом ICO, в котором будет несколько вариантов фавикона, в том числе ретина иконки.

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

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

    1. Создайте картинку для фавикона с именем favicon.ico.
    2. Готовый файл нужно сохранить в корневом каталоге сайта.
    3. Если вы захотите использовать разные фавиконы для разделов сайта, скопируйте путь к изображению https://sitename.ru/favicon.ico. Если вы используете один favicon для всего сайта, путь к нему указывать не нужно.
    4. Добавьте ссылку на размещенный файл в HTML-код главной:

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

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

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

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

    Как установить разные favicon для отдельных страниц

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

    Фавиконы на разных разделах одного сайта

    Как установить разные фавиконки разделам сайта:

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

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

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

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

    Фавиконы сайтов на экране смартфона

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

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

    Стандартно для фавикона делают файл favicon.ico — это контейнер для нескольких файлов. Будет достаточно favicon.ico с файлами в размерах 16×16, 32×32 и 48×48.

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

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

    Android

    Обычно используют файл .png размером 180×180, можно использовать прозрачность. Указать фавикон и его расположение для Android можно через спецификацию Web App Manifest. В ней описан простой JSON-файл, в котором веб-мастеры указывают иконки, размеры и форматы для сайта или приложения.

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

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

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

    Apple

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

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

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

    Настраивают с помощью link rel=»mask-icon».

    Edge и IE 12

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

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

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

    Как сделать Favicon для сайта

    Что такое Favicon?

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

    Думаю, каждый из вас замечал favicon, посещая любимые сайты. Выглядит это следующим образом (в браузере Google Chrome):

    И для сравнения, отображение иконки в браузере Internet Explorer:

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

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

    Рисуем Favicon с помощью веб-сервиса

    Самый простой способ сделать фавикон – воспользоваться сервисом www.favicon.cc. Выглядит он так:

    Чтобы нарисовать иконку, нужно просто выбрать нужный цвет, прозрачность и нарисовать нужные контуры. При создании иконки сразу есть возможность предпросмотра:

    Создаем Favicon из готового изображения

    Для того, чтобы конвертировать готовую иконку в формате .png (который, кстати, тоже может использоваться для задания favicon), можно воспользоваться другим веб-сервисом: favicon.ru.

    Устанавливаем Favicon на сайт

    Когда иконка будет готова, вы сможете ее скачать в формате .ico. Чтобы добавить favicon на сайт, поместите файл favicon.ico в корневой каталог сайта и добавьте между тегами <head></head> строчку:

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

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

    Также рекомендуется добавлять строку:

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

    (для Internet Explorer).

    Размер фавикона может быть 16×16, 32×32.

    Полезное замечание

    Файл иконки может иметь не только расширение .ico, но и .png, причем рекомендуется использовать последний вариант. Это связано с тем, что устройства с высоким разрешением дисплея (например, iPhone, iPad, iPod) по умолчанию имеют размер иконки 57×57. Для этого лучше делать второй вариант иконки (в более высоком разрешении) и прописывать дополнительно строку:

    <link rel="apple-touch-icon" href="apple-favicon.png" />

    Но стоит отметить, что в таком случае иконка будет скруглена по углам и на нее будет наложен блик (это делается автоматически самим устройством). Для того, чтобы этого избежать, вместо apple-touch-icon нужно написать apple-touch-icon-precomposed.

    Подключаем favicon на сайт

    Автор: Администратор

    Просмотров: 2123

    Теги: favicon, ico, profile

    Что такое favicon

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

    Основной формат для favicon — ICO. Такой формат поймут все современные браузеры. Более новые и «продвинутые» воспринимают форматы GIF (включая анимированные GIF), PNG, JPEG and APNG.

    Размеры и цвета favicon — 16×16 пикселей, 256 цветов или TrueColor. Эта картинка будет отображаться рядом с адресной строкой, в закладках, табах и результатах поиска. Допускается использование нескольких картинок для favicon разных размеров (32х32, 48х48) и форматов, для нормального отображения иконки и на рабочем столе.

    Где можно увидить favicon

    • в избранном (рядом с закладкой)

    • во вкладках, справ от названия страницы

    • на панели закладок

    • в результатах выдачи поисковых систем

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

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

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

    Пример подключения:

     

    <head profile="http://www.w3.org/2005/10/profile">
	<link rel="icon" type="image/vnd.microsoft.icon" href="/favicon.ico">
</head>

     

    По рекомендациям W3C тегу <head> добавляем атрибут profile, у которого есть ссылка на документ, поясняющий назначение атрибута rel. Документ http://www.w3.org/2005/10/profile вариант такого пояснения. Можно использовать его, а можно создать свой.

    Что такое фавикон? | Поддержка HostGator

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

    Что дает мне право на бесплатный перевод?

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

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

    Полные передачи cPanel — это количество включенных передач cPanel на cPanel.

    Макс. Ручные переводы — это максимальное количество ручных переводов, включенных в вашу учетную запись.

    Всего бесплатных переводов — это общее количество веб-сайтов, которые мы переместим для вас.

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

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

    Несколько примеров: учетная запись реселлера алюминия включает до 30 бесплатных переводов. Из этих 30 у вас может быть 20 переносов с cPanel на cPanel и 10 переносов вручную, или любая комбинация этих двух, что в сумме дает 30 или менее веб-сайтов.Другой пример: выделенный сервер Pro включает неограниченную передачу cPanel на cPanel, это означает, что вы можете переместить 150 сайтов (или даже больше). Кроме того, поскольку существует неограниченное общее количество переводов, вы можете использовать до 100 ручных переводов.

    Для получения дополнительной информации см. нашу Статью о поддержке переводов, свяжитесь с нашим отделом переводов по адресу [email protected] или позвоните по телефону 866.96.GATOR

    Как добавить Favicon на веб-сайт и почему это важно | by Strikingly

    Фавиконы — это маленькие веб-иконки, представляющие определенный веб-сайт.Обычно вы видите их рядом с адресом веб-сайта или заголовком страницы на вкладке браузера. Например, на этой странице вы увидите поразительный логотип «S» на вкладке вашего веб-браузера рядом с заголовком этого сообщения. Значок значка вверху означает, что эта статья и все страницы на этом сайте созданы компанией Strikingly. Логотип G на Google.com, значок F на Facebook — все эти значки сайтов предназначены для укрепления брендов.

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

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

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

    По умолчанию веб-сайты Strikingly отображают значок сайта Strikingly на вкладке браузера, когда пользователи посещают любую страницу, созданную на этой платформе. Между тем, пользователи Strikingly Pro и Business могут добавить значок на веб-сайт через редактор сайта.В редакторе сайта перейдите в «Настройки» и «Общий доступ к информации». Вы найдете возможность загрузить новое изображение. Нажмите «Обновить» и не забудьте опубликовать сайт, чтобы сохранить изменения.

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

    Как добавить Favicon на свой веб-сайт?

    Вы когда-нибудь замечали изображение, содержащее букву «f» перед ссылкой на веб-сайт Facebook? Большинство популярных веб-сайтов сегодня отображают такие изображения! Изображение представляет собой логотип их бренда, уменьшенный до пиктограммы. Почему они используют логотип бренда? Веб-сайт хочет, чтобы клиент, посетивший их, вернулся к ним. Изображение или логотип бренда мгновенно запоминаются посетителю Интернета. Веб-серфер может забыть название веб-сайта, но логотипы, как правило, задерживаются в памяти, и они могут даже искать их, используя функцию поиска изображений от Google.Так что для полной запоминаемости веб-сайта стали широко использоваться фавиконы. Фавиконы стоят на пороге брендирования продуктов. Favicon означает любимую иконку. Это небольшой файл изображения, который добавляется к URL-адресу веб-сайта.

    В наши дни почти все веб-сайты будут иметь свой собственный Favicon. У вас есть веб-сайт, но вы еще не добавили Favicon? Затем следуйте инструкциям ниже, и вскоре у вас будет свой личный Favicon. Добавить Favicon очень просто. Что отнимает много времени, так это создание образа.Если вы владеете технологией или ноу-хау для обработки изображения, то ваша работа уже сделана. Программное обеспечение, такое как Photoshop, может помочь вам создать свой Favicon. Если вы не знакомы с технологией обработки изображений, не отчаивайтесь, Интернет предлагает множество инструментов и веб-сайтов, которые помогут вам создать свой собственный образ.

    Вам нужно только найти в любой из популярных поисковых систем «бесплатный генератор Favicon».

    Первый шаг к созданию Favicon — выбор изображения.Множество веб-сайтов позволяют создавать изображения, а также загружать изображения, изменять их размер и обрезать до нужного размера. Текущий размер, используемый большинством веб-сайтов, составляет 16 X 16. Или, может быть, у вас есть любимое изображение или логотип вашего бизнеса, который вы хотели бы использовать в качестве Favicon. Преобразование существующего изображения в Favicon легко с помощью бесплатных генераторов Favicon и утилит загрузки.

    Следующий шаг — добавить его к URL-адресу вашего веб-сайта. Никакого причудливого кода HTML или XML. Попробуйте следующую единственную строку кода, которая обычно используется и будет работать с магией Favicon.Убедитесь, что указанный ниже путь href ведет прямо к вашему загруженному местоположению Favicon.



    ins для создания и добавления вашего Favicon. Кроме того, вы можете добавить указанную выше строку в файл шаблона. Найдите файл header.php в wordpress и поместите приведенный выше код под метаинформацией вашего сайта.

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

    Комментарии

    Как создать фавикон для вашего сайта

    Если у вас бизнес-сайт, вам нужен фавикон.

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

    © Баланс 2019

    Технические требования

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

    Большинство создателей веб-сайтов, таких как WordPress и Wix, хотят, чтобы файл был в формате JPEG или PNG. Если ваш файл имеет прозрачный фон, обязательно сохраните его в формате PNG, потому что это передаст прозрачность.

    Почему он вообще называется «фавикон»? По словам одного из первых инженеров Internet Explorer, присутствовавших при его изобретении, «favicon» — это сокращение от «Favorite Icon», и он должен был облегчить поиск веб-сайтов в длинных списках закладок (или «Favorites», как они были известны в Internet Explorer).

    Что работает в дизайне Favicon

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

    Вам также не всегда нужно изображение. Вы также можете использовать буквы в качестве фавикона. Например, если название вашего веб-сайта MangoBicycles.com, вы можете использовать «MB» в красивом шрифте в качестве фавикона. Лучше иметь буквенный фавикон, чем вообще ничего.

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

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

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

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

    Где и почему используются фавиконки

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

    Показ фавиконов на вкладках веб-сайта

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

    Фавиконы отображаются в поиске Google для мобильных устройств и в некоторых поисковых системах

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

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

    Фавиконы хороши для брендинга

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

    Итоги использования значка веб-сайта для вашего бизнеса

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

    Как создать фавикон для своего сайта. Пошаговое руководство от А до Я

    1. Что такое фавикон?
    2. Почему фавикон важен?
    3. Как создать фавикон?
    4. Где я могу использовать фавикон?
    5. Как установить фавикон на свой сайт?

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

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

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

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

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

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

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

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

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

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

    Как создать значок?

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

    Шаг 1.Введите название вашей компании и нажмите «Создать логотип»

    Шаг 2. Выберите понравившийся логотип 
    Logaster сгенерирует вам десятки вариантов логотипа. Если у вас уже есть какое-то видение вашего будущего бренда, например, вы хотите видеть его в определенном цвете, у вас есть возможность задать свою отрасль бизнеса, цветовую палитру, чтобы сузить варианты выбора. Если вам понравились несколько логотипов, то сохраните их в «Избранное», вернитесь позже и выберите лучший.

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

    Шаг 4. Выберите изображение для дизайна фавиконки
    Теперь ваш логотип готов.   И вам нужно выбрать логотип для вашего будущего дизайна фавикона. Для этого на странице с логотипом нажмите кнопку «Комплект социальных сетей», расположенную в левой строке меню. Затем прокрутите вниз до LinkedIn Social Assets и выберите значок своего логотипа (квадратный логотип LinkedIn размером 60*60) для загрузки.

    Шаг 7. Преобразование файла PNG в формат ICO
    Следующий шаг — преобразование файла в формат ICO. Наберите в поиске Google «конвертировать .PNG в .ICO онлайн» и выберите один из предложенных сервисов.Большинство сервисов предлагают установить нестандартные размеры. Но обратите внимание, что фавикон может быть 32×32, 64×64 или 16×16 .

    Чтобы найти вдохновение для фавикона, посетите один из следующих веб-сайтов:
    The Favicon Gallery

    Fresh Favicons

    Где я могу использовать значок?

    Вы можете использовать фавикон:
    – Онлайн;
    — На мобильных устройствах. Пользователь может добавить фавиконку на главный экран своего устройства (как закладку) – Android, IOS, Windows Phone и т.д.;
    – Приложения для ПК/Mac.

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

    После создания фавикона его установка на сервер занимает не более пары минут и выполняется в два этапа. Вам необходим доступ к корневой директории вашего сайта и текстовый редактор для изменения HTML-кода сайта.

    Шаг 1.
    Необходимо загрузить файл favicon.ico на сервер. Для этого вам необходимо скачать и установить ftp-клиент, например, FileZilla.
    Затем введите логин и пароль и скачайте файл.Подробнее о том, как скачать файл фавикона, читайте здесь.

    Шаг 2.
    Теперь вам нужно отредактировать HTML-страницу вашего сайта, чтобы браузеры могли найти вашу фавиконку. Пока окно FTP открыто, найдите и загрузите с сервера файл index.html или header.php.
    Перед редактированием кода обязательно сделайте копию файлов, чтобы восстановить их в случае каких-либо ошибок.
    Откройте файл index.html в текстовом редакторе — Notepad, Notepad++, Sublime Text.

    Если ваш сайт содержит чистый HTML, вставьте специальный код в файл HEAD index.HTML.

    Если вы используете WordPress, вставьте следующий код в файл HEAD header.php.
    Когда это будет сделано, загрузите файл туда, откуда вы его взяли. Готово! Пожалуйста, перезагрузите страницу вашего сайта, чтобы увидеть фавиконку.

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

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

    Ваш адрес email не будет опубликован.

    Тип учетной записи Всего бесплатных переводов Полные переводы cPanel Макс. Ручные передачи
    ? 1 1 2 1
    ? Reseller 30 30 2 30
    ? VPS Неограниченные 1 Unlimited 2 2 10 на VPS Уровень
    ? Выделенные (Basic) Unlimited 1 Неограниченные 2 75
    75
    ? Выделенные (Standard, Elite, Pro ) Неограниченное количество 1 неограниченное количество 2 100 100