Содержание
Как создать фавикон самостоятельно
30463 2
How-to | – Читать 9 минут |
Прочитать позже
ЧЕК-ЛИСТ: ТЕХНИЧЕСКАЯ ЧАСТЬ — ИСПРАВЛЕНИЕ
Секрет успешного сайта — в мелочах, которые владельцы часто упускают. Для эффективного продвижения недостаточно одного SEO: сейчас все больше внимания уделяется тонкостям — элементам дизайна, которые ненавязчиво попадают во внимание читателя и быстро запоминаются. Один из таких элементов — favicon. В статье рассмотрим создание favicon различными способами.
Содержание
- Что такое favicon для сайта
- Зачем нужен favicon
— Технические требования к фавиконам - Как создать favicon онлайн
- Как добавить фавикон на сайт
- Распространенные ошибки
- FAQ
Заключение
Что такое фавикон для сайта
Favicon — это небольшая иконка, квадратное изображение с логотипом сайта, которое отображается во вкладке браузера и в закладках перед названием страницы:
Пример фавикона на сайте
А также в истории просмотров:
Фавиконы сайтов в истории браузера
В некоторых версиях браузера фавикон также появляется в адресной строке перед URL сайта. В выдаче Яндекса также отображаются фавиконы:
Фавиконы сайтов в Яндексе
Кроме логотипа, в фавикон для сайта иногда вставляют значок, символизирующий тематику ресурса, связанный с названием сайта, первую букву названия компании и т.п. Размер фавикона обычно составляет 32х32 или 16х16 пикселей.
Зачем нужен favicon
Иконка сайта играет важную роль в брендинге сайта. Лаконичная картинка помогает пользователю запомнить ресурс и обеспечивает его оригинальность.
Сайт без фавикона выглядит, как минимум, серо по сравнению с другими: вместо запоминающейся иконки стоит стандартный значок Windows, который использовался еще до изобретения плоского экрана.
Пример сайта без фавикона
Следует установить фавикон и по другим причинам, обеспечивающим ряд других преимуществ:
Доверие. Пользователь обычно обращает внимание в первую очередь на то, как сделан сайт. Насколько профессионально разработан дизайн и учтены детали. При прочих равных сайт без этой мини-иконки не будет вызывать такого доверия, как его конкурент, который учел эту небольшую деталь.
Узнаваемость. Favicon — это удобный поиск. Когда пользователь ищет нужную ему вкладку в браузере, страницу из закладок браузера или истории, первое, что бросается в глаза, — это иконка. Никто не обращает внимания на текст. Представим, что вы что-то ищите, когда в браузере открыто 20 вкладок: кроме иконки не будет видно практически ничего.
Фавиконы сайтов во вкладках браузера
Продвижение. Это преимущество применимо только к поисковику Яндекс. Страница без фавикона в поисковой выдаче просто сливается с белым фоном и никак не выделяется среди остальных. В топе выдачи редко можно встретить страницу без иконки.
Сайт без фавикона в выдаче Яндекса
Проверка фавикона в аудите Serpstat
Хотите узнать, как найти и обезвредить ошибки на сайте с помощью Serpstat?
Заказывайте бесплатную персональную демонстрацию сервиса, и наши специалисты вам все расскажут! 😉
Оставить заявку! |
Технические требования к фавиконам
В 2022 году, помимо стандартных иконок для браузеров, используют фавиконы для Android и Apple. Учитывая то, что браузеры загружают фавиконы в фоновом режиме, их большой размер не окажет негативного влияния на скорость загрузки сайта.
Формат фавикона различается в зависимости от того, для чего он предназначен:
- для устаревших браузеров: favicon.ico такого размера:16х16, 32×32;
- для современных браузеров: один фавикон SVG формата для светлой и темной версии. Большинство браузеров поддерживают SVG формат, который более эффективен для больших изображений;
- для устройств Apple: фавикон размера 180×180 в формате PNG;
- для устройств Android: фавикон 192×192 в формате PNG, используемый на главной странице сайта и 512×512 — для загрузки прогрессивных WEB-приложений.
Узнать, какие именно браузеры поддерживают современные форматы фавиконов можно с помощью сервиса Caniuse:
Сервис Can I Use для проверки поддержки различных фавиконов браузерами
Как создать фавикон онлайн
Чтобы сделать фавикон для сайта, не нужно быть дизайнером и иметь профессиональные навыки. Можно самостоятельно создать фавикон за пару минут с помощью специальных сервисов.
Все подобные сервисы предельно просты в использовании. Мы собрали несколько инструментов, с помощью которых вы быстро и бесплатно сделаете фавикон.
Pr-Cy.ru
Простой и понятный генератор: фавикон создается в два шага. Выбираем картинку на компьютере и превращаем ее в мини-логотип.
Be1.ru
Есть возможность задать разрешение картинки (16х16 или 32х32 пикселя). Просто выберите картинку и нажмите «Конвертировать».
Favicon.by
Подходит для тех, кто хочет самостоятельно создать favicon: генератор позволяет нарисовать иконку своими руками или загрузить уже готовый вариант с компьютера или стороннего сайта.
Logaster.ru
Многофункциональный онлайн-сервис дает возможность подобрать нужную тематику иконки в зависимости от сферы ее применения (спорт, бизнес, автомобили и т. д.), цветовую гамму логотипа. Сервис сгенерирует несколько разных, но оригинальных вариантов с учетом всех параметров. Также можно найти иконку, подкорректировать ее или скачать уже готовую.
Вы также можете заказать фавикон у дизайнера или сделать его в графическом редакторе, хотя это не самые дешевые и простые варианты.
Генератор фавикона Pr-Cy.ru
Как добавить фавикон на сайт
Чтобы картинка была видна на вкладке, ее нужно добавить с помощью файлового менеджера в корневой каталог сайта. Браузер сам найдет фавикон и выведет иконку на сайт. Для этого картинку нужно загрузить в формате 16х16. С автоматическим выводом формата 32х32 могут возникнуть трудности.
Однако для надежности при любом разрешении картинки рекомендуется вручную прописать вывод фавикона в HTML-коде страницы. Для этого:
Добавьте файл favicon.ico в корневую папку — каталог сайта.
Пропишите в коде HTML favicon в формате ico. Он выводится строкой shortcut icon:
<link href="http://ваш-сайт.ru/favicon.ico" type="image/x-icon"> <link rel="shortcut icon" href="http://ваш-сайт.ru/favicon.ico" type="image/x-icon">
Браузеры используют кэширование иконок, поэтому, если вам понадобится ее заменить, лучше поставить временный код:
<link rel="shortcut icon" href="http://www.yoursite.com/favicon.ico?v=2" />
Здесь значение v = 2 обозначает версию иконки. Увеличивайте его на единицу каждый раз, когда меняете картинку (v = 3, v = 4 и т.д.). Тогда браузер будет сразу отображать последнюю версию. После того, как вы определились с окончательным вариантом иконки, этот параметр можно смело удалять из кода.
Распространенные ошибки
Проверить, корректно ли работает фавикон в разных браузерах, можно используя онлайн-проверку для Яндекса и Google, доступную по указанным ниже ссылкам. Предварительно поменяйте «site. com» на название своего ресурса:
- Яндекс – https://favicon.yandex.net/favicon/site.com;
- Google – https://www.google.com/s2/favicons?domain=site.com
Проблемы в отображении фавикона могут быть связаны с такими причинами:
1. Отсутствует изображение фавикона в правильном формате в корневой папке сайта.
2. Неправильно прописан код фавикона на страницах ресурса.
3. Фавикон размыт или неуникален.
4. Файл с иконкой закрыт для сканирования поисковиками.
5. Сайт находится ниже 15 позиции в Яндекске — в этом случае фавикон не отображается.
6. Фавикон был загружен недавно — иногда на его отображение в выдаче может потребоваться несколько недель.
В каком формате сохранять favicon?
Стандартный фавикон, подходящий для всех версий браузеров, в том числе устаревших, сохраняется в формате ICO. Современные браузеры и мобильные устройства поддерживают также фавиконы PNG и SVG форматов.
Какого размера делать фавикон?
Стандартный размер фавикона 16×16 и 32×32. Для современных браузеров и мобильных устройств используются более крупные изображения:180×180, 192×192, 512X512.
Заключение
Favicon — это важный элемент любого сайта. Качественная, оригинальная картинка становится практически вторым лицом бренда. Фавиконы повышают узнаваемость сайта и ненавязчиво помогают пользователю запомнить ресурс, найти его среди множества других.
Чтобы создать иконку для сайта и установить ее, вам потребуется не более 10 минут. В сети достаточно много бесплатных онлайн сервисов с разным функционалом и выбором картинок, некоторые предлагают создать логотип самостоятельно.
«Список задач» — готовый to-do лист, который поможет вести учет
о выполнении работ по конкретному проекту. Инструмент содержит готовые шаблоны с обширным списком параметров по развитию проекта, к которым также можно добавлять собственные пункты.
Начать работу со «Списком задач» |
Serpstat — набор инструментов для поискового маркетинга!
Находите ключевые фразы и площадки для обратных ссылок, анализируйте SEO-стратегии конкурентов, ежедневно отслеживайте позиции в выдаче, исправляйте SEO-ошибки и управляйте SEO-командами.
Набор инструментов для экономии времени на выполнение SEO-задач.
Получить бесплатный доступ на 7 дней
Оцените статью по 5-бальной шкале
4.78 из 5 на основе 16 оценок
Нашли ошибку? Выделите её и нажмите Ctrl + Enter, чтобы сообщить нам.
Рекомендуемые статьи
How-to
Анастасия Сотула
Что нужно знать об оптимизации сайта под голосовой поиск
How-to
Анастасия Сотула
Как обновить версию протокола TLS на сайте
How-to
Анастасия Сотула
Что такое крауд-ссылки и крауд-маркетинг
Кейсы, лайфхаки, исследования и полезные статьи
Не успеваешь следить за новостями? Не беда! Наш любимый редактор подберет материалы, которые точно помогут в работе. Только полезные статьи, реальные кейсы и новости Serpstat раз в неделю. Присоединяйся к уютному комьюнити 🙂
Нажимая кнопку, ты соглашаешься с нашей политикой конфиденциальности.
Поделитесь статьей с вашими друзьями
Вы уверены?
Спасибо, мы сохранили ваши новые настройки рассылок.
Сообщить об ошибке
Отменить
Создать Favicon
Создать Favicon
Генератор Favicon — это бесплатный онлайн сервис, который позволяет создавать иконки и значки (файл favicon.ico) для вашего сайта.
Данный инструмент позволяет создавать Favicon всех популярных размеров, таких как: 16х16, 32х32, 48х48, 64х64, 128х128.
Назад к инструментам
Инструменты
Генератор Favicon — это бесплатный онлайн сервис, который поваляет создавать иконки и значки (файл favicon.ico) для вашего сайта. Данный инструмент позволяет создавать Favicon всех популярных размеров, таких как: 16х16, 32х32, 48х48, 64х64, 128х128. Выберите размер и изображение (JPG, GIF, PNG), которое вы хотите конвертировать в формат ICO с вашего компьютера и нажмите Создать.
Создать фавикон
Выберите размер
16px x 16px32px x 32px48px x 48px64px x 64px96px x 96px120px x 120px128px x 128px144px x 144px
Выберите фотографию
Для создания favicon необходимо:
- Выберите размер вашего фавикона
- Выберите файл и нажмите Создать Favicon
- Сохраните полученный Favicon на свой компьютер
Как добавить Favicon на сайт?
- После создания Favicon через наш инструмент, скачайте его на ваш компьютер.
- Загрузите фавикон в корневую директорию вашего сайта, чтобы он был доступен по адресу https://yoursite.com/favicon.ico
- Скопируйте код ниже и вставьте в ваш HTML внутри тегов HEAD
- rel - тип ресурса: icon или icon shortcut
- href - адрес файла
- type - тип передаваемых данных. Зависит от формата файла.
• image/x-icon — для формата ICO;
• image/gif — для формата GIF;
• image/jpeg — для формата JPEG;
• image/png — для формата PNG;
• image/bmp — для формата BMP.
Примечание. Если в HTML-коде страницы ссылка на фавиконку прописана несколько раз, робот выберет иконку на свое усмотрение. Например, указаны 2 разные иконки, чтобы соответствовать разным поисковым системам.
Требования Яндекса к фавиконке
Примечание: Для отображения в результатах поиска Яндекс загружает фавиконку с HTTPS-версии сайта, если она доступна. Если нет — фавиконка не отображается.
- Размер: 16×16, 32×32, 120×120 пикселей.
- Формат: ICO (рекомендуемый), GIF, JPEG, PNG, BMP.
Требования Google к фавиконке
- Размер: значок сайта должен быть квадратным и иметь размеры, кратные 48 пикселям, например: 16×16, 48×48, 96×96, 144×144 пикселей
- Формат: ICO (рекомендуемый), GIF, JPEG, PNG, BMP.
- Убедитесь, что значок сайта хорошо выглядит при разрешении 16×16 пикселей, так как для показа в результатах поиска масштаб значка будет изменен.
Учтите, что добавлять значок размером 16 x 16 пикселей не следует.
- Значок сайта должен служить графическим представлением вашего бренда. Это поможет пользователям быстро узнать ваш сайт при ознакомлении с результатами поиска.
Отображение фавиконки
Если робот загрузил favicon, она появится в результатах поиска в течение двух недель.
Примечание. Если робот не может получить доступ к вашей фавиконке, он скачает изображение, например, из тега apple-touch-icon, и использует его для отображения фавиконки в результатах поиска и рекламных кампаниях. Если во время обхода сайт недоступен для робота, может скачаться фавиконка хостинга со страницы-заглушки сайта. Поэтому в поиске вместо вашей фавиконки отобразится произвольная иконка.
Генератор Favicon - Текст на Favicon
Быстро создавайте свою фавиконку из текста, выбирая текст, шрифты и цвета. Загрузите свой значок в самых современных форматах.
Установка
Сначала используйте кнопку загрузки, чтобы загрузить файлы, перечисленные ниже. Поместите файлы в корневой каталог вашего сайта.
- android-chrome-192x192.png
- android-chrome-512x512.png
- apple-touch-icon.png
- favicon-16x16.png
- favicon-32x32.png
- favicon.ico
- site.webmanifest
Затем скопируйте следующие теги ссылок и вставьте их в
head
вашего HTML.
Почему favicon.io?
Хотите ли вы создать значок из текста, из
существующее изображение или из смайликов, которые мы вам прикрыли.
Генератор favicon абсолютно бесплатен и чрезвычайно прост в использовании.
Сгенерированный значок будет работать во всех браузерах и нескольких
платформы.
Начало работы с генератором фавиконок
Приведенный выше инструмент позволит вам создать фавиконку из текста.
Начните с выбора одной-двух букв для генератора фавиконки.
Так как генератор favicon выводит очень маленькие изображения,
важно использовать несколько символов для максимальной разборчивости. Один раз
интересная особенность этого генератора favicon заключается в том, что вы можете копировать
и вставьте символы Юникода и смайлики в текстовое поле.
Это полезно, когда смайлик не указан в смайлике.
страница фавикона.
Вот пример сохранения 💯
Сделать фон простым
Далее выберите форму фона. Есть три простых
доступные формы: квадрат, круг и закругленные. Эти
наиболее распространенные формы, используемые для создания фавикона. Ты можешь видеть
примеры этих форм с
ПродуктХант,
индихакеры и
ХакерНьюс.
Выбор шрифта для фавиконки
Генератор фавиконки использует
Гугл шрифты
в котором доступно более 800 шрифтов. Это полезно для соответствия шрифту
используется на вашем собственном веб-сайте. В будущем будет
специальная страница шрифта, чтобы помочь вам выбрать свой шрифт. Это будет иметь
фильтры для языков, стилей и часто используемых шрифтов. Ты можешь
отредактируйте размер шрифта после того, как вы выбрали свой шрифт. Попробуйте взять
как можно больше места.
Пошив цветов
Последним шагом является выбор цветов. Если у вас есть HEX
значения цветов, которые вы хотите, вы можете просто ввести их в
поле ввода. В противном случае вы можете использовать некоторые из цветов, которые мы
предлагаем использовать палитру цветов под каждым полем ввода. Один крутой
особенность в том, что вы можете использовать прозрачные фоны. Просто введите
«прозрачный» в поле цвета фона.
Вот пример фавикона, сгенерированного с прозрачным
задний план .
Генератор Favicon - Emoji to Favicon
Выберите один из сотен эмодзи, чтобы создать свой фавикон. Изображения эмодзи из проекта Twemoji.
Emoji Favicons
Графика emoji взята из проекта с открытым исходным кодом
Твемодзи. Авторские права на графику принадлежат Twitter, Inc и другим компаниям, 2020 г.
участники. Графика лицензирована
CC-BY 4.0. Вы должны просмотреть лицензию перед использованием в своем проекте.
Категории
виды деятельности
животные и природа
составная часть
флаги
еда, напиток
объекты
люди и тело
смайлики и эмоции
символы
путешествия и места
Preview | Name | Category |
---|---|---|
alien | smileys & emotion | |
alien monster | smileys & emotion | |
anger symbol | smileys и эмоции | |
злое лицо | смайлики и эмоции | |
злое лицо с рогами | smileys & emotion | |
anguished face | smileys & emotion | |
anxious face with sweat | smileys & emotion | |
astonished face | smileys & emotion | |
сияющее лицо с улыбающимися глазами | смайлики и эмоции | |
бьющееся сердце | смайлики и эмоции | |
black heart | smileys & emotion | |
blue heart | smileys & emotion | |
bomb | smileys & emotion | |
broken heart | smileys & эмоции | |
коричневое сердце | смайлики и эмоции | |
кот со слезами радости | smileys & emotion | |
cat with wry smile | smileys & emotion | |
clown face | smileys & emotion | |
cold face | smileys & emotion | |
столкновение | смайлики и эмоции | |
растерянное лицо | смайлики и эмоции | |
confused face | smileys & emotion | |
cowboy hat face | smileys & emotion | |
crying cat | smileys & emotion | |
crying face | smileys & emotion | |
мчаться | смайлики и эмоции | |
разочарованное лицо | смайлики и эмоции | |
disguised face | smileys & emotion | |
dizzy | smileys & emotion | |
dizzy face | smileys & emotion | |
downcast face with sweat | смайлики и эмоции | |
слюнявое лицо | смайлики и эмоции | |
взрывающаяся голова | smileys & emotion | |
expressionless face | smileys & emotion | |
eye in speech bubble | smileys & emotion | |
face blowing a kiss | smileys & emotion | |
лицо смакует еду | смайлики и эмоции | |
лицо кричит от страха | смайлики и эмоции | |
face vomiting | smileys & emotion | |
face with hand over mouth | smileys & emotion | |
face with head bandage | smileys & emotion | |
лицо с медицинской маской | смайлики и эмоции | |
лицо с моноклем | смайлики и эмоции | |
face with open mouth | smileys & emotion | |
face with raised eyebrow | smileys & emotion | |
face with rolling eyes | smileys & emotion | |
face with пар из носа | смайлики и эмоции | |
лицо с символами на губах | смайлики и эмоции | |
face with tears of joy | smileys & emotion | |
face with thermometer | smileys & emotion | |
face with tongue | smileys & emotion | |
face without mouth | смайлики и эмоции | |
испуганное лицо | смайлики и эмоции | |
покрасневшее лицо | Smileys & Emotion | |
Нахмуренное лицо | Смайты и эмоции | |
Нахмурившись с открытым ртом | Смайт.![]() |