что это и как создать favicon

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

Читайте также:

Как оформить главную страницу: элементы, правила и нюансы для разных типов сайтов

Где отображается фавикон

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

1. На открытых вкладках любого браузера: Из множества открытых вкладок он поможет «выхватить» взглядом нужную
2. В закладках браузера, рядом с коротким описанием сайта: Функция — помочь пользователю найти нужную страницу быстрее
3. В качестве ярлыка на смартфоне: Если пользователь вынес сайт на рабочий стол
4. В разделе «Истории» в браузере: Чтобы увидеть фавикон, придется зайти в настройки
5. В поисковой выдаче «Яндекса» фавиконы отображаются слева от заголовка на сниппете сайта и делают сайт узнаваемым в поисковой выдаче. Если у сайта нет фавикона, рядом со сниппетом будет отображаться стандартный значок CMS, на которой сайт создан. Например, значок WordPress
6. В мобильной выдаче поисковой системы Google: Так выглядят сайты в мобильной выдаче Google

Читайте также:

Мобильные версии сайтов 2022: интересные тенденции и неожиданные выводы

В десктопной версии Google они не отображаются, несмотря на то что с 2020 года Google тестирует эту функцию.

Пока дальше тестирования дело не идет, и сайты, особенно если пользователь привык к выдаче «Яндекса», смотрятся сиротливо

Помимо фавиконов сайта могут существовать и отдельных разделов и даже страниц.

Присоединяйтесь к нашему Telegram-каналу!

• Теперь Вы можете читать последние новости из мира интернет-маркетинга в мессенджере Telegram на своём мобильном телефоне.
• Для этого вам необходимо подписаться на наш канал.

Для чего нужен фавикон

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

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

Есть, как минимум, 4 плюса использования фавиконов:

1. Сайт становится заметнее и индивидуальнее в поисковой выдаче «Яндекса». Это может увеличивать его кликабельность.
2. Сайт лучше запоминается. Как и любые другие элементы айдентики сайта, работает на его запоминаемость, особенно если подобран грамотно.
3. Сайт легче найти в закладках, в избранном, в истории, во вкладках браузера.
4. Сайт вызывает доверие. Это часть впечатления, которое сайт производит на пользователя. Его наличие говорит о том, что разработчики думали об удобстве пользователей.

Читайте также:

Что такое поведенческие факторы сайта в Яндексе и почему они важны

Размер фавикона: какие картинки подбирать

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

Чтобы фавикон выглядел современно, релевантно сайту и легко для восприятия, картинку важно подбирать:

1. Например, Google использует мини-логотипы для своих сервисов

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

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

   Но во вкладках браузера стрелочка будет показывать на следующую вкладку, и это не на пользу бренду

   И точно никак не помогает пользователю запомнить сайт.

2. Яркую. Градиент, пастельные тона притягивают взгляд менее активно, чем яркая картинка в контрастных цветах. Яркий фавикон дает больше шансов на клик в поисковой выдаче; его просто найти и среди открытых вкладок браузера.
3. Без мелких деталей. Фавиконы отображаются очень миниатюрно, и картинка с большим количеством мелких деталей, с цветовым хаосом или тем более с текстом не будет считываться пользователями. Минимум деталей, 2-3 цвета помогут сделать его понятным и заметным. Пример в спокойных тонах, перегруженного деталями, и яркого без мелких деталей. Разница ощутима!
4. Оригинальную. Должен быть уникальным — повторяющиеся фавиконы могут привести к путанице и точно не принесут пользы сайту.
5. Не анимированную. Анимацию не поддерживают ни «Яндекс», ни Google.
6. Квадратную. Подходит только квадратное изображение. Сервисы-генераторы не примут другие варианты. А если делать самостоятельно, прямоугольные изображения либо придется обрезать, либо пропорции картинки нарушатся.

Технический аудит сайта

• Наличие дублей страниц, безопасность, корректность всех технических параметров: переадресаций, robots.txt, sitemap.xml скорость загрузки и др.
• Техническая оптимизация — один из основных этапов в продвижении.

Требования Яндекса:

• Возможные размеры: 120х120, 32х32, 16х16 пикселей. «Яндекс» рекомендует размер 120х120 — в этом случае картинка в сервисах поисковой системы будет отображаться максимально четко.
• Возможные форматы изображений: SVG, ICO, GIF, JPEG, PNG, BMP.

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

Чтобы узнать больше, обретитесь к «Яндекс.Справке».

Продвижение сайтов в Яндексе в «Кокосе»

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

Требования Google

