Программа для создания ico картинок: IcoFX для Windows

Содержание

зачем нужен и как сделать

Что это такое? Фавикон – это небольшая пиктограмма, которая находится в верхнем углу вкладки и отображает логотип сайта. Эта иконка показывается в выдаче поисковой системы напротив названия ресурса. На первый взгляд может показаться, что такой маленький значок неважен и служит только для красоты.

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

В статье рассказывается:

Понятие и задачи фавикона
Требования к фавикону у «Яндекса» и Google
Выбор картинки для фавикона
Размер и формат фавикона

Добавление фавикона на сайт
Добавление фавикона для мобильных устройств
Проверка фавикон на ошибки
Сервисы для создания фавикона
3 примера необычных фавиконов
Пройди тест и узнай, какая сфера тебе подходит:
айти, дизайн или маркетинг.
Бесплатно от Geekbrains

Понятие и задачи фавикона

Термин «фавикон» (англ. favicon) был образован путем сложения двух слов: favorite (избранный) и icon (значок). Фавикон для сайта должен четко обозначать конкретный ресурс.

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

Улучшение позиции сайта в результатах поиска. Фавикон позволяет привлекать больше внимания к описанию сайта, соответственно, пользователи начинают чаще проходить по ссылкам. Использование фавикона способно дать владельцу сайта значительные преимущества. Так, можно подобрать изображение, побуждающее пользователя к совершению определенных действий, например, телефонного звонка.

Повышение узнаваемости. Для современного человека весьма характерно запоминать изображения, тогда как текстовая информация сохраняется в памяти намного хуже. Популярность торгового знака во многом зависит от наличия фавикона. Когда пользователь ищет информацию, он зачастую жмет на ссылку с пиктограммой, даже если она находится внизу поисковой выдачи. Эффективным способом продвижения товара является использование логотипа компании в качестве фавикона. Таким образом, интерес к бренду растет одновременно как на офлайн-рынке, так и в Сети.
Обеспечение правильной навигации в браузере. Если пользователю требуется открыть определенный сайт через закладки, он обращает внимание в первую очередь на фавикон. Когда в закладках содержится много сайтов, при отсутствии пиктограмм становится труднее ориентироваться.

Понятие и задачи фавикона

Без фавикона рядом со ссылкой на ваш сайт в браузере отображается пустое место. Как правило, из-за этого пользователи осуществляют меньше кликов, что приводит к ухудшению положения сайта в результатах поиска. Для сайтов, которые были созданы с применением конструкторов, отображается фавикон соответствующего ресурса. В сущности, пользы от этого нет, так как вы даром продвигаете сторонний сайт.

Кроме того, при этом снижается пользовательский интерес – людей привлекает узнаваемый значок, они жмут на ссылку, видят, что ошиблись, и покидают сайт. Так что лучше подобрать собственное изображение – с этим не возникнет проблем.

Требования к фавикону у «Яндекса» и Google

Оба поисковика умеют работать с фавиконами и самостоятельно осуществляют их индексирование. Обычно для этого требуется несколько дней, иногда – недель. У крупных и посещаемых сайтов картинка индексируется быстрее, также и в случае ее обновления.

Обе поисковые системы предъявляют различные требования к фавиконам. Их запомнить несложно.

Требования Google

В настоящее время данный сервис все больше избегает привычных иконок размером 16 на 16 – они индексируются, но могут выглядеть неправильно. Эту особенность рекомендуется учитывать при создании иконок. Другие требования вполне стандартны:

отсутствие неприличного контента;
соответствие дизайну сайта, товарному знаку;
уникальность (запрещено использовать логотипы популярных брендов без соответствующего разрешения).

Индексация картинок «Гуглом» занимает относительно много времени, также он медленно реагирует на обновление иконки.

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

Здесь требований еще меньше. Вдобавок ко всему «Яндекс» дает возможность при отсутствии иконки подобрать ее, основываясь на собственных алгоритмах. Впрочем, соглашаться не стоит, так как заниматься этим будет машина.

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

Кроме обычного поиска, фавиконы показываются в ленте новостей.

Выбор картинки для фавикона

Фавикон можно увидеть в браузере рядом с адресом сайта и в поисковой выдаче «Яндекса». У «Гугла» внедряется отображение картинки рядом с названием сайта на компьютере, и еще неизвестно, станет ли эта практика постоянной. Таким образом, появляется дополнительная мотивация к тому, чтобы создать фавикон.

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

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

