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

30463 2

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

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

Секрет успешного сайта — в мелочах, которые владельцы часто упускают. Для эффективного продвижения недостаточно одного 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 Популярное Рубрики Adsense (3) Chrome (2) Директ (86) Дорвеи (39) Ключевые слова (238) Лендинги (78) Популярное (12 235) Продвижение (498) Разное (41) Рся (6) Семантическое ядро (366) Спам (10) Ссылочное (73) Тиц (381) Подписаться на RSS 100+ Подписчиков Услуги и реклама Я свободен Контакты Скажи мне привет! © Копирование моих статей приветствуется, если вы поставите ссылку на мой блог будет просто математично!