Фавиконки для сайта: Создание favicon для сайта 2020 / Хабр

Содержание

Создание favicon для сайта 2020 / Хабр

Что такое favicon и для чего он нужен?

Favicon

– это значок (иконка), который отображается во вкладке браузера, закладках, а также в сниппетах результатов поиска.

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

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

Какой формат использовать для favicon?

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

О каких платформах пойдет речь в этой статье?

Десктопные браузеры
Chrome на Android
Иконка закладки в iOS (PWA)
macOS
Windows

Десктопные браузеры

Начнем, пожалуй, с классического десктопа.

Как было упомянуто ранее, формат ICO сегодня является устаревшим, но это не значит, что про него нужно забыть. Формат ICO может спасти вашу иконку и корректно отображать favicon в некоторых случаях. Например, до 11 версии IE PNG-формат не поддерживается. Поэтому для IE10 и младших версий нужно использовать старый формат ICO. В таком случае желательно использовать следующую комбинацию ICO и PNG форматов:

<link type="image/x-icon" rel="shortcut icon" href="…/favicon.ico">
<link type="image/png" rel="icon" href="… /favicon-16x16. png">
<link type="image/png" rel="icon" href="…/favicon-32x32.png">
<link type="image/png" rel="icon" href="…/favicon-96x96.png">
<link type="image/png" rel="icon" href="…/favicon-120x120.png">

Для создания мульти-размерной иконки ICO можно использовать сервис-конвертер

icoconvert

. При генерации иконки необходимо выбрать следующие размеры: 16х16, 32х32, 48х48 (highest resolution icon).

Иконки PNG имеют следующие размеры: 16х16, 32х32, 96х96, 120х120. Зачем иконка 120х120? Яндекс Справка сообщает, что может воспользоваться иконкой данного размера.

Если обратить внимание на значение rel (тип ресурса), то icon – учитывается большинством браузеров, а shortcut icon – учитывается браузером IE.

Chrome на Android

Android ожидает увидеть значок 192х192 в формате PNG, alpha-канал (прозрачность) приветствуется.

<link type="image/png" rel="icon" href="…/android-icon-192x192.png">

Android Chrome полагается на манифест веб-приложения.

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

Сам файл манифеста формата json и объявляется следующей строкой:

<link rel="manifest" href="…/manifest.json">

Файл манифеста для Android Chrome можно сгенерировать с помощью сервиса

RealFaviconGenerator

{
 "name": "My Application",
 "short_name": "App",
 "description": "Application OK",
 "lang": "ru-Ru",
 "start_url": "/",
 "scope": "/",
 "display": "standalone",
 "theme_color": "#ffffff",
 "background_color": "#ffffff",
 "icons": [
  {
   "src": "\/res\/img\/icons\/android-icon-72x72.png",
   "sizes": "72x72",
   "type": "image\/png",
   "density": "1.5"
  },
  {
   "src": "\/res\/img\/icons\/android-icon -96x96.png",
   "sizes": "96x96",
   "type": "image\/png",
   "density": "2.0"
  },
  {
   "src": "\/res\/img\/icons\/android-icon-144x144.png",
   "sizes": "144x144",
   "type": "image\/png",
   "density": "3.0"
  },
  {
   "src": "\/res\/img\/icons\/android-icon-192x192.  png",
   "sizes": "192x192",
   "type": "image\/png",
   "density": "4.0"
  },
  {
   "src": "\/res\/img\/icons\/android-icon-512x512.png",
   "sizes": "512x512",
   "type": "image\/png"
  }
 ]
}

Иконки должны иметь следующие размеры: 72х72, 96х96, 144х144, 192х192, 512х512 в формате PNG, прозрачность приветствуется. Так как иконка может иметь прозрачный фон, то в манифесте можно указать цвет с помощью

background_color

Стоит отметить, что на телефоне пользователь имеет возможность сохранить страницу браузера на главный экран. Это будет просто ссылка на страницу вашего сайта, подтянется иконка с названием android-icon-192×192.png, которая объявлена у вас в коде.

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

android-icon-192×192.png) или переделать дизайн иконки для приложения под свои нужды и объявить в манифесте с соответствующими размерами.

Иконка закладки в iOS (PWA)

iOS Safari ожидает увидеть

apple touch icon

. Это иконка PNG формата 180х180, без alpha-канала (без прозрачности). Углы иконки будут автоматически скруглены, что упрощает создание

apple touch icon

Пользователи iOS также могут добавить сайт на главный экран, и он будет выглядеть как приложение. Такая ссылка отображается в виде значка и называется Web Clip.
Нижеперечисленные размеры иконок предназначены для поддержки различных устройств, например, для iPhone и iPad:

<link rel="apple-touch-icon" href="…/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" href="…/apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" href="…/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" href="…/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" href="…/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" href="…/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" href="…/apple-touch-icon-144x144.  png">
<link rel="apple-touch-icon" href="…/apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" href="…/apple-touch-icon-180x180.png">

В коде нужно добавить атрибут

rel=«apple-touch-icon»

и указать размер с помощью sizes.

Если на сайте нет значка, размер которого является рекомендованным для устройства, то будет использована сама близкая по размеру иконка большего размера. Основная apple touch icon это иконка размером – 180х180. Остальные устройства могут уменьшать иконку.

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

Следует отметить, что устройства под iOS не единственные, которые ищут apple touch icon. Некоторые браузеры, вроде Android Chrome, могут использовать apple touch иконки, так как они встречаются чаще других PNG иконок высоких разрешений.

macOS

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

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

<link color="#e52037" rel="mask-icon" href="…/safari-pinned-tab.svg">

В коде нужно добавить атрибут

rel=«mask-icon»

. Сама SVG-иконка должна быть черного цвета. Цвет иконки задается в атрибуте

color=»#e52037″

SVG-иконка используется в закрепленной вкладке (pinned tab – no focus) в монохромном виде. При наведении (pinned tab – focus) иконка будет закрашена в цвет, который имеет атрибут «color». В touch bar также передается цвет атрибута «color».

При создании иконки необходимо убрать все имеющиеся тени, сделать ее плоской и простой. Упростить иконку до одного объекта можно с помощью операций «Union» и «Flatten». Данные операции легко применить в программе Figma.

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

Windows

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

