Фавикон сделать: Бесплатный лучший онлайн-генератор фавикон (favicon.ico) онлайн для вашего сайта

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

30463 2

How-to – Читать 9 минут

Прочитать позже

ЧЕК-ЛИСТ: ТЕХНИЧЕСКАЯ ЧАСТЬ — ИСПРАВЛЕНИЕ

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

Содержание

  1. Что такое favicon для сайта
  2. Зачем нужен favicon
    — Технические требования к фавиконам
  3. Как создать favicon онлайн
  4. Как добавить фавикон на сайт
  5. Распространенные ошибки
  6. 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 необходимо:
    1. Выберите размер вашего фавикона
    2. Выберите файл и нажмите Создать Favicon
    3. Сохраните полученный Favicon на свой компьютер

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

    1. После создания Favicon через наш инструмент, скачайте его на ваш компьютер.
    2. Загрузите фавикон в корневую директорию вашего сайта, чтобы он был доступен по адресу https://yoursite.com/favicon.ico
    3. Скопируйте код ниже и вставьте в ваш 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
    Нахмуренное лицо Смайты и эмоции
    Нахмурившись с открытым ртом Смайт.

    This entry was posted in Популярное