Фирменный значок Microsoft хорошо знаком пользователям, и они без проблем распознают его среди общей массы.

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

Тематичность. Фавикон должен быть неразрывно связан с названием фирмы. Лучше всего обрезать логотип или взять первую букву.
Контрастность. Нужно применять яркие цвета, прежде всего, красный, оранжевый, темно-синий, иначе картинка будет плохо привлекать внимание.
Четкость. Изображение должно иметь хорошее качество. Для этого больше подойдет векторная графика, так как ее легко можно вписать в нужный размер.

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

Выбор картинки для фавикона

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

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

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

Для измерения размеров фавикона используются пиксели. Наибольшее распространение получили фавиконы с параметрами 16 x 16 пикселей в формате .ico – они отображаются правильно почти во всех браузерах.

Однако для конкретного браузера или устройства оптимальный размер иконки может отличаться. Так, для Google предпочтительными являются картинки со стороной, кратной 48 px (например, 48×48, 96×96) – их можно увеличивать в размерах без потери качества. Для формата .svg нет строго определенных размеров. Здесь подойдет любое квадратное изображение.

Ряд мобильных устройств (в частности, Apple с версией iOS выше 1.1.3) поддерживают фавиконы большого размера, которые могут применяться в качестве значков веб-приложений. Стандартный размер иконок для iPhone – 60 x 60 px, для iPhone с ретина-дисплеем – 120 x 120 px. Для аналогичных устройств iPad наиболее подходят размеры 76 x 76 и 152 x 152 px соответственно. Для ОС Android с браузером Chrome рекомендуется делать фавиконы с разрешением 192 x 192 пикселя в формате .png.

Другими словами, для фавикона не существует конкретно заданных размеров. Их нужно подбирать отдельно для каждого браузера или платформы.

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

Первоначально единственным форматом, применявшимся для фавиконов, был .ico, который поддерживался браузером Internet Explorer. Изображения сохранялись в корне сайта с названием favicon.ico.

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

Затем вместо .ico получили распространение форматы .png и .svg. Они занимают мало места и отображаются без ошибок.

В настоящее время стандартом для большинства устройств является формат .png, тогда как .svg применяется в Safari MacOS.

Также встречаются фавиконы с расширениями .jpeg и .gif. Такой вариант возможен, но не рекомендуется, так как не все браузеры умеют распознавать эти форматы. Анимированные изображения поддерживаются в Firefox и Opera, однако злоупотреблять ими не стоит, поскольку они не дают посетителю сайта сконцентрироваться на изучении его содержимого и не вписываются органично в общий вид окна браузера.

Топ-30 самых востребованных и высокооплачиваемых профессий 2023

Поможет разобраться в актуальной ситуации на рынке труда

Подборка 50+ ресурсов об IT-сфере

Только лучшие телеграм-каналы, каналы Youtube, подкасты, форумы и многое другое для того, чтобы узнавать новое про IT

ТОП 50+ сервисов и приложений от Geekbrains

Безопасные и надежные программы для работы в наши дни

pdf 3,7mb

doc 1,7mb

Уже скачали 20274

В таблице ниже указано, какие форматы фавикона поддерживаются в популярных браузерах:

Основные браузеры и поддержка различных форматов фавикона в разных версиях
Браузер	ICO	PNG	JPEG	SVG	GIF	APNG	GIF-анимация
Google Chrome	Да	От 4. 0	От 4.0	Нет	От 4.0	Нет	Нет
Opera	От 7.0	От 7.0	От 7.0	Нет	От 7.0	От 9.5	От 7.0
Firefox	От 1.0	От 1.0	Да	Да	От 1.0	От 3.0	Да
Internet Explorer	От 5.0	От 11.0	Да	Нет	От 11.0	Нет	Нет
Safari MacOS	Да	От 4.0	От 4.0	Да	От 4.0	Нет	Нет

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

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

Только до 6. 04

Скачай подборку тестов, чтобы определить свои самые конкурентные скиллы

Список документов:

Тест на определение компетенций

Чек-лист «Как избежать обмана при трудоустройстве»

Инструкция по выходу из выгорания

Чтобы получить файл, укажите e-mail:

Подтвердите, что вы не робот,
указав номер телефона:

Уже скачали 7503

