Картинки формата ico: Бесплатные иконки SVG, PNG, ICO или ICNS

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

Фавикон (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

← Все термины

Иконка сайта. В чем отличие формата ICO и PNG?

Верстка, HTML, CSS

24.09.2019 Salomoon Залишити коментар

О favicon  стало известно уже давно. Сайт выглядит лучше в окне браузера, если у него есть иконка, которая отображается первой на вкладке, далее идет описание сайта title.

С самого начала задумали использовать специальный формат изображения ICO, размер картинки которого составляет 16 х 16 пикселей. Для того чтобы прописать в HTML коде, что иконка для сайта есть применяется специальный код, который я приведу ниже. К тому же следует отметить, что инициализация favicon  и сейчас, в конце 2019 года прекрасно поддерживается всеми браузерами. Не смотря на поддержку ico технология считается устаревшей. Вот код, который инициализирует технологию favicon  посредством файта *. ico:

<link rel="shortcut icon" href="https://example.com/img/favicon.ico">
<link rel="icon" type="image/ico" href="https://example.com/img/favicon.ico">

Всего эти 2 строчки в блоке head и правильно подобранная иконка давали приличный результат.

К сожалению формат ико уже не поддерживается некоторыми современными браузерами для мобильных устройств. Например Google Chrome for Android

Как видите, здесь сайт про ремонт и строительство имеет картинку – она в формате png. А вот другие сайты иконки не показывают – хотя она там имеется в старом формате ICO.

Почему стоит всё еще поддерживать формат ICO

В основном для поддержки старых браузеров, таких как Mircosoft Internet Explorer. До 11 версии формат PNG в Internet Explorer не поддерживался.

Формат PNG начал активно использоваться при появлении HTML5. в нём есть атрибут sizes, который указывает, какие есть размеры картинок в формате png. Браузер или устройство смотрит, какие есть картинки и подбирает наиболее подходящее для своей платформы.

Использование формата PNG

Для подключения формата PNG тоже нужно прописать в коде всего пару строчек. Выглядять они вот так”

<link rel="icon" href="https://salomoon.pp.ua/wp-content/uploads/2019/07/cropped-blog-32x32.png" />
<link rel="icon" href="https://salomoon.pp.ua/wp-content/uploads/2019/07/cropped-blog-192x192.
  png" />
<link rel="apple-touch-icon-precomposed" href="https://salomoon.pp.ua/wp-content/uploads/2019/07/cropped-blog-180x180.png" />
<meta name="msapplication-TileImage" content="https://salomoon.pp.ua/wp-content/uploads/2019/07/cropped-blog-270x270.png" />

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

Так же иконки сайта используются для изображения в плитках – такие возможности появились в новых версиях Microsoft Windows. Для фона плитки в коде тоже можно указать цвет <meta name="msapplication-TileColor" content="#009900">

Вывод

Если вы создаёте сайт – позаботьтесь о иконке для него. В совремённом мире информационных технологий принято использовать иконку в формате PNG. Формат ICO является устаревшим.

jpgpng

Иконки изображений формата Ico скачать бесплатно 15,464 .

svg .png .ai .eps файлы

Сортировать по: По умолчанию В тренде Новейшие Релевантные Популярные Непопулярные Рекомендовать Запросить дизайн

сплошной шрифт замечательные иконки svg удивительный геометрический геометрический значок стикер пользователи люди приложение изображение приложение фото приложение спортивный жест

[иконки] изображения знак шаблон плоский контраст черный белый геометрический гора луна контур ( .ai .png .svg 282.58KB )

Все-бесплатно-download.com

[Значки] изображение файла значок кнопки плоский черный белый контрастный круг линии эскиз ( .ai .png .svg 182.50KB )

All-free-download.com

[ Иконки ] сжать стрелки Alt знак значок плоский силуэт симметричный дизайн ( .

ai .png .svg 352.50KB )

All-free-download.com

[Значки] значок знака урожая плоский черный контур силуэта (.ai .png .svg 265.67KB)

Все-бесплатно-download.com

[Значки] вид на улицу знак значок силуэт геометрический эскиз ( .ai .png .svg 147.50KB )

All-free-download.com

[Иконки] женский значок знак плоский симметричный геометрический дизайн силуэта ( .ai .png .svg 114.30KB )

All-free-download.com

[Значки] волейбольный мяч знак значок плоский черный белый эскиз ( . ai .png .svg 396,93 КБ)

All-free-download.com

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

[иконки] изображение знак значок плоский черный белый контраст горы луна символы эскиз ( .ai .png .svg 262.35KB )

All-free-download.com

[Значки] удалить значок формата значок плоский черный белый текст крест квадратной формы контур (.ai .png .svg 267.88KB)

Все-бесплатно-download.com

[ Иконки ] Значок знака камеры плоский черный белый контрастный эскиз ( . ai .png .svg 302.05KB )

All-free-download.com

[ Иконки ] значок знака времени пользователя плоский силуэт геометрический эскиз ( .ai .png .svg 135.11KB )

All-free-download.com

[Значки] значок проверки пользователя плоский силуэт геометрический эскиз ( .ai .png .svg 141.91 КБ)

All-free-download.com

[ Иконки ] улыбка знак значок плоский силуэт геометрический контур ( .ai .png .svg 156.30KB )

All-free-download.com

[Значки] дочерний знак значок плоский симметричный силуэт эскиз ( . ai .png .svg 132.45KB )

All-free-download.com

[Значки] знак аллергии значок плоский черный белый пятна руки эскиз (.ai .png .svg 354.17KB)

Все-бесплатно-download.com

[ Иконки ] изображение файла знак значок плоский контрастный геометрический эскиз ( .ai .png .svg 275.53KB )

All-free-download.com

[Значки] ползунки h знак значок плоский силуэт круги линии эскиз ( .ai .png .svg 278.00KB )

All-free-download.com

[Значки] знак камеры значок ретро плоский контрастный черный белый контур ( . ai .png .svg 320.53KB )

Все-бесплатно-download.com

[Значки] пользовательский тег знак значок плоский силуэт геометрический эскиз (.ai .png .svg 147.31KB)

All-free-download.com

[ Иконки ] пользователь астронавт знак значок плоский контраст черный белый эскиз ( .ai .png .svg 165.66KB )

All-free-download.com

[иконки] туалет знак значок мужчина женщина значок эскиз плоский силуэт эскиз ( .ai .png .svg 1490,04 КБ )

All-free-download.com

[Значки] значок знака квиддича плоский черный белый контур ( . ai .png .svg 239.41KB )

All-free-download.com

[Значки] якорь знак значок плоский симметричный силуэт симметрия контур ( .ai .png .svg 350.05KB )

All-free-download.com

[ Иконки ] портретное изображение знак значок плоский контраст человек значок контур ( .ai .png .svg 266.31KB )

Все-бесплатно-download.com

[Значки] Шаблон знака удостоверения личности плоский контрастный черно-белый эскиз ( .ai .png .svg 272.42KB )

All-free-download.com

[Значки] значок молнии значок плоский силуэт эскиз ( . ai .png .svg 281.10KB )

All-free-download.com

[ Иконки ] значок шестеренки пользователя плоский силуэт геометрический контур ( .ai .png .svg 148.24KB )

Все-бесплатно-download.com

[иконки] пользователь alt косая черта знак значок плоский геометрический силуэт круг перекрестная линия эскиз (.ai .png .svg 154.91KB)

All-free-download.com

[иконки] люди портрет знак значок плоский контраст геометрический эскиз ( .ai .png .svg 112.56KB )

All-free-download.com

[Значки] Бег спортивный знак значок плоский геометрический силуэт эскиз ( . ai .png .svg 260.06KB )

Все-бесплатно-download.com

[иконки] изображение файла значок кнопки плоский черный белый луна гора контур ( .ai .png .svg 188.36KB )

All-free-download.com

[ Иконки ] развернуть знак значок черный симметричный эскиз с прямыми углами ( .ai .png .svg 270.35KB )

All-free-download.com

[ Иконки ] шаблон знака alt урожая плоский силуэт прямоугольная форма линии ( .ai .png .svg 225.86KB )

Все-бесплатно-download.com

[Значки] пользовательские часы знак значок плоский силуэт геометрический контур ( . ai .png .svg 143.27KB )

All-free-download.com

[ Иконки ] пользователь alt 1 значок знака силуэт геометрические округлые формы ( .ai .png .svg 130.70KB )

All-free-download.com

[ Иконки ] мужской значок знак плоский силуэт эскиз симметричная геометрия ( .ai .png .svg 118.27KB )

Все-бесплатно-download.com

[ Иконки ] значок знака настольного тенниса плоский силуэт контур мяча ( .ai .png .svg 267.10KB )

All-free-download.com

формат ico ico формат ico изображение изображение ico формат изображения ico формат изображения yahoo

Загрузка дополнительных элементов, пожалуйста, подождите. ..

Идет загрузка дополнительных элементов, пожалуйста, подождите…

Критерий поиска:

Тип поиска:

Совпадение с любымСовпадение со всеми

Искать в:

ВекторыИконкиФотографииШрифтыШаблоны сайтовPSD

Лицензия:

Все лицензииРазрешить коммерческое использование

Результат сортировки:

Сначала лучшее совпадениеСначала новыеСначала много загрузокСначала меньше загрузок

• Домашний
• Лицензии
• Срок
• Конфиденциальность
• О
• Связаться с

Изменение размера ICO

Об ICO Resizer: как бесплатно изменить размер фавиконки?

ico resizer — это бесплатный онлайн-инструмент, который поможет вам изменить размер ваших изображений до стандартных размеров для формата . ico (от 16×16 до 256×256). Вы можете импортировать изображение со своего устройства или с внешнего URL-адреса.

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

Зачем нам нужен ICO Resizer?

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

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

В чем действительно нуждаются многие люди, так это в простом инструменте редактирования изображений для обрезки и изменения размера фотографий и рисунков. Web Showcasing Ninjas рада предложить такой инструмент администраторам веб-сайтов и любителям веб-медиа. По сути, это для каждого человека, которому нужно базовое устройство для работы с картинками для веба.

Примечание. Не используйте изображения .ico для этого инструмента. Вы можете преобразовать их в PNG с помощью нашего конвертера ICO в PNG, а затем изменить их размер с помощью ICO Resizer.

О формате ICO

Формат файла ICO — это формат файла, управляющий значками в операционной системе Microsoft Windows, но этот формат также широко используется для фавиконов.