Для IE10 и более младших версий необходимо использовать формат ICO, так как до IE11 формат PNG не поддерживался.

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

browserconfig.xml (файл конфигурации браузера).

Пример добавление тегов метаданных в разметку веб-сайта для больших плиток:

<meta name="msapplication-TileImage" content="…/mstile-144x144.png">
<meta name="msapplication-square70x70logo" content="…/mstile-70x70.png">
<meta name="msapplication-square150x150logo" content="…/mstile-150x150. png">
<meta name="msapplication-wide310x150logo" content="…/mstile-310x310.png">
<meta name="msapplication-square310x310logo" content="…/mstile-310x150.png">

Данной строкой мы указываем цвет фона плитки:

<meta name="msapplication-TileColor" content="#2b5797">

Можно указать имя вашего веб-сайта:

<meta name="application-name" content="My Application">

Что такое

browserconfig

? Это XML-документ, в котором перечислены различные значки, соответствующие пользовательскому интерфейсу Metro UI.

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

<meta name="msapplication-config" content="…/browserconfig.xml">

Сам файл будет выглядеть следующим образом:

<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
    <msapplication>
        <tile>
            <square70x70logo src="…/mstile-70x70. png"/>
            <square150x150logo src="…/mstile-150x150.png"/>
            <square310x310logo src="…/mstile-310x310.png"/>
            <wide310x150logo src="…/mstile-310x150.png"/>
            <TileColor>#ffc40d</TileColor>
        </tile>
    </msapplication>
</browserconfig>

browserconfig

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

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

В следующем списке приведены некоторые рекомендации по использованию различных размеров:

Small — 70×70 (Рекомендуемый размер: 128×128)
Medium — 150×150 (Рекомендуемый размер: 270×270)
Wide — 310×150 (Рекомендуемый размер: 558×270)
Large — 310×310 (Рекомендуемый размер: 558×558)

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

mstile-70×70

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

Подготовка favicons

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

Например, в моем случае вес всех изображений был 200кб, после сжатия 50кб. Качество изображений практически не изменилось. Вы можете воспользоваться любым удобным сервисом для сжатия картинок. Я использовала iloveimg.

Заключение

Последовательность подключения в разметке веб-сайта:

<link type="image/x-icon" rel="shortcut icon" href="…/favicon.ico">
<link type="image/png" rel="icon" href="… /favicon-16x16.png">
<link type="image/png" rel="icon" href="…/favicon-32x32.png">
<link type="image/png" rel="icon" href="…/favicon-96x96.png">
<link type="image/png" rel="icon" href="…/favicon-120x120.png">
<link type="image/png" rel="icon" href="…/android-icon-192x192.png">

<link rel="apple-touch-icon" href="…/apple-touch-icon-57x57. png">
<link rel="apple-touch-icon" href="…/apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" href="…/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" href="…/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" href="…/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" href="…/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" href="…/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" href="…/apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" href="…/apple-touch-icon-180x180.png">

<link color="#e52037" rel="mask-icon" href="…/safari-pinned-tab.svg">

<meta name="msapplication-TileColor" content="#2b5797">
<meta name="msapplication-TileImage" content="…/mstile-144x144.png">
<meta name="msapplication-square70x70logo" content="…/mstile-70x70.png">
<meta name="msapplication-square150x150logo" content="…/mstile-150x150.png">
<meta name="msapplication-wide310x150logo" content="…/mstile-310x310. png">
<meta name="msapplication-square310x310logo" content="…/mstile-310x150.png">
<meta name="application-name" content="My Application">
<meta name="msapplication-config" content="…/browserconfig.xml">

<link rel="manifest" href="…/manifest.json">
<meta name="theme-color" content="#ffffff">

С помощью последней строки кода «

theme-color

» можно закрасить адресную строку и строку уведомлений в любой цвет. В значении content задается цвет.

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

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

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

Favicon – это пиктограмма (иконка) сайта, которая отображается в левой части перед названием страницы. Фавикон можно видеть в сниппетах поисковой выдачи Яндекса и Гугла, в закладках и во вкладках браузера. Нужен ли этот значок сайту, как он влияет на поведенческие метрики посетителей, помогает ли в продвижении? На все вопросы постараемся ответить в этой статье.

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

Название Favicon произошло от соединения двух английских слов: favorite – избранный и icon – значок. Фавиконка для сайта ассоциируется в сознании пользователей с определенным ресурсом в сети. В конкурентной среде эта небольшая пиктограмма помогает решать важные задачи:

Улучшает отображение сайта в поисковой выдаче. Фавикон делает описание более заметным в визуальном плане, что положительно сказывается на кликабельности сниппета. Эффективно используя фавикон для сайта, можно выгодно выделить свой ресурс на фоне конкурентов. Например, придать картинке свойства СТА (call to action) – призыв к действию, изобразив стрелку, телефонную трубку или другую побуждающую инфографику.

Повышает узнаваемость. У человека в эпоху клипового мышления развита визуальная память. Он не запоминает текст или названия, но очень хорошо откликается на яркую графику. Бренды, раскрученные сайты узнаются, в том числе, по фавикону. В 80% случаев пользователь в поиске кликнет на знакомую пиктограмму, даже если сниппет размещается на низкой позиции в выдаче ПС. Для продвижения компании часто используют маркетинговый прием: совмещают favicon для сайта с логотипом бренда. Это даёт двойной эффект – раскручивает ресурс в онлайн и повышает узнаваемость бренда в офлайне.

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

Если не использовать favicon, то браузер покажет пустой квадратик напротив названия, сниппета вашего сайта. В 90% случаев страдает кликабельность, а соответственно снижается трафик и позиции в выдаче. Если для создания страниц использовались конструкторы, браузер выведет фавикон используемого сервиса. Хорошо это или плохо? Вы рекламируете услуги другого ресурса «забесплатно». Также вы повышаете количество отказов при переходах с поиска или РСЯ – пользователь, кликнув на известную пиктограмму, попадает на «не тот ресурс» и быстро уходит. Поэтому ставьте свою картинку, тем более сделать это не сложно.

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

Пиктограмма для ресурса – это изображение в формате GIF, JPEG, PNG или SVG с разрешением ICO. Favicon для сайта размещается в корневом каталоге. Стандартные размеры – 16Х16, 32Х32, 60Х60 или 120Х120 пикселей. Для корректного отображения длина и ширина иконки должны быть равными. Если используете фавикон из картинки, подбирайте квадратные изображения.