Несмотря на то что в десктопной версии поисковой выдачи фавиконы не отображаются, во всех других локациях они будут видны. Требования Google таковы:
• Возможные размеры: любые кратные 48 пикселям. 48х48, 96х96, 144х144 пикселя. Загружать картинку размером 16х16 пикселей можно, но делать этого Google не рекомендует.
• Возможные форматы изображений: SVG, ICO, GIF (без анимации), JPEG, PNG.

Google рекомендует выбирать иконки, совпадающие с другими вариантами графического представления бренда. Больше информации — в справке Google.

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

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

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

При установке на сайт в корневом каталоге создают файл favicon.ico — своеобразный контейнер для нескольких картинок разных размеров. Такой набор обеспечит оптимальный вид на разных платформах.

Читайте также:

Что такое FTP: как подключиться, программы для доступа

Рекомендуем следующие онлайн-генераторы :

1. Генератор от PR-CY. Русскоязычный сервис оперативно создаст архив с файлом ICO в разных размерах: Сервис простой и совершенно бесплатный
2. Генератор Faviconit. Еще один бесплатный русскоязычный минималистичный сервис, принимает исходные картинки в размере не менее 310х310 пикселей и весом не больше 5 мегабайт: Помимо набора картинок, сервис выдает текстовый файл с кодом для загрузки на сайт.

Как проверить фавикон

Проверить, как поисковые роботы видят фавикон сайта, можно с помощью URL и специальной команды:

1. В «Яндексе». Вставьте в адресную строку поисковой системы вот такой адрес: https://favicon.yandex.net/favicon/имя_домена Все в порядке.
2. В Google.Для проверки видимости используйте адрес: https://www.google.com/s2/favicons?domain=имя_домена Результат выглядит очень похоже

Делаем выводы

Чтобы сделать хороший фавикон для сайта:

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

Продвижение сайта по трафику

• Приводим целевой трафик с помощью огромного семантического ядра.
• Рассчитайте стоимость продвижения с помощью онлайн-калькулятора.

что это, зачем нужен и как создать

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

Пример полноценного логотипа и фавикона на его основе от дизайнера Mehedi Islam. Источник

Содержание

1. Зачем нужен favicon
2. Правила создания favicon
3. Размер фавикона
4. Форматы фавикона
5. Онлайн-сервисы для создания фавиконки
6. Как добавить фавикон на сайт
7. Распространенные ошибки

Зачем нужен favicon

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

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

С фавиконом бренд запомнят быстрее, поскольку удачно подобранная картинка вызывает ассоциации с ним. Увидев сначала фавиконку, пользователь вспомнит и о бренде. 

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

Фавикон не влияет на оптимизацию сайта для поисковых систем, однако Яндекс обращает внимание на наличие этой иконки. Если ее нет, то владелец сайта получит сообщение об ошибке в сервисе Яндекс.Вебмастер.

Примеры favicon в результатах поисковой выдачи Яндекса

Правила создания favicon

• Чаще всего для фавиконки берут логотип бренда, адаптируя его под маленький размер. Если логотипа нет, можно взять основные (в идеале контрастные) цвета, используемые для оформления веб-ресурса. В этих цветах создают знак, который будет вызывать у потребителя ассоциации с деятельностью компании. Часто это первая буква названия компании.
• Мелкие детали на фавиконке не будут видны, поэтому текст и другие маленькие элементы лучше не использовать.
• Фавиконка в идеале должна отличаться от конкурентных. Например, яркий цвет или запоминающийся символ, связанный с тематикой бренда, поможет выделить сайт.
• Чтобы favicon в разных местах размещения отображался корректно и в хорошем качестве, его лучше создавать в двух вариантах. Для вкладок в браузере и для поисковой выдачи следует сделать фон прозрачным. Во второй версии лучше использовать сплошную заливку фона.
• Не менее важно соблюсти и технические требования. Причем для разных браузеров и поисковых систем они свои. Подробнее с условиями вы сможете ознакомиться в справках конкретного браузера, Яндекса или Google. Всю важную информацию о разрешении и форматах значков мы приводим ниже.

Варианты иконок приложения в разных цветах от дизайнера Rohanur Rahman Reon. Источник

Размер фавикона

Фавикон измеряется в пикселях. Требования к размерам определяют, исходя из вида устройства и браузера. 

У поисковых систем допустимые размеры и рекомендуемые форматы фавиконок отличаются:

• Яндекс рекомендует формат SVG. Он векторный, для него неактуальны конкретные размеры (так как в векторе нет пикселей), и в нем фавикон будет лучшего качества. Можно применять и другие распространенные форматы: ICO, PNG, JPEG и др. Размеры иконок в них — 120×120, 32×32 или 16×16 px.
• В Google есть возможность добавлять фавикон только в мобильную версию. Здесь другие требования. Разрешен размер, кратный 48 пикселям, например 48×48 или 144×144 px. При изменении масштаба качество картинки такого размера не пострадает.

Android-гаджеты с браузером Chrome допускают фавиконки формата png и размером 192×192 px. Операционная система Safari для Apple предусматривает множество вариантов png-иконки в зависимости от размера ссылки на сайт: от 57×57 до 152×152 и даже 180×180 px. На размер фавиконки также влияет и формат. Например, для SVG-формата точных размеров для картинки нет, она просто должна быть квадратной.

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

Фавиконки в разных цветах вместе с пакетом вспомогательных иконок для сайта от bisma shaukat. Источник

Форматы фавикона

Растровые форматы ICO и PNG являются основными для фавиконки. Особенность формата ICO в том, что он в одном файле хранит картинки разных размеров. Но современные браузеры умеют подтягивать нужные размеры из разных файлов, поэтому ICO не так распространен, как раньше. Еще одна причина ухода этого формата — большой вес в том случае, если он хранит в себе много иконок разных размеров. Большинство браузеров, ОС и устройств поддерживает формат PNG. Он более распространен, чем ICO, меньше весит и позволяет создать изображение без фона (с прозрачным фоном). 

Однако совсем отказываться от ICO не стоит. Некоторые старые браузеры, например Internet Explorer версии 10 и ниже, работают только с этим форматом. А если пользователю понадобится сохранить ссылку на сайт на рабочем столе Windows, ICO-файл тоже придет на помощь. Если вы знаете, что юзеры заходят через старые браузеры или сохраняют ссылки на компьютере, — лучше запастись ICO.

Другие разрешенные форматы иконок — SVG, GIF и JPEG — совместимы не со всеми браузерами. Например, формат JPEG в некоторых системах может отображаться некорректно (совсем без картинки или как «битый» файл).

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

Варианты иконок приложения в разных цветах от дизайнера Rohanur Rahman Reon. Источник

Онлайн-сервисы для создания фавиконки

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

Favicon.by. В программе можно самому нарисовать иконку для сайта по пикселям или подкорректировать уже имеющуюся. Здесь можно загрузить картинку с компьютера или с сайта и потом отредактировать. Просмотр результата возможен до скачивания. В итоге вы получаете фавикон в формате ICO и размере 16×16 px.

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

Favicon.io. Этот сервис позволяет сделать фавикон из текста, картинки и даже эмодзи. Вы можете сами выбрать цвет иконки или общий фон. В результате получаются фавиконы нескольких размеров в формате ICO и PNG. Можно скачать иконку или вставить ее сразу на сайт путем копирования кода.

Пример работы генератора иконок в сервисе Favicon.io. Стрелкой показан будущий вид фавикона в разных размерах.

Faviconit. В приложение надо загрузить картинку (минимальный размер 310×310 px, вес не более 5 Мб). После обработки изображения можно скачать архивом вместе с кодом для вставки. 

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

Favic-o-matic. Здесь можно генерировать фавиконы сразу в 20 вариантах размера или в стандартных размерах: 16х16, 32х32 px. Принимаются исходники размером от 310×310 px. Готовый пакет скачивается автоматически с генерацией кода для сайта.

Favicon & App Icon Generator. В программе можно делать фавиконки для операционных систем Android и iOS. Картинку можно выбрать из галереи или нарисовать с нуля. Чтобы улучшить результат, конструктор дает возможность настраивать изображения вручную.

Xiconeditor.com. Полноценный пиксельный графический редактор для иконок. Здесь есть все инструменты: кисти, карандаши, ластики и другие. Если у вас есть готовое изображение, можно загрузить его на сайт для редактирования. Готовый фавикон можно предварительно посмотреть так, как его увидят другие пользователи.

Интерфейс сервиса xiconeditor.com с полем для рисования и инструментами

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

Дизайнерские favicon от Sanni Joe. Источник

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

Существуют разные способы добавления фавиконки на сайт в зависимости от системы управления сайтом (CMS).

Если сайт без CMS