Виды и размеры фавиконов разных форматов, подходящие для конкретных браузеров и ОС, приведены в следующей таблице.

Классические десктопные браузеры
16×16, 32×32, 48×48	PNG	Прозрачный
Браузер Safari
Вектор	SVG	Прозрачный
Мобильный браузер Opera
228×228	PNG	Сплошная заливка
Windows 8. 0
144×144	PNG	Прозрачный
Windows 8.1
128×128, 270 x 270, 558×558	PNG	Прозрачный
Apple iOS
180×180	PNG	Сплошная заливка
Google Android и Chrome
192×192, 512×512	PNG	Сплошная заливка

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

Если вы все равно не уверены, какой вариант вам подойдет, то берите фавикон со стороной 16 px или 32 px в формате .ico или .png. Однако чтобы сделать сайт наиболее удобным для пользователя, следует все же принять во внимание рекомендуемые размеры.

Добавление фавикона на сайт

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

Добавление фавикона на сайт

Для добавления иконки проще всего внести изменения непосредственно в код сайта. Этот вариант сработает в любом случае.

Как добавить фавикон на сайт через код

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

Затем в HTML-коде внутри тега head следует указать ссылку на иконку.

<head>

</head>

Атрибуты:

rel:

icon — учитывается большинством браузеров,

shortcut icon — учитывается браузером Internet Explorer.

type:

image/svg+xml — для формата SVG,

image/x-icon или image/vnd.microsoft.icon — для формата ICO,

image/gif — для формата GIF,

image/jpeg — для формата JPEG,

image/png — для формата PNG,

image/bmp — для формата BMP.

Стоит отметить, что, если для сайта используется несколько доменных имен, желательно прописывать не полный путь к файлу, а относительный (то есть просто /favicon.ico).

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

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

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

В частности, можно подключить плагин RealFaviconGenerator. При этом вам нужно выполнить следующие действия:

зайдите в админ-панель WordPress;
откройте вкладку «Плагин», нажмите «Добавить новый»;
найдите и установите плагин RealFaviconGenerator, затем активируйте его;
откройте «Внешний вид», затем «Фавикон»;
загрузите изображение и нажмите «Генерировать фавикон», после чего вы попадете на сайт RealFaviconGenerator;
оказавшись на сайте, нажмите кнопку для создания фавикона;
снова откроется ваш сайт, и вам придет уведомление, что настройка прошла успешно.

Также загрузить фавикон достаточно легко стандартными средствами WordPress:

в админ-панели выберите «Внешний вид» – «Настроить»;
откройте «Общие настройки» – «Свойства сайта»;
зайдите в раздел «Иконка сайта», нажмите кнопку выбора;
загрузите файл изображения.

Далее нажмите «Опубликовать», и правки будут сохранены.

Добавление фавикона для мобильных устройств

Фавикон принято сохранять в файле favicon.ico, который может содержать одновременно несколько изображений. Здесь вполне хватает иконок с разрешениями 16×16, 32×32 и 48×48.

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

Теперь рассмотрим, как установить фавикон для мобильных устройств.

Android

Для этой системы стандартными являются формат .png и размеры 180 x 180, иконка может быть прозрачной. Для указания параметров фавикона применяется спецификация Web App Manifest. Она представляет собой обычный файл с расширением .json, в котором прописываются путь к иконкам, их размеры и свойства.

Вначале указывается манифест:

Пример кода:

{

«name»: «%title%»,

«icons»: [

{

«src»: «\/android-chrome-36×36.png»,

«sizes»: «36×36»,

«type»: «image\/png»,

«density»: «0.75»

{

«src»: «\/android-chrome-48×48.png»,

«sizes»: «48×48»,

«type»: «image\/png»,

«density»: «1.0»

{

«src»: «\/android-chrome-72×72.png»,

«sizes»: «72×72»,

«type»: «image\/png»,

«density»: «1.5»

{

«src»: «\/android-chrome-96×96.png»,

«sizes»: «96×96»,

«type»: «image\/png»,

«density»: «2. 0»

{

«src»: «\/android-chrome-144×144.png»,

«sizes»: «144×144»,

«type»: «image\/png»,

«density»: «3.0»

{

«src»: «\/android-chrome-192×192.png»,

«sizes»: «192×192»,

«type»: «image\/png»,

«density»: «4.0»

}

]

}

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

Apple

В iOS для иконок принято использовать файлы типа .png с разрешением 180 x 180. Их нельзя делать прозрачными, при выведении на главный экран происходит округление углов. Изображение таких размеров подходит и для других браузеров.

Apple

В rel нужно указать “apple-touch-icon.png”.

Пример кода:

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

Пример кода:

Edge и IE 12

Цвет фона изображения определяется в коде страницы через тег meta:

Пример кода:

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

Пример кода:

<tile>

</wide310x150logo></square310x310logo></square150x150logo></square70x70logo></tile>

</msapplication>

</browserconfig>

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

Проверка фавикона на ошибки

Если вы хотите удостовериться, что фавикон настроен правильно, попробуйте найти ваш сайт через «Гугл». Также вы можете пройти по следующей ссылке, указав в ней свой адрес:

https://www.google.com/s2/favicons?domain=mysite.ru

Кроме того, есть особые сервисы, позволяющие посмотреть, как выглядит фавикон.

Если фавикон отсутствует в поисковой выдаче, убедитесь, что выполнены следующие требования:

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

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

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

Сервисы для создания фавикона

Теперь вам известны требования к фавиконам, но у вас нет времени создавать их отдельно для каждого устройства. Для этого существуют специальные сервисы, позволяющие сделать фавикон онлайн. Они производят готовый комплект иконок и код для встраивания на сайт.

Realfavicongenerator

Для этого сервиса нужно предоставить исходное изображение с предпочтительным разрешением 260 x 260. У вас есть возможность вносить правки, например, изменить фон. По окончании работы вы можете сохранить к себе бесплатные фавиконы и фрагмент кода.

Favic-o-matic

Здесь потребуется исходник с минимальным размером 310 x 310. Вы не можете корректировать изображение, загрузка результата начинается сразу же после создания файлов.

ico & App Icon Generator

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

Faviconit

Этому сервису нужен квадратный исходник со стороной не менее 310 px, максимальный размер файла – 5 Мб. На выходе вы получаете архив, содержащий графические изображения и текст с кодом HTML.

3 примера необычных фавиконов

Фавиконы, с помощью которых можно отличать версии сайта для пользователей и разработчиков

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

Благодаря этому вы легко сможете понять, какая версия сайта открыта в данный момент. Фавикон будет показан именно для той версии, на которую ведет ссылка.

Креативные фавиконы

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

Дополнительные сложности при этом возникают из-за ограниченных размеров изображения, так как его нельзя дополнить текстом или сложными элементами.

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

Youtube. Фавикон Youtube превосходно сочетает в себе креативность и минимализм. Вместо уменьшенной версии главного логотипа используется красный значок в виде кнопки проигрывателя. Таким образом, пользователю сразу становится ясно, что на странице имеется контент, который можно воспроизводить. Кроме того, иконка меняется при просмотре видео, например, когда вы нажимаете на паузу.
Sitepoint. При создании фавикона этого сайта также применялся творческий подход. Он выглядит как буква S в виде двух скобок, используемых в программировании. При взгляде на такую иконку разработчик сразу получает представление о содержании сайта.
Trello. Фавикон Trello меняется в соответствии с тем, какой цвет фона вы выбрали или же загрузили.
Mixcloud. Внешний вид фавикона у Mixcloud различается в зависимости от того, звучит ли музыка в данный момент или стоит на паузе. Еще по иконке можно определить, сколько осталось до конца песни.
Github. Особенностью фавикона Github является способность менять цвет при изменении состояния системы.
Flickr. При добавлении изображения на данный сервис появляется небольшой значок, свидетельствующий о ходе загрузки.

Динамичные фавиконы

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

Динамичные фавиконы

Похожий функционал реализован в Campaign Monitor. Для гостей сайта фавикон выглядит как закрытый конверт, который открывается после авторизации.

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

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

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

Продвижение блога — Генератор продаж

Рейтинг: 3

( голосов 2 )

Поделиться статьей

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

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

Источник

Зачем нужен 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

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

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

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

Если сайт на CMS

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

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

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

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

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

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

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

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

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

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

бесплатно

Free Icon 32 Editor — простая программа для создания иконок. Вы можете создавать иконки с нуля. Он позволяет создавать значки только размером 32×32. Вы можете сохранить их в формате файла ICO или BMP. Вы можете использовать свое воображение, чтобы рисовать значки в этом бесплатном редакторе значков.

Домашняя страница

Страница загрузки

Icon Maker

Icon Maker позволяет создавать значки из файлов изображений различных типов. Поддерживаемые форматы: PNG, JPG, BMP и TIF. Он поставляется в формате ZIP, и вы можете использовать его после извлечения в любую папку. Он не поддерживает изображения размером более 512 × 512, поэтому вам необходимо изменить их размер перед использованием с ним.

Домашняя страница

Страница загрузки

Iconion

Iconion — бесплатная и простая в использовании программа для создания иконок для Windows. Это позволяет создавать значки из различных форм, бесплатно включенных в это программное обеспечение. Вы можете легко создавать значки размером от 14 × 14 до 1024 × 1024 или нестандартного размера с различными цветами или градиентами. Вы можете сохранить несколько значков разных размеров за один раз. Он имеет простой в использовании пользовательский интерфейс.

Домашняя страница

Страница загрузки

Написать комментарий

Icon Maker — Скачать

Обзор Softonic

Высококачественные и прозрачные иконки

Icon Maker — бесплатная программа для графики и дизайна от Mevedia. Программное обеспечение позволяет пользователям создавать свои собственные значки, обладая несколькими слоями и альфа-прозрачностью. Пользователи могут экспортировать графические спрайты в значки различных размеров. Они могут обрезать изображение, управлять его масштабированием, изменять значения цвета (цвет, черно-белый, яркость, контрастность, оттенок и т. д.) и добавлять мягкие тени. Пользователям, которые хотят создавать значки, не нужно открывать большое программное обеспечение для редактирования фотографий, вместо этого они могут использовать это простое графическое программное обеспечение. С другой стороны, это очень удобно, если пользователи просто хотят иметь значок с прозрачным фоном, что идеально подходит для файлов png, поддерживающих альфа-прозрачность.

Обзор автора

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

Особенности

— Поддержка альфа-прозрачности (32-разрядная)
— Добавление нескольких изображений (многослойных)

Функции для 2.0

— Импорт нескольких изображений для создания слоя для каждого из них, содержащего элемент изображения, как в значке Maker 1.0
— на основе слоя
— несколько элементов на слое
— векторные элементы, такие как текст, эллипс, прямоугольник, контур и т. д.
— Градиенты
— Преобразование элементов в изображения
— Редактирование элементов изображения с помощью встроенного редактора изображений
— Настройки цвета, такие как яркость, контрастность, гамма и т. д.
— Автоматическое изменение размера отдельных элементов для всех размеров слоя
— Сохранить как проект Icon Maker

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

Разработчик программного обеспечения и графический дизайнер. И если среда разработки не поддерживает применение значка к созданному исполняемому файлу, Icon Changer может это сделать.

Pros

Создание значков легко
Добавить несколько слоев в логотип
Сделать логотипы с Alpha Transparency
для простого графического проектирования

Программа для создания ico картинок: IcoFX для Windows — Скачайте бесплатно с Uptodown

зачем нужен и как сделать

Понятие и задачи фавикона

Требования к фавикону у «Яндекса» и Google

Требования Google

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

Выбор картинки для фавикона

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

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

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

Добавление фавикона на сайт

Как добавить фавикон на сайт через код

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

Добавление фавикона для мобильных устройств

Android

Apple

Edge и IE 12

Проверка фавикона на ошибки

Сервисы для создания фавикона

3 примера необычных фавиконов

Фавиконы, с помощью которых можно отличать версии сайта для пользователей и разработчиков

Креативные фавиконы

Динамичные фавиконы

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

26 лучших бесплатных программ для создания иконок для Windows

Редактор IconCool

SimplyIcon

ImagiCon

GM Icon Maker

IrfanView

ZNsoft Icon Maker

Free Icon Maker

Falco Icon Studio

Junior Icon Editor

Значок Maqme

Efiresoft Image to Icon Converter

BytesX Favicon Generator

Cosmic Icon Maker

XnView

IconMaker

Icon Master

Генератор иконок часовщика

Babya Icon Studio

Quick Icon

IcoFX Portable

Image 2 Icon Converter

@Icon Sushi

Lifrinsoft Icon Converter

Free Icon 32 Editor

Icon Maker

Iconion

Icon Maker — Скачать

Высококачественные и прозрачные иконки

Pros

Добавить комментарий Отменить ответ