Пиктограмма должна отвечать следующим критериям:

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

Как разместить favicon на сайте?

В 90% случаев картинка устанавливается с помощью плагинов или встроенных опций, которые используются в CMS. Ручной вариант предполагает размещение иконки в корневой папке сайта. В код между тегами на главной прописывается следующее значение:

< link rel="icon" href="http://путь до фавиконки" type=" image/формат картинки" >

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

rel=»apple-touch-icon»

Как Яндекс работает с фавиконами?

Иконка не сразу появится в результат выдачи ПС. Новая фавиконка проходит индексацию Яндекса 2-3 недели после того, как поисковые роботы найдут ссылки на картинку в коде. Роботы скачивают пиктограмму в свою лабораторию, проверяют и через 10-14 дней добавляется в общую базу иконок.

Для быстрой индексации важно прописать ссылку на фавикон в коде главной страницы сайта. Также проверьте ответ Яндекса – сервер должен вернуть значение 200 ОК. Внимательно проверьте, нет ли запрета индексации в robots.txt.

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

Для самостоятельного создания иконки сайта используйте:

favicon.ru – можно нарисовать картинку самим, использовать готовые решения, преобразовать файл в нужный формат. Есть платные услуги дизайнеров.
pr-cy.ru – в специальном разделе сервиса можно обработать картинку под иконку сайта, задать нужный размер и формат.
favicon.cc – хороший инструментарий для самостоятельного моделирования пиктограмм, есть платные услуги.

Резюме

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

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

09.08.2021

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

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

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

на вкладках перед названием сайта
в закладках пользователя
слева от названия сайта в поисковой выдаче:

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

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

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

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

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

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

Облегчает поиск сайта в поисковой выдаче. Благодаря узнаваемой картинке, постоянному посетителю вашего сайта будет легче найти веб-ресурс в списке. Это может сильно повлиять на количество переходов из поисковых систем.
Повышение узнаваемости. При разработке бренда очень важно, чтобы логотип компании примелькался аудитории. Если вы публикуете много контента на сайте, пользователь будет часто встречать ваш лого в ПС. Это будет способствовать запоминанию бренда.
Удобный поиск сайта в закладках. Как мы говорили ранее, изначально фавикон создавался именно для того, чтобы нужный сайт было легче найти в избранном. До сих пор эта функция осталась, и иконки значительно облегчают поиск ресурсов. То же самое работает и с иконками во вкладках. Современные ПК очень производительные, поэтому они могут постоянно держать открытыми несколько десятков вкладок. В таких случаях иконка для сайта ― единственный способ найти то, что нужно.
Заставить пользователей больше доверять вам. Многие сайты уже давно пользуются иконками. Если вы не создадите себе отличительный знак, вы можете выделяться среди остальных ресурсов с плохой точки зрения. Пользователи могут задуматься о вашей профессиональности, а может даже принять за мошенников. Особенно это может сказаться на интернет-магазинах, так как люди будут бояться оплачивать товары через такой сайт. Всё это может значительно усложнить продвижение бренда.

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

Раньше для 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 для сайта:

Конвертировать уже готовое изображение. Если у вас уже есть готовая иконка или картинка, можно просто конвертировать её в нужный формат. Для этого подойдёт сервис pr-cy.ru, be1.ru.
Нарисовать иконку самостоятельно. Есть сервисы, у которых очень ограниченный функционал, но с их помощью можно сделать простое начертание. Такие возможности дают сайты katvin.com, favicon.by, favicon.cc, xiconeditor.com.
Для примера сделаем иконку в виде радостного смайлика в сервисе favicon.by.
Использовать готовые иконки. Необязательно рисовать иконку с нуля. Можно взять уже готовые иконки, которые выложены в библиотеки сайтов в свободном доступе. Взять готовые фавиконы можно на faviconka.ru и findicons.com.

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

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

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

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

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

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

Загрузите файл с иконкой в корневой каталог сайта.
Добавьте в 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.

Перейдите в админку WordPress.
Перейдите в Плагин ― Добавить новый.
Найдите в поиске плагин RealFaviconGenerator установите и активируйте его.
Перейдите во Внешний вид ― Фавикон
Загрузите иконку. Нажмите Генерировать favicon. Плагин перенесёт вас на сайт RealFaviconGenerator.
На веб-сайте найдите и нажмите кнопку Создайте свои значки Favicons и HTML-код.
Плагин вернёт вас на ваш сайт. Вы получите уведомление о том, что ваш favicon настроен.

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

В админке WordPress перейдите во Внешний вид ― Настроить.
Выберите Общие настройки ― Свойства сайта.
В разделе Иконка сайта нажмите Выберите иконку сайта
Загрузите фавикон.
Чтобы сохранить изменения, нажмите кнопку Опубликовать:

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

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

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

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

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

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

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

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

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

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

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

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

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

Крупные фавиконы на стартовой странице Mozilla Firefox

Вызывает доверие

Хорошо оформленный сайт производит хорошее впечатление. Фавикон — часть этого впечатления. Сравните сами: на скриншоте ниже вкладки в мобильном браузере 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.
Иконка не должна быть неприемлемо или непристойной, иначе поисковик заменит ее на стандартную иконку.

Раздел документации Google о фавиконках

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

Требования есть, размеры и форматы описаны, но проще от этого не становится. Чтобы не разбираться, какие фавиконки нужны для каждого из интерфейсов, предлагаю воспользоваться одним из специальным сервисов. Они сгенерируют вам набор нужных 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. Откройте его и вставьте полученный ранее код в элемент. Выглядеть это будет примерно так:

…

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

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

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

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

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

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

Как сменить иконку сайта (favicon.ico) – Помощь

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

Если сайт был создан в Конструкторе REG.RU, добавьте фавикон по инструкции.

1. Загрузите файл иконки в каталог вашего сайта: В какой каталог нужно загружать файлы моего сайта.

Дополнительно (не обязательно, но рекомендовано) добавьте следующие строки в каждую страницу вашего сайта внутрь секции:

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

или так:

<link rel="icon" href="http://ваш-сайт.ru/favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="http://ваш-сайт.ru/favicon.ico" type="image/x-icon">

или так:

<link rel="icon" href="http://ваш-сайт.ru/путь_к_иконке/favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="http://ваш-сайт.ru/путь_к_иконке/favicon.ico" type="image/x-icon">

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

Была ли эта статья полезной?

Да Нет

Пользователи, считающие этот материал полезным: 1 из 1

Как создать favicon (фавикон) для сайта

Создание favicon для сайта

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

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

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

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

Что такое фавикон и какие его функции

Favicon — компактное изображение в виде значка или иконки, выполняющее роль мини-логотипа сайта. В переводе с англ. FAVorites ICON обозначает “значок для избранного”.

Его основная задача — визуально выделить сайт в закладках, сделать веб-приложение узнаваемым, повлиять на поведенческие метрики пользователей, помочь в продвижении. Сегодня эту пиктограмму можно увидеть везде: в сниппетах результатов поиска, в адресной строке, на страницах поисковой выдачи Яндекс и Google рядом с url сайта, на пустом начальном экране десктопных и мобильных браузерах, в вкладках браузера, других элементах интерфейса.

Создание фавикона для сайта дает возможность решать следующие задачи:

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

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

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

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

На сегодняшний день эту технологию считают устаревшей, преимущество стали отдавать форматам Svg и Png с разрешением ICO, они хорошо отображаются и мало весят. Первый используется в Safari MacOS, второй — в остальных операционных системах.

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

Сам размер картинки нужно подбирать в зависимости от типа и операционки устройства.

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

Требования к фавиконке

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

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

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

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

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

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

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

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

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

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

Фавикон для сайта — это не просто файл Favicon.ico, который расположен в середине ресурса. В настоящее время, когда присутствует так много платформ и устройств, рекомендовано генерировать большое число изображений, необходимых для настольных браузеров, устройств Android, iPhone/ iPad, совместимых с Windows, Mac, iOS и т.д.

Устройства iOS используют сенсорный значок Apple с высоким разрешением для иллюстрации закладок и ярлыков на главном экране. IPhone первого поколения требуют изображения 57х57, а вот новый iPad с наличием Retina-дисплея ищет изображения размером от 114х114 до 180х180.

Для Android Google рекомендует выбирать фавиконы размером 192х192 пикселей, изображения которых сохранены в формате .png.

Для iOS Safari приходится формировать миниатюрное изображение под названием apple touch icon. Это фавикон хорошего качества и с высоким разрешением в формате .png, его размерные параметры составляют 180х180. Пользователи iOS смогут добавить сайт на главный экран посредством использования функции Web Clip. В данном случае иконки будут выглядеть, как приложение.

Как уже писали выше, в Safari Mac OS дела обстоят иначе. Чтобы добавить иконку, в данном случае нужно использовать формат .svg, при этом иконку следует делать плоской, простой, без наличия тени. Только тогда она будет правильно воспроизводиться при закреплении вкладки в браузере Safari.

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

ico. Он присутствует в браузерах IE 10 и младших версий, а так как .png в них не поддерживается, то чтобы иконки корректно отображались на сайте, в коде нужно прописать сочетание из .ico и .png форматов. Допустимыми размерами для десктопа являются фавиконки таких размеров: 16х16, 32х32, 48х48. Есть и другой вариант — можно применить формат .svg, в котором нет конкретного размера. Помогла ли вам статья?

348 раз уже помогла

Комментарии: (0) Написать комментарий

Создаем favicon для сайта | Вебмастеру

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

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

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

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

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

Online сервисы и готовые коллекции favicon

Узнав, что такое favicon для сайта и зачем он нужен, необходимо понять то, как же его можно сделать?

Можно воспользоваться несколькими способами:

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

Скачать уже готовое мини-изображение из специальной галереи можно на следующих сайтах: thefavicongallery.com; iconj.com; favicon.co.uk или favicon-generator.org. На данных ресурсах представлено огромное количество различных иконок, поэтому каждый сможет найти ту, которая подойдет ему больше всего.

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

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

После перехода на сервис у вас откроется рабочее окно, где вы и будете экспериментировать:

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

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

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

На данном ресурсе вы можете создавать множество различных favicon в режиме реального времени.

Это один из многих онлайн-генераторов, который находится в свободном доступе. Существует также множество других. Вот некоторые из них: amichurin.appspot.com; favicon-generator.org/editor. Принцип их работы аналогичен приведенному примеру.

Установка favicon на сайт

Создав мини-иконку, остается только ответить на вопрос о том, как установить favicon на сайт?

Прежде всего, нужно проверить формат изображения. Он должен быть только «.ico».

Для этого достаточно вставить ваш файл в «корень» сайта или блога. Как правило, папка называется «DOCUMENT ROOT». После выполнения этих действий пауки и браузеры самостоятельно определят новую информацию о том, что появился новый файл favicon.ico.

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

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

Статус этого документа

Проект в разработке; может кардинально измениться в любой момент.

Значок — это графический изображение (значок), связанное с определенной веб-страницей и / или веб- сайт. Многие недавние пользовательские агенты (например, графические браузеры и программы чтения новостей) отображают их как визуальное напоминание о веб-сайте идентичность в адресной строке или во вкладках. Википедия включает статья о favicons [FAVICON-WIKIPEDIA].

Чтобы добавить значок на свой веб-сайт, вам понадобится как изображение, так и для указания того, что изображение будет использоваться в качестве значка. Этот документ объясняет метод, предпочитаемый W3C для указания значок. Существует еще один распространенный метод, который проиллюстрирован ниже. с объяснением, почему этот метод несовместим с некоторыми принципы веб-архитектуры. Оба метода применимы только к HTML и XHTML, одно из обсуждаемых ограничений ниже.

В этом документе не обсуждается подробно, как создать значок. изображение.Однако формат изображения, который вы выбрали, должен быть 16×16. пикселей или 32×32 пикселя, используя 8-битные или 24-битные цвета. В формат изображения должен быть одним из PNG ( Стандарт W3C), GIF или ICO.

Метод 1 (предпочтительный): использование значения атрибута

rel определяется в профиле

Первый подход к указанию значка — использовать rel значение атрибута «icon» и определить, что это значение означает через профиль; профили обсуждаются более подробно ниже.В этом примере HTML 4.01 значок, идентифицированный через URI http://example. com/myicon.png как значок:

  

 profile = "http://www.w3.org/2005/10/profile" >
   