1. Между тегами <head>…</head> на главной странице нужно вставить часть кода с адресом фавикона и типом передаваемых данных. Укажите путь к месту хранения картинки (url), имя файла и используемый формат. 
2. Если страница редактировалась не на хостинге, нужно загрузить файл этой редактируемой страницы на хостинг, заменив существующий, и затем сохранить. 
3. Поместите изображение в корневой каталог сайта. Он должен быть доступен по прямой ссылке и отдавать ответ сервера «200 OK». Файл может быть загружен через собственную панель управления или через сторонний менеджер файлов. 

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

• http://favicon. yandex.net/favicon/mysite.ru — для Яндекса;
• http://www.google.com/s2/favicons?domain=mysite.ru — для Google.

Если сайт на CMS

В этом случае фрагмент кода также добавляется между <head>-тегами в файл с шаблоном хедера сайта.

В WordPress можно добавить фавиконку через стандартные настройки:

1. Зайти в раздел «Внешний вид» аккаунта администратора CMS и кликнуть по «Настройкам».
2. Затем кликнуть по кнопке с выбором изображения в разделе иконки сайта.
3. Загрузить изображение.
4. Щелкнуть на кнопку публикации, чтобы сохранить изменения.

Если сайт сделан на конструкторе

Здесь все просто. Вам надо найти раздел Favicon в настройках сайта, подгрузить изображение допустимого размера и формата, далее разрешить применение и после этого опубликовать страницу сайта заново.

Дизайн логотипа и иконок на фонах различного цвета от Star Wolfy. Источник

Распространенные ошибки

Если фавикон сайта не отображается, это может говорить об одной или нескольких проблемах:

• Индексация фавикона поисковой системой еще не произошла. Обычно этот процесс занимает от двух недель до двух месяцев.
• Недопустимый размер или формат фавикона. В коде иконки должны быть все обязательные атрибуты.
• Код иконки размещен не в том блоке. Корректный блок для размещения фавикона — <head>.
• Индексация иконки в файле robots.txt не разрешена. Если это так, исправьте Disallow («Не разрешать») на Allow («Разрешить»).
• Недопустимое изображение. На картинке не должно быть запрещенных и похожих на них символов.
• Фавикон низкого качества или скопирован. Если вы скопируете иконку с какого-то другого источника или загрузите ее в плохом качестве, поисковая система может проигнорировать ее.
• Браузерное кеширование. Чтобы устранить проблему, почистите кеш браузера и затем обновите страницу. Воспользуйтесь сочетанием клавиш Ctrl + F5, чтобы остаться при этом на странице.

ИСКРА —
неделя знакомства
с дизайн-профессиями

бесплатно

ИСКРА —
неделя знакомства
с дизайн-профессиями

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

разжечь искру

Другие термины на букву «F»

FigmaFramer

← Все термины

Бесплатный генератор фавиконок, преобразование любого изображения

Бесплатный генератор фавиконки, преобразование любого изображения — Wizlogo

Создайте фавикон для своего сайта за считанные секунды. Загрузите файл изображения (GIF, JPG и PNG) и преобразуйте его в фавикон (ICO) или значок приложения.

Как использовать фавикон?

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

1. Загрузите файл

Выберите файл изображения из списка файлов (GIF, JPG или PNG)

2. Создать значок

Создавайте выбранные файлы значков и легко сохраняйте их.

3.

Добавить на сайт

Используйте сохраненные файлы значков и загружайте их на свой веб-сайт

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

Сделайте свой веб-сайт или приложение красивее, добавив этот простой значок

Что такое favicon?

Фавикон обычно представляет собой крошечный пиксельный значок, который отображается рядом с каждым веб-сайтом, который вы когда-либо посещали. Начиная с размера 16 × 16 пикселей и становясь более заметным, он в основном представляет ваш бренд и является огромным помощником, когда у вашего посетителя открыто несколько вкладок в браузере. Чтобы не потеряться, рекомендуется сделать его максимально читаемым (обычно одна буква или две).

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

Фавиконы отображаются разных размеров, но наиболее распространенными являются 16×16, 32×32, 48×48, 64×64 и 128×128. В настоящее время многие браузеры могут читать файлы изображений вместо . ico, поэтому размер фавикона создается самостоятельно — не нужно думать о размерах, просто чтобы он хорошо выглядел.

Какой тип изображения следует использовать для фавиконов?

Большинство интернет-браузеров будут рады изображениям в формате PNG, JPG и GIF в качестве фавиконов. Хотя есть много пользователей Интернета, которые не обновляют версии своих браузеров, и, например, Internet Explorer не будет отображать файлы изображений, так как он требует формата ICO.

Часто задаваемые вопросы о фавиконках

Найдите самые популярные вопросы и ответы, связанные с генератором значков

