{"draftJsState":{"blocks":[{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Пользователи запоминают картинки гораздо лучше, чем текст. Если человек видит в поисковой выдаче знакомый фавикон, он кликает именно на него. Хотя маленькая иконка рядом со сниппетом не влияет на оптимизацию сайта, она добавляет ему индивидуальности, формирует доверие к ресурсу и играет роль в увеличении узнаваемости бренда. Кроме того, фавикон помогает ориентироваться среди множества открытых вкладок, и находить нужные сайты без необходимости перебирать все страницы.","type":"unstyled","key":"b7mto"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Поэтому в поисковой выдаче почти не встречаются сниппеты без фавикона. Тем более, что создать его не так трудно. Разберемся, как сделать иконку и установить ее на сайт для десктопных браузеров, устройств на Android и IOS.","type":"unstyled","key":"ahe4g"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Что такое иконка сайта или фавикон","type":"header-two","key":"2irsj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Фавикон или иконка сайта – это маленький логотип сайта в интернете. Он появляется на вкладках, рядом с названием сайта в поисковой выдаче, в истории браузера и закладках. Это помогает сайту быть более узнаваемым, а пользователям – легко находить его визуально.","type":"unstyled","key":"9tvvc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Обычно фавикон содержит полный или упрощенный логотип сайта или первую букву бренда. Иногда используют изображение, подходящее тематике ресурса, без привязки к конкретной компании.","type":"unstyled","key":"7f5vr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Если используется логотип бренда или сайта, он должен быть адаптирован к формату фавикона. Так как это очень маленькое изображение, все его детали должны быть четкими, а сама картинка должна быть контрастной, чтобы выделяться на фоне светлой и темной темы браузера.","type":"unstyled","key":"5gbb9"},{"data":{"image":{"id":"6347a24f368cb663703cf351"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"cm7ln"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Зачем нужен фавикон","type":"header-two","key":"3pifp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Google не позволяет использовать иконки рядом со сниппетами, а вот в поисковой выдаче Яндекса сайты без фавикона уже почти не встречаются. Иконка выделяет ресурс среди конкурентов, показывает тематику ресурса – это еще один способ уникализации сайта в выдаче. Кроме этого, у иконок есть ряд других преимуществ.","type":"unstyled","key":"ccsma"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Привлечение внимания пользователей. Качественный фавикон привлекает внимание пользователей к сниппету в поисковой выдаче.","type":"unstyled","key":"c6q0i"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Увеличение запоминаемости сайта. Фавикон – это такая же часть айдентики, как и логотип, визитка и другие элементы. Она работает на узнаваемость и запоминаемость.","type":"unstyled","key":"4dseg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Упрощение поиска. Благодаря иконке проще найти нужный сайт среди множества вкладок или в истории браузера. Пользователю не придется читать названия всех вкладок, он просто пробежится глазами по иконкам и найдет нужную.","type":"unstyled","key":"bob16"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Формирование доверия к сайту. Фавикон – это часть айдентики, его наличие повышает доверие пользователя к ресурсу. Сайт без иконки – как компания без логотипа, выглядит не презентабельно и подозрительно. Качественное оформление ресурса, наоборот, вызывает положительный отклик.","type":"unstyled","key":"d2lie"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Увеличение кликабельности. Изображение привлекает внимание, увеличивает запоминаемость сайта и упрощает поиск. Все это приводит к повышению кликабельности сниппета.","type":"unstyled","key":"bc2ep"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Фавикон – это маленький элемент, который играет большую роль в восприятии сниппета и создании положительного впечатления о сайте. Создание иконки в современных интернет-реалиях необходимо.","type":"unstyled","key":"adtr5"},{"data":{"image":{"id":"6347a24f339dd62fb5b59b63"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"abihf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Картинка для фавикона","type":"header-two","key":"697ke"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Картинка для иконки может совпадать с логотипом компании. Но если логотип не подходит, нужно выбрать другой вариант. Чтобы картинка хорошо смотрелась, она должна отвечать следующим требованиям:","type":"unstyled","key":"4nbmb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Подходящая тематика. Картинка должна соответствовать теме ресурса, и иметь сходную с ним цветовую гамму. Пробегая глазами по вкладкам или сниппетам, пользователь скорее обратит внимание на соответствующие его запросу иконки.","type":"unstyled","key":"6if4g"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Оригинальность. Изображение должно соответствовать тематике сайта, но в то же время выделяться среди конкурентов. Для этого можно использовать оригинальные картинки или выделяющиеся цвета. Важно сохранять баланс между оригинальностью и тематической направленностью.","type":"unstyled","key":"5nrp8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Простота. Изображение должно легко распознаваться. Обилие деталей и цветов перегрузит фавикон. Он должен быть простым и состоять из минимального количества элементов.","type":"unstyled","key":"5a1vm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Иногда бывает сложно оценить иконку самостоятельно. Постарайтесь посмотреть на нее непредвзято, и ответить на вопросы:","type":"unstyled","key":"4v26u"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Что изображено на иконке? Пользователи должны понимать, что изображено на картинке, она должна легко распознаваться.","type":"unordered-list-item","key":"5hokq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Выделяется ли иконка среди конкурентов? Посмотрите на иконки конкурентов – ваша должна отличаться от них.","type":"unordered-list-item","key":"de98d"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Какие ассоциации вызывает иконка? Если иконка не вызывает ассоциаций с тематикой сайта, вашим брендом или продуктом, то ее лучше заменить.","type":"unordered-list-item","key":"beplo"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Вы можете самостоятельно ответить на эти вопросы или задать их знакомым. Чем больше мнений удастся собрать, тем точнее получится оценить качество иконки. Простая и оригинальная иконка, подходящая к тематике сайта, будет эффективно работать на свои задачи.","type":"unstyled","key":"e42m7"},{"data":{"image":{"id":"6347a24f99ff664bc01494ea"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"9l8sp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Характеристики иконок","type":"header-two","key":"fj4h5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Иконки должны быть корректными не только с точки зрения пользователя, но и с технической точки зрения. К техническим характеристикам относятся размер изображения и его формат.","type":"unstyled","key":"4ec"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Формат. Есть несколько форматов изображений, которые могут использоваться для фавикона:","type":"unstyled","key":"6c5b"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":".ico (.icns в macOS) – популярный масштабируемый формат специально для хранения фавикона, поддерживается всеми браузерами;","type":"unordered-list-item","key":"8f4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":".svg – формат масштабируемых векторных изображений без конкретного размера, наиболее оптимален для фавикона, но не поддерживается старыми версиями браузеров;","type":"unordered-list-item","key":"2qseg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":".png – растровый формат хранения графической информации.","type":"unordered-list-item","key":"29l3q"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Размер. Разные браузеры требуют разного размера в зависимости от места иконки: сниппета, вкладки, адресной строки и т.д. Например, Яндекс предлагает использовать изображение размером 120×120, 32×32 или 16×16 пикселей. Размер 120×120 пикселей позволяет сделать фавикон более четким и заметным. Google просит не добавлять значки размером 16x16 пикселей – картинка должна быть квадратной и иметь размер, кратный 48 пикселям: 48x48, 96x96, 144x144 пикселей и т.д.","type":"unstyled","key":"2fc2"},{"data":{"image":{"id":"6347a24f53ce1f6f31dcd963"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"9gamj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Как сделать иконку для сайта HTML","type":"header-two","key":"2utj3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Чтобы сделать фавикон, нужно нарисовать иконку, преобразовать ее в нужный формат и загрузить на сайт. С отрисовкой изображения и его конвертацией могут помочь дизайнеры, а с загрузкой на сайт – программисты. Но если таких специалистов нет, можно установить фавикон самостоятельно.","type":"unstyled","key":"9c1ac"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Визуальная составляющая","type":"header-three","key":"4133f"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Нарисовать фавикон можно в графическом редакторе или в специальной программе. Если у вас есть навыки работы в графическом редакторе, вы можете воспользоваться, например, программами Sketch, Adobe Illustrator или Photoshop. Не обязательно рисовать иконку самостоятельно с нуля – вы можете взять на стоковом сайте готовый логотип, и доработать его под себя.","type":"unstyled","key":"3lp07"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Если навыков рисования нет, воспользуйтесь стоковыми иконками и онлайн-сервисами для создания фавикона.","type":"unstyled","key":"f222"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"favicon.cc позволяет нарисовать простое изображение во встроенном онлайн-редакторе. Инструменты ограничены: кисть, ластик и выбор цвета. Готовую картинку можно скачать только в формате .ico.","type":"unstyled","key":"2j93e"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"xiconeditor.com позволяет нарисовать иконку размером 16x16, 24x24, 32x32, 64x64 пикселей. Есть кисть, карандаш, ластик, заливка и выбор цвета. Процесс можно отслеживать в окне предпросмотра.","type":"unstyled","key":"c9ab7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"logomakr.com – это упрощенный редактор иконок. Вы можете выбрать один или несколько вариантов из банка изображений, добавить к ним геометрические формы, текст, крутить картинку и изменять ее пропорции.","type":"unstyled","key":"8e2h8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"logomaker.com предлагает выбрать сферу деятельности, вписать название компании и слоган. Ресурс сгенерирует возможные иконки и предложит приобрести понравившиеся.","type":"unstyled","key":"5ks0s"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"ru.onlinelogomaker.com содержит большой набор иконок на разные тематики. В редакторе их можно доработать, объединить, покрутить, изменить цвет, дополнить другими формами.","type":"unstyled","key":"1b2lf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"favicon.by/collection содержит колекцию бесплатных логотипов в формате .ico, которые можно скачать одним нажатием.","type":"unstyled","key":"5jdcg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"streamlinehq.com хранит иконки на любую тематику. Они удобно разбиты на категории для легкого поиска.","type":"unstyled","key":"d5tnn"},{"data":{"image":{"id":"6347a24fbbdc50669a97af0c"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"42kfn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Подготовка фавикона","type":"header-three","key":"dn58m"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Перед добавлением картинки на сайт, его стоит сжать для уменьшения веса. Это можно сделать с помощью сервисов для сжатия картинок, например, iloveimg.com/ru. Онлайн-сервис уменьшает вес изображений без потери качества.","type":"unstyled","key":"b1psg"},{"data":{"image":{"id":"6347a24f6d30c46d9783aa0f"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"133fm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Как подключить фавикон к сайту","type":"header-two","key":"sgbl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Когда иконка готова, ее нужно подключить к сайту. После этого она начнет отображаться в сниппетах и вкладках сайта.","type":"unstyled","key":"dfj9n"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Все браузеры поддерживают формат .iсo. Чтобы подключить иконку такого формата, нужно поместить изображение в корень сайта:","type":"unstyled","key":"4059v"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"43a2p"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"6oa7i"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"7iqe6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В корне проекта нужно разместить только favicon.ico, дополнительные иконки можно разместить в любом месте проекта.","type":"unstyled","key":"5jreq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"1425u"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Чтобы добавить иконку в формате .svg, нужно уточнить формат:","type":"unstyled","key":"8rcfh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"5pr6l"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"5mci3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"d63vp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"f86q9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":32,"offset":85,"style":"BOLD"}],"text":"Чтобы разным разделам сайта назначать разные фавиконы, скопируйте путь к изображению https://sitename.ru/favicon.ico. При использовании одного фавикона путь к нему указывать не нужно. Скопированную ссылку на файл нужно добавить в HTML-код главной:","type":"unstyled","key":"6ho47"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"963dn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":3,"offset":8,"style":"ITALIC"},{"length":4,"offset":71,"style":"ITALIC"},{"length":13,"offset":105,"style":"ITALIC"}],"text":"Атрибут rel указывает на тип ресурса. Большинство браузеров распознают icon, для Internet Explorer нужен shortcut icon.","type":"unstyled","key":"8cj9k"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"\"=\"\" type=\"image/x-icon\">","type":"blockquote","key":"4cavm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"5b8i5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":12,"offset":63,"style":"ITALIC"},{"length":24,"offset":80,"style":"ITALIC"},{"length":9,"offset":117,"style":"ITALIC"}],"text":"От формата файла зависит тип передаваемых данных. Для .ico это image/x-icon или image/vnd.microsoft.icon, для .png — image/png и аналогично для других форматов.","type":"unstyled","key":"48eaf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":22,"offset":83,"style":"ITALIC"}],"text":"Для мобильных устройств часто прописывают отдельные фавиконы, указывая, к примеру, rel=\"apple-touch-icon\".","type":"unstyled","key":"fu7tt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"После установки кода нужно подождать, пока роботы поисковых браузеров проиндексируют иконку – это может занять время.","type":"unstyled","key":"flbeu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Как установить разные фавиконы для отдельных страниц","type":"header-two","key":"aie49"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Чтобы установить разные фавиконы на разных разделах, иконку для главной страницы (и для тех страниц, на которых эта иконка будет использоваться) назовите favicon.ico, а для остальных разделов – названия по этим разделам.","type":"unstyled","key":"grji"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В коде нужной страницы пропишите путь к другому фавикону раздела:","type":"unstyled","key":"eh6cg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"ddqge"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Фавикон на Android","type":"header-two","key":"b8vmr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Указать фавикон и его расположение для Android можно через спецификацию Web App Manifest. В ней описан простой JSON-файл, в котором указаны иконки, цветовая палитра, ориентация экрана, способ запуска сайта и т.д.","type":"unstyled","key":"45i9u"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Манифест указывают с помощью:","type":"unstyled","key":"b1acl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"25m5a"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"1vb2f"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"С помощью манифеста пользователь получит качественный фавикон, который можно вынести на главный экран смартфона.","type":"unstyled","key":"56s5p"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Указать его цвет и фон можно с помощью метаданных в HTML:","type":"unstyled","key":"av4np"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"90rm8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"2tjvs"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Фавикон для Apple","type":"header-two","key":"b7tve"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Для фавикона на iOS можно использовать иконку размером 57x57 или 180x180 пикселей в формате .png. В документации Safari такие иконки называются Web Clips. Предполагается, что они должны быть непрозрачными, а углы будут автоматически скругляться при добавлении ярлыка на главный экран.","type":"unstyled","key":"e92ek"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":20,"offset":49,"style":"ITALIC"}],"text":"Чтобы сделать такой фавикон, нужно указать в rel apple-touch-icon.png.","type":"unstyled","key":"fuaht"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":21,"offset":213,"style":"ITALIC"}],"text":"Apple также поддерживает для закрепленных вкладок в Safari и кнопок на Touch Bar в MacBook иконки с монохромной векторной маской и цветом, который ее заполнит при наведении. Такой фавикон можно настроить с помощью link rel=\"mask-icon\":","type":"unstyled","key":"78duk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"1as8d"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"74sq8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Как установить фавикон на платформе WordPress","type":"header-two","key":"6bh1u"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В версиях WordPress от 4.3 и выше фавиконы добавляются из административной панели.","type":"unstyled","key":"d5qvb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Откройте админку.","type":"ordered-list-item","key":"e8bh6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Нажмите на «Внешний вид» > «Настроить» > «Свойства вашего сайта».","type":"ordered-list-item","key":"fpf3h"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"3. Нажмите на «Выберите иконку сайта», загрузите подготовленное изображение и подтвердите свой выбор.","type":"unstyled","key":"4562c"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"4. Нажмите «Опубликовать».","type":"unstyled","key":"94jhf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Лучше всего сначала протестировать изменения на локальном сайте разработки. Если ошибки не обнаружатся – повторите аналогичную схему в основном меню.","type":"unstyled","key":"c68n2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Как установить фавикон в 1С-Битрикс","type":"header-two","key":"k8qu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Порядок размещения фавикона в Битриксе изменяется в зависимости от количества шаблонов. Если на сайте используется один шаблон, а собственный фавикон отсутствует, то установить его несложно:","type":"unstyled","key":"futvq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Подготовьте иконку и переименуйте ее в ico.","type":"ordered-list-item","key":"26sbb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Откройте админку.","type":"ordered-list-item","key":"292fn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Перейдите в раздел «Контент» > «Структура сайта» > «Файлы и папки».","type":"ordered-list-item","key":"4e9rm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"4. Найдите в разделе «Файлы и папки» файл favicon.ico и замените его на свой файл.","type":"unstyled","key":"d2o1n"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"После этого фавикон сайта сразу изменится. Если этого не произошло, возможно, вы что-то сделали не по инструкции, или старая иконка закэширована браузером. Лучше всего протестировать фавикон перед загрузкой изменений на сайт.","type":"unstyled","key":"1at1f"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"3t47"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Если в файлах корневой папки несколько шаблонов, приоритет иконки из шаблонов выше, чем у файла favicon.ico в корне сайта. Для доступа к редакторской панели шаблонов сайта нужны дополнительные права доступа, их дает администратор. Тогда порядок действий следующий:","type":"unstyled","key":"9vg2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Переименуйте ваш файл в ico.","type":"ordered-list-item","key":"ddept"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Подгрузите файл в папку шаблона: «Контент» > «Структура сайта» > «Файлы и папки» > «bitrix» > «templates» > «имя шаблона» > «файл».","type":"ordered-list-item","key":"16mdj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Посмотрите есть ли в коде шаблона в блоке строка /favicon.ico\" />","type":"ordered-list-item","key":"4hf4p"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Если такой строки нет, добавьте ее.","type":"ordered-list-item","key":"cv2ov"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Сохраните шаблон.","type":"ordered-list-item","key":"2ggtd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Теперь новый фавикон должен появиться вместо старого. Если он не появился, возможно, вы что-то сделали не так, или предыдущий фавикон закэширован браузером. Можно подождать обновления информации или добавить к названию файла внутри шаблона через вопросительный знак код v=2.","type":"unstyled","key":"bja52"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Как проверить, установился ли фавикон","type":"header-two","key":"elpem"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Чтобы проверить, появился ли фавикон, вбейте в Яндексе название своего сайта. Если фавикон появился рядом со сниппетом, значит, вы все сделали правильно. Можно проверить корректность установки в онлайн-режиме, например, на сайте realfavicongenerator.net.","type":"unstyled","key":"7nel0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":50,"offset":81,"style":"BOLD"},{"length":61,"offset":152,"style":"BOLD"},{"length":1,"offset":214,"style":"BOLD"},{"length":1,"offset":131,"style":"ITALIC"}],"text":"Также можете проверить доступность иконки по ее адресу, вбейте в поиск «Яндекса» http://favicon.yandex.net/favicon/адресвашегосайта. или в поиск Google https://www.google.com/s2/favicons?domain=адресвашегосайта.ru. Не забудьте заменить «адрес вашего сайта» на ссылку на ваш сайт.","type":"unstyled","key":"6m0s3"},{"data":{"image":{"id":"6347a25353ce1f6f31dcdac2"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"8p3l3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Распространенные ошибки","type":"header-two","key":"ff11o"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Если фавикон не отображается после установки, значит, была совершена ошибка.","type":"unstyled","key":"5j3ja"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Страница закэширована браузером. Очистите кэш и обновите страницу.","type":"ordered-list-item","key":"8grhi"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Неверный формат иконки. Проверьте совместимость формата и наличие всех необходимых атрибутов в коде фавикона.","type":"ordered-list-item","key":"udbr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Код размещен в неверном месте. Код фавикона следует разместить в блоке .","type":"ordered-list-item","key":"dga4e"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Файл robots.txt содержит запрет на индексацию фавикона. Чтобы снять запрет, нужно исправить Dissalow: favicon.ico на Allow: favicon.ico.","type":"ordered-list-item","key":"d7u9e"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Запрещенное изображение иконки. Иконка не должна содержать запрещенные символы, оскорбительные картинки и слова, материал 18+.","type":"ordered-list-item","key":"1em5e"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Низкое разрешение. Поисковые системы могут игнорировать иконки с низким разрешением.","type":"ordered-list-item","key":"5kqsl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Неуникальная картинка. Иконки, скопированные с других ресурсов, могут игнорироваться поисковиками.","type":"ordered-list-item","key":"aoh1h"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Поисковая система еще не проиндексировала фавикон. Индексация может занять время.","type":"ordered-list-item","key":"f7gji"},{"data":{"image":{"id":"6347a254da61a65e429a6c81"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"7l8re"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Как Яндекс индексирует фавиконы","type":"header-two","key":"35gh1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Фавикон может появиться в поисковой выдаче спустя несколько дней или недель после установки. Это связано с тем, что Яндекс индексирует файлы в течении месяца после загрузки на сайт. Для индексации поисковые роботы сначала должны найти ссылку на картинку в коде, скачать пиктограмму в свою лабораторию, проверить ее и добавить в общую базу иконок.","type":"unstyled","key":"p6qk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Чтобы фавикон проиндексировался как можно быстрее, пропишите ссылку на него в коде главной страницы сайта. Также проверьте ответ Яндекса – сервер должен вернуть значение 200 ОК. Внимательно проверьте, нет ли запрета индексации в robots.txt.","type":"unstyled","key":"34pvi"},{"data":{"image":{"id":"6347a254abd8880ce356febc"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"2f1eo"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Заключение","type":"header-two","key":"3onkm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Фавикон – это маленькая иконка сайта, которая отображается на вкладках браузера или рядом со сниппетом в поисковой выдаче. Он привлекает внимание пользователей, увеличивает запоминаемость сайта и упрощает поиск.","type":"unstyled","key":"715v6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Для создания фавикона можно использовать логотип компании или тематическую картинку. Ее можно заказать у дизайнера, а можно сделать в онлайн-редакторе или скачать на стоке. Для этого подходят форматы .ico, .png, .svg. и размером от 16х16 пикселей. После создания иконки ее можно сжать в онлайн-сервисе, и размещать на сайте.","type":"unstyled","key":"1h4g6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Фавикон загружают в блок в корневом каталоге сайта. Если нужно создать несколько изображений для разных страниц сайта, в коде нужных страниц пропишите путь к фавиконке раздела.","type":"unstyled","key":"e7qlv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Указать фавикон и его расположение в Android можно через спецификацию Web App Manifest. На IOS, нужно прописать в rel “apple-touch-icon.png”. Платформы WordPress или 1С-Битрикс позволяют добавить фавикон через административную панель.","type":"unstyled","key":"fb5h6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Чтобы проверить корректность установки фавикона, можно вбить название сайта в поиске Яндекса и посмотреть, выдал ли поиск сниппет. Также можно воспользоваться специальным сервисом – realfavicongenerator.net.","type":"unstyled","key":"f6j0t"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Имейте ввиду, что фавикон появится в поисковой выдаче спустя несколько дней или недель после установки – за это время поисковые роботы Яндекса проиндексируют сайт.","type":"unstyled","key":"ab1vn"},{"data":{"image":{"id":"6347a256bbdc50669a97b32d"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"cgfaf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"____________________________________","type":"unstyled","key":"8nced"},{"data":{},"depth":0,"entityRanges":[{"key":0,"length":13,"offset":61}],"inlineStyleRanges":[],"text":"Еще больше статей вы можете прочитать в нашем блоге на сайте Edison Studio!","type":"unstyled","key":"35sei"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"marker","key":"7bjITEU3HNJKEQ3BN0H1"}],"entityMap":{"0":{"data":{"href":"https://edisonstudio.ru/","url":"https://edisonstudio.ru/"},"mutability":"MUTABLE","type":"LINK"}}},"mentions":[]}