[…]

[…]

XHTML 1.0 выглядит очень похоже:

  

 profile = "http://www.w3.org/2005/10/profile" >
   
[…]

[…]

Метод 2 (не рекомендуется): размещение значка по заранее определенному URI

Второй метод указания значка основан на использовании предопределенный URI для идентификации изображения: «/ favicon», относящийся к корень сервера. Этот метод работает, потому что некоторые браузеры были запрограммирован на поиск значков с использованием этого URI. Такой подход несовместимы с некоторыми принципами веб-архитектуры и в настоящее время обсуждается группой технической архитектуры W3C (TAG) как их сайт проблемы Data-36. Подводя итог проблемы: веб-архитектура разрешает администраторам сайтов. управлять своим пространством URI (для данного доменного имени), как они видят соответствовать. Соглашения, которые не представляют собой согласия сообщества и которые уменьшить параметры, доступные менеджеру сайта, не масштабируются и могут привести к конфликту (так как общеизвестного списка этих предопределенные URI).Одно практическое соображение иллюстрирует проблему: у многих пользователей есть веб-сайты, даже если у них нет своих доменное имя. Эти пользователи не могут указывать значки, используя второй метод, если они не могут писать в корень сервера. Однако они могут использовать метод один для указания значка, поскольку он более гибкий и не запретить менеджеру сайта использовать один значок в одном месте на сайте.

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

Использование профилей для определения терминов, таких как «значок»

Грубо говоря, профиль — это определение набора условия. В идеале профиль включает в себя как машиночитаемую информацию и удобочитаемую информацию. В HTML 4.01 и XHTML 1.0 несколько атрибуты, такие как атрибут rel , не имеют предопределенного набора ценности.Вместо этого автор может указать значения в соответствии с потребностями и затем используйте профиль, чтобы объяснить, что означают значения. В нашем случае мы рекомендуют авторам использовать значение «icon» и профиль, который поясняет, что «когда мы говорим« значок », мы имеем в виду« это значок »».

В методе 1 выше мы используем атрибут rel с ССЫЛКА НА САЙТ элемент и выберите профиль с атрибутом profile на элементе HEAD.

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

Ограничения

Есть несколько ограничений для описанных выше подходов, включая предпочтительный метод (поэтому ТЕГ продолжает работать по вопросу):

Подходы работают только в HTML или XHTML
Предпочтительный подход связывает значок с HTML-документом, не набор документов (т.е. сайт)
Предлагаемый профиль для определения значения «icon» не является признанный стандарт, что означает, что могут возникнуть проблемы с совместимостью на практике.
Нет стандарта (по крайней мере, определено HTML 4.01) для машиночитаемых профилей, которые позволить браузеру узнать, «это означает, что изображение является значком». Таким образом, браузер должен быть запрограммирован заранее, чтобы распознавать этот конкретный значение отн. . Для получения дополнительной информации об использовании профилей в HTML и XHTML см. GRDDL [GRDDL].

Список литературы

FAVICON-WIKIPEDIA: Favicon , Википедия, доступно на http: // ru.wikipedia.org/wiki/Favicon.
ГРДДЛ: Собирать Ресурсные описания диалектов языков , D. Хазаэль-Массиё, Д. Коннолли, редакторы, материалы, представленные командой W3C, 16 мая 2005 г., http://www.w3.org/TeamSubmission/2005/SUBM-grddl-20050516/. Последняя версия доступно по адресу http://www.w3.org/TeamSubmission/grddl/.
HTML401: HTML 4.01 Спецификация , Д. Рэггетт, А. Ле Хорс, И. Якобс, Редакторы, Рекомендация W3C, 24 декабря 1999 г., http: // www.w3.org/TR/1999/REC-html401-19991224. Последняя версия доступно по адресу http://www.w3.org/TR/html401.
СИТЕДАТА-36: Улучшение метаданных веб-сайта в robots.txt, w3c / p3p и favicon и т. д. , TAG, доступно по адресу http://www. w3.org/2001/tag/issues.html#siteData-36.
XHTML1: XHTML ™ 1.0 The Расширяемый язык разметки гипертекста (второе издание) , S. Пембертон, редактор, Рекомендация W3C, 1 августа 2002 г., http: // www.w3.org/TR/2002/REC-xhtml1-20020801. Последний версия доступна по адресу http://www.w3.org/TR/xhtml1.

Благодарности

Следующие участники группы QA Interest Group и сотрудники W3C имеют внесли значительный вклад в содержание этого документа: Доминик Хазаэль-Массье (W3C), Крис Лилли (W3C) и Оливье Теро (W3C).

Руководство для новичков по добавлению значка на свой веб-сайт

Вы можете встретить термин favicon, когда речь идет о веб-дизайне и разработке.Но что это такое? Что ж, в этой статье мы ответим на ваш вопрос и покажем, как добавить значок на свой сайт. Давайте начнем!

Что такое Favicon и почему он важен?

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

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

Как добавить значок на свой сайт?

Выберите один из двух способов ниже, чтобы добавить значок на свой веб-сайт!

Разрешить браузерам автоматически создавать значок

Самый простой способ добавить значок на свой сайт — это загрузить его как .png или .ico из Файлового менеджера вашего хостинга . Для этого выполните следующие действия:

Подготовьте квадратное изображение в формате . png или .ico для логотипа вашего веб-сайта.
Если у вас уже есть файл .png и , используйте его. Однако конвертируйте изображение в формат .ico с помощью ConvertICo.com, если вам когда-нибудь понадобится.
Переименуйте изображение .png или .ico в favicon .
Большинство браузеров автоматически обнаруживают файл favicon.png и favicon.ico , расположенный в каталоге вашего веб-сайта, как значок вашего веб-сайта. Так что кодировать не нужно.
Получите доступ к папке public_html , зайдя в hPanel, затем File Manager -> Go To File Manager .
Загрузите файл favicon.png или .ico в папку public_html . Перезагрузите свой сайт, и вы увидите значок.

Загрузите обычное изображение и отредактируйте файл header.

php своей темы

Кроме того, если у вас есть изображение, отличное от формата .png или .ico (jpg, BMP, gif и т. Д.), Вы также можете использовать его в качестве значка своего веб-сайта. Однако вам необходимо изменить файл header.php в папке с используемой в данный момент темой. Для этого выполните следующие действия в hPanel.