Что такое генератор значков Wizlogo?

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

Какие параметры следует использовать для экспорта фавикона?

Существует множество различных критериев для использования фавикона. Во-первых, вам нужно решить, где вы собираетесь его использовать. Например, если вы планируете использовать его на своем веб-сайте, в большинстве случаев вам понадобится только одно или несколько небольших сгенерированных изображений. Хотя, если вы с нетерпением ждете возможности использовать свой фавикон в приложениях для iOS или Android, вам понадобится фавикон большего размера. Во-вторых, используйте как можно меньше вариантов. Вы не хотите, чтобы ваш сайт работал медленно, поэтому, возможно, вам понадобится только файл ICO, и он будет работать нормально — много разных сценариев, но не забывайте о скорости.

Могу ли я использовать любой favicon в коммерческих целях?

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

Нужно больше, чем фавикон?

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

Как создать файл ICO Favicon из изображения PNG, JPG или SVG

Фавикон веб-сайта является неотъемлемой частью фирменного стиля, аналогичного логотипу веб-сайта. Однако обычно это файл ICO по сравнению с обычными форматами изображений, такими как PNG, JPG или SVG. В этой статье мы увидим, как мы можем преобразовать обычное изображение в файл favicon.ico без использования какого-либо программного обеспечения для редактирования фотографий, такого как Photoshop или GIMP.

Понимание истории Favicon.ico

Файл favicon.ico содержит изображения разных размеров и подобен файлам ICON, используемым на настольных компьютерах. Впервые он появился в 1999 году, когда Microsoft выпустила Internet Explorer 5 и добавила поддержку фавиконов.

Файл favicon изначально должен был быть файлом favicon.ico в корне вашего домена. Например, http://вашдомен.com/favicon.ico. Позднее W3C определил стандартную реализацию файлов значков, используя HTML-элемент в разделе с атрибутом href, указывающим местоположение файла значка. Согласно новой схеме, этот файл favicon может находиться в любом каталоге веб-сайта и может иметь любой формат файла изображения. Однако IE поддерживал формат файла ICO только с версии 5 до версии IE 10.

Таким образом, несмотря на то, что форматы файлов PNG и JPG поддерживаются другими браузерами, для обеспечения совместимости со старыми версиями Internet Explorer рекомендуется указать значок веб-сайта как файл .ico. Позже мы увидим, как вы также можете указывать значки в метатегах для Android и iOS, и они будут использоваться, когда пользователь закрепляет ваш сайт на своем домашнем экране.

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

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

Создать логотип и фавиконку с помощью Logaster

Создать фавиконку из изображения

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

Шаг 1. Получение начального изображения для фавикона

Мы начнем со следующего PNG-изображения для нашего фавикона. Как правило, вы должны использовать логотип своего веб-сайта или модифицированную версию логотипа. Убедитесь, что изображение вашего фавикона может поместиться внутри квадратного значка и быть разборчивым даже при маленьком размере. Начальное изображение лучше иметь размером не менее 260 x 260 пикселей.

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

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

Шаг 2. Создайте фавикон из изображения

Получив начальное изображение, перейдите на веб-сайт realfavicongenerator.net и загрузите изображение, нажав кнопку «Выбрать изображение фавиконки». Этот веб-сайт поможет вам создать фавикон, совместимый практически со всеми браузерами и платформами.

Далее веб-сайт попросит вас настроить фавикон для разных устройств, включая iOS, Android, Windows и macOS. Эти конфигурации необходимы для отображения вашего фавикона на главном экране пользователя этих устройств. Убедитесь, что вы изменили настройки, такие как цвет фона, размер полей, цвет темы и т. д., в зависимости от цветов вашего фавикона. Можно увидеть предварительный просмотр в реальном времени, который поможет вам настроить эти значения.

Шаг 3: Создание фавикона

После того, как вы выбрали параметры по своему вкусу, нажмите кнопку «Создать свои значки и HTML-код», и веб-сайт создаст пакет значков значков вместе с кодом HTML, подобный следующему:

  png">




 

Шаг 4: Добавьте фавиконку на веб-сайт

Вам потребуется загрузить пакет фавиконки, сгенерированный веб-сайтом, и извлечь его содержимое в корень вашего веб-сайта. После извлечения вы обнаружите, что ваше изображение было преобразовано в favicon.ico вместе с изображениями favicon разных размеров, файлом browserconfig.xml и файлом manifest.json. Эти дополнительные файлы необходимы для указания значка веб-сайта на различных устройствах, таких как iOS, Android и Windows 10.

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