Как только у вас будет квадратное изображение в качестве логотипа, перейдите в Диспетчер файлов -> Перейти в Диспетчер файлов -> public_html .
Загрузите изображение в папку public_html .
Вы можете сохранить исходное имя изображения или переименовать его в favicon . Рекомендуется переименовать значок, чтобы отличать его от других изображений.
Перейдите в папку wp-content -> themes . Затем войдите в папку с темой, которую вы используете в данный момент.
Откройте файл header. php и вставьте следующий синтаксис непосредственно перед концом тега :
```
  
```
Измените части / jpg и /favicon.jpg в соответствии с форматом и названием изображения, которое вы собираетесь использовать.
После сохранения изменений изображение должно отображаться как значок вашего веб-сайта.

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

Заключение

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

Вы можете добавить его автоматически, загрузив изображение .png или .ico с именем favicon в папку public_html . В качестве альтернативы вы можете загрузить обычное изображение (jpg, BMP, gif и т. Д.) И изменить файл header.php в папке с используемой в данный момент темой.

Было ли это руководство полезным? Оставьте комментарий ниже!

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

Как добавить значок на свой веб-сайт с помощью HTML

Часть серии: Как создать веб-сайт с помощью HTML

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

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

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

Значок — это небольшое изображение, которое находится на вкладке браузера слева от заголовка веб-страницы. На изображении ниже показано расположение значка.

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

Затем добавьте элемент (выделен ниже) в файл index.html прямо под элементом </code>. Теперь ваш код должен быть таким:</p><pre> <code> ... <title> Первый веб-сайт Сэмми ...

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

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

Что, зачем и как создавать фавикон для вашего веб-сайта

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

Я знаю, что мои Документы Google — это вкладки с синим блокнотом. Моя доска Trello — это вкладка с мини-доской Trello. Блоги HubSpot, о которых я говорю, — это вкладки со звездочками и так далее.

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

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

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

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

У Google один из самых узнаваемых значков. Вы можете увидеть разноцветную букву G в адресной строке моего браузера ниже.

Вы также можете видеть значки Gmail, Google Таблиц, Wiki HubSpot, Редактора Хемингуэя и других в моем списке закладок.

значка Favicons теперь появляются даже в результатах мобильного поиска Google. Вы можете увидеть результаты моего последнего поиска — «как часто следует поливать суккуленты» — ниже.

Почему значки значков имеют значение?

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

Обратите внимание в поисковой выдаче для мобильных устройств, что на веб-сайтах Joy Us Garden и Easy to Grow Bulbs есть значки цветов, а на сайте The Succulent Source — серый земной шар.Это не имеет особого смысла для сайта о суккулентах, не так ли? Это потому, что глобус — это значок по умолчанию, который Google Chrome устанавливает для веб-сайтов, для которых нет настраиваемого значка.

Если я быстро просматриваю страницу результатов, я, вероятно, решу изучить Joy Us Garden и Easy to Grow Bulbs вместо The Succulent Source по нескольким причинам. Они не только появляются первыми в поисковой выдаче, но и их значки, URL-адреса, заголовки страниц и мета-описания указывают на то, что они являются веб-сайтами, посвященными всем растениям и имеющими ответ на мой вопрос.

Теперь изобразите эти три веб-сайта во вкладках браузера на рабочем столе. Было бы гораздо проще запомнить пользовательские значки для Joy Us Garden и Easy to Grow Bulbs , чем значок по умолчанию для The Succulent Source . В море открытых вкладок я с большей вероятностью вернусь к вкладкам с настраиваемыми значками и проведу на этих сайтах больше времени.

Наконец, допустим, я нажимаю на каждый из этих сайтов. При посещении Joy Us Garden и Easy to Grow Bulbs я сразу замечаю, что пользовательские значки созданы на основе логотипов веб-сайта. Цветной логотип последнего показан ниже. Вы узнаете тюльпан как их значок.

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

Какой размер у фавикона?

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

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

16×16 : Размер значков браузера.
32×32 : размер значков ярлыков на панели задач.
96×96 : размер значков ярлыков на рабочем столе.
180×180 : размер значков Apple Touch.
300×300 : размер, требуемый Squarespace.
512×512 : размер, необходимый WordPress.

Теперь, когда мы понимаем, что такое значок, его назначение и разные размеры, давайте посмотрим, как его создать.

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

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

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

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

Вот почему вы хотите взять наиболее узнаваемую часть своего логотипа и сделать ее своим значком. Easy to Grow Bulbs сделал именно это, взяв тюльпан из своего логотипа и сделав его своим любимым значком.

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

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

Генераторы Favicon

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

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

Фавикон

Создать фавикон в Favikon очень просто. Вы просто загружаете изображение, обрезаете его, а затем загружаете получившийся значок в формате ICO или PNG. Ниже я загрузил значок ламы из The Noun Project .

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

Favicon.io

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

Вы можете скачать результат в форматах ICO и PNG и в нескольких размерах. Возможные варианты перечислены ниже:

android-chrome-192×192.png
android-chrome-512×512.png
apple-touch-icon.png
favicon-16×16.png
favicon-32×32.png
Фавикон.ico

Favicon.ico и генератор значков приложений

С помощью этого бесплатного инструмента вы можете загрузить изображение PNG или JPG и преобразовать его в форматы ICO и PNG еще большего размера.

Варианты загрузки перечислены ниже:

apple-icon-57×57.png
apple-icon-60×60.png
яблоко-значок-72×72.pnf
apple-icon-76×76.png
apple-icon-114×114.png
apple-icon-120×120.png
apple-icon-144×144.png
яблоко-значок-152×152.PNG
apple-icon-180×180.png
android-icon-192×192. png
favicon-32×32.png
favicon-96×96.png
favicon-16×16.png

Создав значок в желаемом формате, вы сохраните его в корневом каталоге своего сайта. Затем вы можете создать ссылку на файл в формате HTML, чтобы разместить значок на своем сайте.

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

Как добавить значок в HTML

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

Допустим, вы сохранили свой файл PNG как «favicon.ico». Затем вы должны добавить следующий фрагмент кода в любое место между тегами:

 
  
   png ">

Обратите внимание: : ваш значок не обязательно должен быть помещен в корневой каталог вашего сайта — это обычно бывает. Если вы сохранили его в другом месте, просто убедитесь, что атрибут href указан правильно. Поэтому, если вы сохранили его во вложенной папке с именем «images», вы должны ввести .

Теперь предположим, что вы создали несколько размеров значков. Вы можете загрузить их все на свой сайт, добавив строку кода для каждого размера в раздел вашего HTML-файла.Если вы создали, например, версию 16 x 16, 32 x 32, 48 x 48 и 180 x 180, вы должны добавить следующий фрагмент кода:

Создание вашего Favicon

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

Что такое фавикон? Примеры и как добавить его на свой веб-сайт

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

Где вы увидите Favicons

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

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

Менеджер закладок

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

Автозаполнение предложений поиска

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

в результатах поиска

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

История браузера

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

Фавиконы и SEO

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

Итак, как узнаваемость бренда и пользовательский опыт работают с иконками?

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

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

Вот как это выглядит, когда у вас нет значка, и вам нужно довольствоваться обычным заполнителем серого глобуса (подсказка: это четвертая вкладка на этом изображении):

Сколько из этих брендов вы знаете только по их иконкам?

Создание пользовательского фавикона

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

Изменение размера вашего Favicon

Фавикон выглядит таким крошечным — так каков размер изображения у фавикона? Значки значков различаются по размеру и обычно составляют от 16 × 16 пикселей до 192 × 192 пикселей.Однако у многих разработчиков веб-сайтов, таких как Wix и Squarespace, есть свои собственные рекомендации, поэтому стоит проверить систему управления контентом (CMS), которую вы используете для создания своего сайта.

Форматы типов файлов Favicon: ICO против PNG

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

Преимущество ICO: Все браузеры поддерживают ICO и обеспечивают обратную совместимость (например, если кто-то все еще использует IE 5, он все равно будет видеть ваш значок).
Преимущество PNG: Небольшой размер, совместим со всеми браузерами (за исключением некоторых старых версий IE) и высококачественное изображение.

Рассмотрите долю рынка веб-браузеров по данным W3Counter: более 65% пользователей предпочитают Chrome, 17,5% используют Safari, 5,6% используют Internet Explorer и Edge, 4,4% используют Firefox и менее 2% используют Opera. Если большинство пользователей используют Chrome и Safari, вы можете придерживаться типа файла PNG и размером 512 × 512 пикселей.

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

Вот несколько советов по созданию пользовательского значка для вашего сайта:

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

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

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

Выберите, на какой CMS построен ваш сайт, чтобы узнать больше о конкретных шагах:

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

1. Откройте меню настройки

Перейдите в панель управления WordPress и нажмите «Внешний вид»> «Настроить». Это открывает меню, в котором вы можете установить свою тему и настройки страницы, включая ваш значок.

2. Перейти к идентификации сайта

В этом разделе вы устанавливаете заголовок сайта, логотип и значок. WordPress предлагает начать с размера 512 × 512 пикселей, а затем каждый браузер использует соответствующий размер. Нажмите кнопку с надписью «Выбрать файл», чтобы добавить значок, или «Сменить изображение», чтобы заменить значок.

3. Загрузите ваш Favicon & Crop

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

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

1.

Перейдите в меню «Дизайн»

На панели управления Squarespace щелкните Дизайн. Это вызывает настройки сайта. Щелкните значок браузера.

2. Добавьте свой Favicon

Загрузите свое изображение, перетащив его или щелкнув и просмотрите свой рабочий стол, чтобы найти свой значок.Squarespace предлагает вам начать с изображения от 100 × 100 пикселей до 300 × 300 пикселей. Щелкните Сохранить. Вы можете проверить, как выглядит ваш значок, открыв свой сайт на отдельной вкладке, но он может появиться не сразу. Если он не появляется, попробуйте очистить кеш, а затем повторите попытку.

Как добавить значок на сайт Wix

1. Откройте меню настроек

На панели инструментов Wix нажмите «Настройки» в нижней части левого меню.Это откроет настройки вашего сайта, где вы можете загрузить свой значок. Нажмите «Управление» справа от опции «Фавикон».

2. Загрузите свой Favicon

Добавьте или обновите изображение, нажав соответствующую кнопку. Затем добавьте свой значок, перетащив его в окно. Wix предварительно покажет, как выглядит ваш значок на вкладке браузера. Стандарт — 16 × 16, но для дополнительного качества можно также использовать 48 × 48 пикселей, 96 × 96, 144 × 144 или 192 × 192.

Как добавить значок на веб-сайт Weebly или Square

1.Зайдите в Общие настройки

Важно проверить, какой редактор вы используете, чтобы узнать, как добавить значок на свой сайт Weebly или Square. Если вы создали веб-сайт для малого бизнеса (не интернет-магазин) и используете редактор сайтов Weebly, вам нужно перейти в Личный кабинет> Правка> Настройки> Общие.

Если у вас есть интернет-магазин через Weebly с Ecommerce by Square, вы, скорее всего, используете редактор Square, поэтому ваш процесс немного отличается. Щелкните Веб-сайт> Общие настройки.Вы увидите опцию Favicon посередине страницы.

2. Добавьте свой Favicon

Загрузите свой значок, как любое другое изображение. Редакторы Weebly и Square просто принимают изображение — вам не нужно нажимать кнопку сохранения. Редактор Square предлагает использовать изображение размером не более 64 × 64 пикселей. Вам необходимо опубликовать или переиздать свой сайт, чтобы значок вступил в силу.

Как добавить значок на сайт Shopify

1.Откройте свои темы, страница

Начните с панели инструментов Shopify, а затем щелкните свой Интернет-магазин> Темы. В разделе «Текущая тема» нажмите кнопку «Настроить».

2. Перейдите в настройки темы

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

3. Загрузите свой Favicon

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

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

1. Откройте редактор сайта

Начните с открытия редактора сайта GoDaddy.В правом верхнем углу меню нажмите «Настройки». Это открывает меню настроек сайта, где вы найдете опцию Favicon посередине меню.

2. Загрузите свой Favicon

Нажмите кнопку с надписью «Загрузить», чтобы добавить значок. GoDaddy предлагает изображения размером не более 180 × 180 пикселей. Нажмите кнопку с надписью «Готово», и все. После загрузки вы должны увидеть свое изображение в квадрате, но GoDaddy не включает предварительный просмотр того, как выглядит ваш значок в виде изображения вкладки браузера.Вы можете проверить это после того, как опубликуете свой сайт.

Часто задаваемые вопросы (FAQ)

Как я могу создать значок бесплатно?

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

Нужен ли значок?

Хотя значок «favicon» не является обязательным для веб-сайта, это небольшой и простой способ помочь с брендингом и улучшить UX. Фавикон облегчает пользователям распознавание и поиск сайта в списке закладок, архивах истории и на вкладках браузера. Помните о фавиконах при разработке своего веб-сайта.

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

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

Итог

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

Определите значок веб-сайта для результатов поиска

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

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

Реализация

Вот как сделать ваш сайт доступным для значка в результатах поиска:

Создайте значок в соответствии с рекомендациями.

Добавьте тег в заголовок вашей домашней страницы со следующим синтаксис:

Атрибуты

Атрибуты
`отн.`	Установите для атрибута `rel` одну из следующих строк: `ярлык` `значок` `яблоко-сенсорный значок` `apple-touch-icon-precomposed`
`href`	URL-адрес значка. URL-адрес может быть относительным путем ( `/smile.ico` ) или абсолютный путь ( `https://example.com/smile.ico` ). URL должен быть в том же домен в качестве домашней страницы.

отн.

Установите для атрибута rel одну из следующих строк:

ярлык
значок
яблоко-сенсорный значок
apple-touch-icon-precomposed

href

URL-адрес значка. URL-адрес может быть относительным путем ( /smile.ico ) или абсолютный путь ( https://example.com/smile.ico ). URL должен быть в том же домен в качестве домашней страницы.

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

Руководящие принципы

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

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

У вас может быть только один значок для вашего сайта, где сайт определяется именем хоста. За например, https://www.example.com/ и https: // code.example.com/ являются двумя разными сайтами и, следовательно, могут иметь два разных значка. Тем не мение, https://www.example.com/sub-site — это подкаталог сайта, и вы можете только установите один значок для https://www.example.com/ , который применяется к сайту и его подкаталоги.
И файл значка, и домашняя страница должны быть доступны для сканирования Google (т. Е. Они не могут быть заблокирован гуглить).
Чтобы помочь людям быстро идентифицировать ваш сайт при просмотре результатов поиска, убедитесь, что ваш значок является визуальным представителем бренда вашего веб-сайта.
Ваш значок должен быть кратным квадрату 48 пикселей, например: 48x48px, 96x96px, 144x144px. и так далее. Файлы SVG не имеют определенного размера. Любой действительный Поддерживается формат favicon. Google изменит масштаб изображения до 16×16 пикселей для использования в результаты поиска, поэтому убедитесь, что он хорошо выглядит в этом разрешении. Предупреждение : Не используйте значок 16×16 пикселей.
URL-адрес значка должен быть стабильным (не меняйте URL-адрес часто).
Google не будет показывать какие-либо значки, которые он считает неприемлемыми, включая порнографию или ненависть. символы (например, свастики). Если этот тип изображений обнаружен в значке, Google заменяет его значком по умолчанию.

Пользовательский агент Google Favicon

Google Favicon — это пользовательский агент для загрузки значков, определенных веб-сайтами. Это маломасштабный поисковый робот: он может время от времени посещать домашнюю страницу вашего сайта в зависимости от сигналы, собранные во время индексации или инициированные по запросу пользователя.Чтобы запросить, чтобы Google Favicon пользовательский агент просканирует вашу страницу, вы можете запросить индексация домашней страницы вашего сайта. Обновления могут появиться в поиске через несколько дней или дольше. Результаты.

Сканер Google Favicon игнорирует правила robots.txt при запросе сканирования. пользователем.

Что такое изображение значка и как добавить его на свой веб-сайт

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

Что такое значок значка

Значок — это небольшой значок размером 16×16 пикселей, используемый в веб-браузерах для представления веб-сайта или веб-страницы. Сокращенно от «избранного значка», значки чаще всего отображаются на вкладках в верхней части веб-браузера, но они также находятся на панели закладок вашего браузера, в истории и т. Д.В некоторых случаях, например в Google Chrome, они даже появляются на главной странице вашего браузера. Другими словами, значок служит значком вашего веб-сайта или визуальным знаком, с помощью которого можно идентифицировать ваш веб-сайт в Интернете.

Почему значки значков

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

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

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

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

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

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

Размер: Оптимальный размер для создания значка — 16×16 пикселей, т.е. размер, в котором они обычно отображаются.Однако иногда они могут появляться и в более крупных размерах (например, 32×32 пикселя). Если вам нужна помощь в подборе нужного размера для вашего изображения, попробуйте использовать инструмент Wix Image Resizer.

Файл: Предпочтительный формат файла для значка — JPEG или PNG.

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

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

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

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

Художник и иллюстратор Адам Дж.Веб-сайт Курца Wix — отличный пример простого дизайна значка с его отчетливой желтой звездой. Другой пример — значок дизайнера ювелирных изделий и пользователя Wix Иларии Бонард i , состоящий из трех простых точек.

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

Для веб-сайта модного бренда Sorry’s Wix значок X является продолжением того же смелого черно-белого визуального языка, что и их одежда и логотип.Точно так же в значке eBay цвета бренда сочетаются с маленьким значком сумки для покупок, что идеально передает дух сайта.

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

Веб-сайт Wix некоммерческой организации Arte использует букву A из своего логотипа в качестве значка с добавленным неоново-зеленым фоном для привлечения внимания.Кроме того, на фавиконе, украшающем бруклинский веб-сайт Red Fern’s Wix, вообще нет текста. Вместо этого он использует только значок в виде листа, что обеспечивает максимальную читаемость.

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

Обратите внимание на то, что значок Google немного отличается от его логотипа, но при этом отражает те же дизайнерские ценности. На значке отображается только знакомая буква G, при этом все четыре фирменных цвета плавно объединены в одну букву. Другой подход был использован иллюстратором и пользователем Wix Charlotte Me i , которая использует инициалы своего нарисованного вручную логотипа в качестве своего значка.

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

Как добавить значок на свой сайт Wix

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

Вы можете легко изменить свой значок на своем сайте Wix:

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