.ico расширение файла

Как сделать иконку для сайта HTML?

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

Рисуем Favicon в Sketch или Photoshop

Значок можно нарисовать там же, где рисуются и другие части интерфейса. Например, Photoshop или Sketch. Покажу, как это работает на примере Sketch:

  1. Открываем редактор и рисуем иконку.
  2. Потом выделяем нарисованный элемент и меняем разрешение в боковом меню.
  3. Затем одновременно нажимаем клавиши Shift + Cmd + E.
  4. После этого нажимаем на кнопку Export Selected…

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

Большинство редакторов не умеют экспортировать в .ico по умолчанию. Придется скачать сторонний плагин для Фотошопа или шаблон для Sketch.

Преобразуем готовое изображение в фавиконку

Если уже есть рабочий вариант дизайна в неподходящем формате (.jpeg, .gif), можно конвертировать его в .png. Для этого сойдет любой базовый редактор изображений.

  1. Открываем будущую иконку.
  2. Меняем размер.
  3. Указываем нужный размер и формат. Сохраняем.
  4. Открываем меню «Файл» и нажимаем на пункт «Экспортировать…».
  5. Указываем расширение .png.

Готово!

Рисуем значок в браузере

Если нет Фотошопа или просто не нужен какой-то сложный дизайн, то можно на скорую руку нарисовать себе лого на сайте Favicon.cc. В этом случае все запредельно просто:

  1. Рисуем любую картинку во встроенном редакторе.
  2. А потом нажимаем на кнопку Download внизу.

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

В Favicon.cc можно сохранять рисунки только в расширении .ico. Имейте это в виду.

Конвертируем текст или эмоджи в значок

Есть вариант еще проще — сервис Favicon.io. На нем есть три конвертера: из картинки, из текста или из эмоджи в значок.

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

Но я попробую скачать иконку с эмоджи:

  1. Нажимаю на соответствующий конвертер.
  2. Кликаю по названию понравившегося смайлика.
  3. А потом жму на кнопку Download.

И все.

Icon Generator (Генератор): бесплатная программа-редактор favicon.ico и любых иконок для сайта и рабочего стола

Чтобы конвертировать BMP, PNG в ICO онлайн , требуется
специальная
программа
для создания иконок для сайта. При этом, хочется найти приложение,
которое поможет перевести изображение в иконку ICO 16х16, 32х32 не только быстро
и качественно, но еще и бесплатно.
Наша программа Icon Generator (Генератор)
станет для вас идеальным решением!

Пользоваться нашей программой для создания иконки для сайта,
favicon.ico легко и просто. Все что от вас требуется, чтобы конвертировать
BMP, PNG в ICO онлайн – выполнить несколько простых действий:

  • выберите на компьютере нужное изображение;
  • загрузите его в нашу программу;
  • нажмите «Создать ICO».

За несколько секунд задайте нужные параметры для будущего значка и создайте уникальную
иконку для сайта, favicon.ico.

Вы сможете продолжить свою работу, даже если при предыдущем посещении вам пришлось
прервать создание favicon.ico. А лучшие ваши работы вы всегда сможете найти и скачать
в галерее ICO на нашем сайте.

Загрузка иконок и файлов

В мае 2014 года запущена новая функция (о которой многие и давно просили) — загрузка изображений из файла. Расскажу о специфике.

От браузера требуется поддержка двух достаточно современных технологий — HTML5 convas и file API. То есть, вам понадобится Internet Explorer не ниже версии 10, или Firefox 28 и выше, или Google Crome 31 и выше. Подойдёт последние версии Safari и других браузеров.

Формат картинки в файле любой, поддерживаемый вашим браузером. Все браузеры поддерживают JPEG, PNG и GIF. Многие браузеры поддерживают и другие форматы.

Размер картинки может быть любым в пределах разумного. Картинка будет уменьшена до 16×16.

Цветность будет уменьшена до 16 цветов. Редактор пытается построить адаптивную палитру, но алгоритм пока далёк от совершенства. Я бы рекомендовал сперва подготовить картинку в полноценном редакторе.

Прозрачность преобразуется к однобитной по границе 50%.

Буду рад любым отзывам и либо уберу эту функцию, если она никому не нужна, либо доработаю, если обнаружатся какие-то ошибки. Спасибо.

Характеристики значков

Взять любую понравившуюся картинку и с ходу использовать ее как Favicon не получится. Надо соблюсти два несложных требования: выбрать подходящее расширение и размер.

Формат

Тут есть из чего выбирать:

  • .ico (.icns в macOS) — своего рода стандарт, используется повсеместно.
  • .png — более современный вариант, тоже широко распространен и поддерживается даже во многих старых браузерах.
  • .svg — перспективный векторный формат с вариативным разрешением под нужды конкретной страницы. Настраивается через CSS.

.svg не поддерживается в старых браузерах для ПК и некоторых Android-браузерах

У .png поддержка заметно шире

Можно использовать и другие форматы. Какой-нибудь .jpeg или .gif. Проблема может возникнуть лишь в поддержке со стороны программного обеспечения клиента.

Из-за особенностей браузеров в разных ОС я бы рекомендовал выбрать .ico. Самый каноничный формат, с которым точно не ошибешься.

Размер

Здесь тоже есть некие стандарты, но они разнятся от системы к системе. Часто используются размеры:

  • 16 на 16 точек
  • 32 на 32
  • 192 на 192
  • 512 на 512

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

1Создание иконки в нужном формате

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

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

Существует несколько способов создания рассматриваемых иконок:

  • онлайн-сервер
  • программы специального назначения

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

Как преобразовать JPG в ICO

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

Вариант 1: GIMP

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

Откройте изображение, которое вы собираетесь переработать в ICO через интерфейс GIMP.
В верхнем меню нажмите на пункт «Файл». Из контекстного меню выберите пункт «Экспортировать как». Можете использовать сочетание горячих клавиш Shift+Ctrl+E.
Запустится окошко настройки экспорта. В верхнем поле можно задать имя. Ниже выбираете формат «ico»

Обратите внимание, что он может называться «Значок Microsoft Windows». Здесь выбирается директория, куда будет сохранен преобразованный файл.
Нажмите кнопку «Экспортировать» для запуска преобразования.
Программа предложит выполнить настройку параметров ICO

Их можете оставить по умолчанию. Для подтверждения экспорта нажмите соответствующую кнопку.

Вариант 2: XnView

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

  1. С помощью этой программы откройте в режиме просмотра JPG-файл, который вам нужно преобразовать в ICO.
  2. В верхнем меню воспользуйтесь кнопкой «Файл» и выберите из контекстного меню «Сохранить как». Можно использовать комбинацию клавиш Ctrl+Shift+S.
  3. Появится окошко с настройками сохраняемого файла. Здесь указывайте имя файла. В «Тип файла» обязательно выберите параметр ICO. Нажмите «Сохранить».
  4. У вас появится окошко, предупреждающее о потери авторских прав после преобразования. Нажмите «Ок».

Вариант 3: Paint.NET

Является усовершенствованной версией обычного Paint. Распространяется на бесплатной основе, но по умолчанию не поддерживает работу с форматом ICO. Проблема решается скачиваем специального плагина. Его достаточно просто установить в саму программу.

Процесс установки плагина и взаимодействия с ним выглядит следующим образом:

  1. Скаченные файлы плагина скопируйте по одному из следующих адресов:
    • C:\Program Files\paint.net\FileTypes, если речь идет о 64-битной Windows;
    • C:\ Program Files (x86)\ paint.net\FileTypes, если вы пользуетесь 32-битной Windows.
  2. В верхнем меню нажмите по пункту «Файл». Из выпадающего списка выберите «Открыть» или воспользуйтесь сочетанием клавиш Ctrl+O.
  3. Выберите изображение, которое вы будете преобразовывать в ICO. Откройте его в интерфейсе Paint.NET.
  4. Снова нажмите на пункт «Файл» и выберите в контекстном меню пункт «Сохранить как». Можно воспользоваться сочетанием клавиш Ctrl+Shift+S.
  5. Укажите имя файла. В поле «Тип файла» поставьте значение «Icons (*.ico)». Нажмите «Сохранить».

Вариант 4: Adobe Photoshop

Данная программа является самым распространенным профессиональным графическим редактором. Однако распространяется на платной основе и, несмотря на весь свой функционал, не поддерживает работу с ICO-файлами. Данной ограничение исправляется с помощью плагина ICOFormat.

Инструкция по добавлению плагина и взаимодействию с ним выглядит следующим образом:

  1. Загруженный файл плагина необходимо поместить в одну из следующих директорий:
    • C:\Program Files\Adobe\Adobe Photoshop CC 2017\Plug-ins\File Formats для Windows x64;
    • C:\Program Files (x86)\Adobe\Adobe Photoshop CC 2017\Plug-ins\File Formats для Windows x32(x86).
  2. Иногда по указанному местоположению может отсутствовать папка File Formats. В таком случае просто создайте ее.
  3. Откройте изображение, которое собираетесь преобразовать через интерфейс программы.
  4. Измените его размер на 256×256 или меньше. Это можно сделать с помощью «Изображение» — «Размер изображения». В открывшемся окошке указываете новый размер картинки и жмете «Ок».
  5. В верхнем меню нажмите «Файл». Из выпавшего меню выберите пункт «Сохранить как».
  6. Укажите имя файла. «Тип файла» поставьте ICO и нажмите «Сохранить».
  7. Подтвердите выбор формата.

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

Конвертировать другие форматы в формат ICO

Форматы Перерабатывать
PNG в ICO PNG в ICO конвертер
JPG в ICO JPG в ICO конвертер
SVG в ICO SVG в ICO конвертер
GIF в ICO GIF в ICO конвертер
BMP в ICO BMP в ICO конвертер
AI в ICO AI в ICO конвертер
PSD в ICO PSD в ICO конвертер
PDF в ICO PDF в ICO конвертер
EPS в ICO EPS в ICO конвертер
TIFF в ICO TIFF в ICO конвертер
WEBP в ICO WEBP в ICO конвертер
DOCX в ICO DOCX в ICO конвертер
JPEG в ICO JPEG в ICO конвертер
CUR в ICO CUR в ICO конвертер
CDR в ICO CDR в ICO конвертер
TXT в ICO TXT в ICO конвертер
XCF в ICO XCF в ICO конвертер
DOC в ICO DOC в ICO конвертер
BIN в ICO BIN в ICO конвертер
TGA в ICO TGA в ICO конвертер
PPTX в ICO PPTX в ICO конвертер
WMF в ICO WMF в ICO конвертер
XPM в ICO XPM в ICO конвертер
PBM в ICO PBM в ICO конвертер
XLSX в ICO XLSX в ICO конвертер
RTF в ICO RTF в ICO конвертер
JP2 в ICO JP2 в ICO конвертер
TTF в ICO TTF в ICO конвертер
DDS в ICO DDS в ICO конвертер
EMF в ICO EMF в ICO конвертер
PPM в ICO PPM в ICO конвертер
CR2 в ICO CR2 в ICO конвертер
WOFF в ICO WOFF в ICO конвертер
PNM в ICO PNM в ICO конвертер
PICON в ICO PICON в ICO конвертер
CSV в ICO CSV в ICO конвертер
XPS в ICO XPS в ICO конвертер
PCT в ICO PCT в ICO конвертер
PGM в ICO PGM в ICO конвертер
CMX в ICO CMX в ICO конвертер
ABW в ICO ABW в ICO конвертер
DBK в ICO DBK в ICO конвертер
KWD в ICO KWD в ICO конвертер
SXW в ICO SXW в ICO конвертер
AW в ICO AW в ICO конвертер
3FR в ICO 3FR в ICO конвертер
ARW в ICO ARW в ICO конвертер
CRW в ICO CRW в ICO конвертер
DCM в ICO DCM в ICO конвертер
DCR в ICO DCR в ICO конвертер
DNG в ICO DNG в ICO конвертер
ERF в ICO ERF в ICO конвертер
EXR в ICO EXR в ICO конвертер
FAX в ICO FAX в ICO конвертер
FTS в ICO FTS в ICO конвертер
G3 в ICO G3 в ICO конвертер
HDR в ICO HDR в ICO конвертер
HRZ в ICO HRZ в ICO конвертер
IPL в ICO IPL в ICO конвертер
K25 в ICO K25 в ICO конвертер
KDC в ICO KDC в ICO конвертер
MAC в ICO MAC в ICO конвертер
MAP в ICO MAP в ICO конвертер
MEF в ICO MEF в ICO конвертер
MNG в ICO MNG в ICO конвертер
MRW в ICO MRW в ICO конвертер
MTV в ICO MTV в ICO конвертер
NEF в ICO NEF в ICO конвертер
NRW в ICO NRW в ICO конвертер
ORF в ICO ORF в ICO конвертер
OTB в ICO OTB в ICO конвертер
PAL в ICO PAL в ICO конвертер
PALM в ICO PALM в ICO конвертер
PAM в ICO PAM в ICO конвертер
PCD в ICO PCD в ICO конвертер
PCX в ICO PCX в ICO конвертер
PDB в ICO PDB в ICO конвертер
PEF в ICO PEF в ICO конвертер
PES в ICO PES в ICO конвертер
PFM в ICO PFM в ICO конвертер
PGX в ICO PGX в ICO конвертер
PICT в ICO PICT в ICO конвертер
PIX в ICO PIX в ICO конвертер
PLASMA в ICO PLASMA в ICO конвертер
PWP в ICO PWP в ICO конвертер
RAF в ICO RAF в ICO конвертер
RAS в ICO RAS в ICO конвертер
RGB в ICO RGB в ICO конвертер
RGBA в ICO RGBA в ICO конвертер
RGBO в ICO RGBO в ICO конвертер
RLA в ICO RLA в ICO конвертер
RLE в ICO RLE в ICO конвертер
SCT в ICO SCT в ICO конвертер
SFW в ICO SFW в ICO конвертер
SGI в ICO SGI в ICO конвертер
SR2 в ICO SR2 в ICO конвертер
SRF в ICO SRF в ICO конвертер
SUN в ICO SUN в ICO конвертер
TIM в ICO TIM в ICO конвертер
UYVY в ICO UYVY в ICO конвертер
VIFF в ICO VIFF в ICO конвертер
WBMP в ICO WBMP в ICO конвертер
WMZ в ICO WMZ в ICO конвертер
WPG в ICO WPG в ICO конвертер
X3F в ICO X3F в ICO конвертер
XBM в ICO XBM в ICO конвертер
XC в ICO XC в ICO конвертер
XV в ICO XV в ICO конвертер
XWD в ICO XWD в ICO конвертер
YUV в ICO YUV в ICO конвертер
ODT в ICO ODT в ICO конвертер
XLS в ICO XLS в ICO конвертер
DOT в ICO DOT в ICO конвертер
DOTX в ICO DOTX в ICO конвертер
DOTM в ICO DOTM в ICO конвертер
DOCM в ICO DOCM в ICO конвертер
WPS в ICO WPS в ICO конвертер
DJVU в ICO DJVU в ICO конвертер
OXPS в ICO OXPS в ICO конвертер
AZW3 в ICO AZW3 в ICO конвертер
EPUB в ICO EPUB в ICO конвертер
FB2 в ICO FB2 в ICO конвертер
LRF в ICO LRF в ICO конвертер
MOBI в ICO MOBI в ICO конвертер
RB в ICO RB в ICO конвертер
SNB в ICO SNB в ICO конвертер
TCR в ICO TCR в ICO конвертер
ODP в ICO ODP в ICO конвертер
POT в ICO POT в ICO конвертер
POTM в ICO POTM в ICO конвертер
POTX в ICO POTX в ICO конвертер
PPS в ICO PPS в ICO конвертер
PPSM в ICO PPSM в ICO конвертер
PPSX в ICO PPSX в ICO конвертер
PPT в ICO PPT в ICO конвертер
PPTM в ICO PPTM в ICO конвертер
CFF в ICO CFF в ICO конвертер
CID в ICO CID в ICO конвертер
DFONT в ICO DFONT в ICO конвертер
OTF в ICO OTF в ICO конвертер
PFA в ICO PFA в ICO конвертер
PFB в ICO PFB в ICO конвертер
PS в ICO PS в ICO конвертер
PT3 в ICO PT3 в ICO конвертер
SFD в ICO SFD в ICO конвертер
T11 в ICO T11 в ICO конвертер
T42 в ICO T42 в ICO конвертер
CDT в ICO CDT в ICO конвертер
CCX в ICO CCX в ICO конвертер
AFF в ICO AFF в ICO конвертер
DST в ICO DST в ICO конвертер
EXP в ICO EXP в ICO конвертер
PCS в ICO PCS в ICO конвертер
CGM в ICO CGM в ICO конвертер
SK в ICO SK в ICO конвертер
SK1 в ICO SK1 в ICO конвертер
PLT в ICO PLT в ICO конвертер
FIG в ICO FIG в ICO конвертер
DXF в ICO DXF в ICO конвертер

Как сделать favicon.ico самому

  1. Открыть Фотошоп.
  2. Создать документ 32×32 пикселей.
  3. Вставить из Иллюстратора смарт-объект готового изображения.
  4. С помощью команды «Сохранить как» сохранить фавиконку в формате.ICO *.
  5. Полученную фавиконку загрузить в корень сайта и подключить через тему Вордпресс, либо руками прописать в шаблон сайта. О том , я уже писал ранее.

Как установить плагин ICO (Windows Icon) Format

  1. 64-bit Windows (Vista/Windows 7):
    • Restart before installing;
    • Положить плагин в папку C:\Program Files\Adobe\Photoshop\Plug-Ins\File Formats, но у меня другая структура, у меня этот файл хранится здесь: C:\Program Files\Adobe\Adobe Photoshop CS6 (64 Bit)\Plug-ins .
    • If you are running on a 64-bit Windows system and are launching the 64-bit version of Photoshop CS4 or CS5, download the 64-bit version of the plugin
      and put it in the Plug-Ins folder corresponding to 64-bit Photoshop (i.e., the one in «Program Files» not «Program Files (x86)»).
  2. Move the plugin into the «File Formats» folder inside your Photoshop Plugins folder:
    • For Windows (32-bit), ICOFormat.8bi
    • For Windows (64-bit), ICOFormat64.8bi
    • For Mac OS X, ICOFormat.plugin
      (note that separate versions are provided for CS2, CS3/4 and CS5)
    • For Mac OS X/Classic, icoformat
    • For 68K MacOS, icoformat(68K)
  3. If using Corel PSP Photo X2, put the plugin in C:\Program Files\Corel\Corel Paint Shop Pro Photo X2\Languages\EN\PlugIns
  4. Quit and relaunch Photoshop, if it’s already running.

Есть еще онлайн-сервис //www.convertico.com/. ConvertICO это бесплатный онлайн-конвертер файлов ICO/PNG. Он работает быстро и прост в использовании. Он используется для преобразования значков рабочего стола, иконок приложений, а также фавиконок для веб-сайтов.

Устанавливаем плагин для того чтобы сделать favicon ico

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

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

Для чего нужны иконки ICO?

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

  • Простота распознавания. Создать иконки для сайта ICO 16х16 или
    48х48 – настоящая необходимость, если вы действительно заботитесь о своих пользователях.
    Давайте на секунду представим, что стандартные пункты меню, оснащенные надписями
    и иконками, стали плохо видны (для людей с плохим зрением это представить несложно).
    И, о ужас, мы больше не можем прочитать ни одной надписи! Тем не менее, практически
    все иконки ICO остались узнаваемыми – теперь, даже не читая надпись, мы можем с
    легкостью делать в программе нужные действия благодаря привычным значкам.
  • Узнаваемость. Решив создать иконку ICO, вы заметите, что каждый
    такой значок в отличие от надписи обладает своими собственными характеристиками
    – формой и цветом. Таким образом, чтобы отличить одну надпись от другой, вам нужно
    ее прочитать. В случае с иконками ICO ничего читать не надо – достаточно секундного
    взгляда.
  • Запоминаемость. Экспериментально доказано, что картинки запоминаются
    лучше, чем надписи. Таким образом, со временем иконка вызывает даже определенные
    ассоциации в голове у пользователя. А ведь именно это вам и надо! Решив воспользоваться
    программой для создания иконки для сайта в формате ICO, в конечном итоге вы сможете
    создать значок, который настолько запомнится вашему пользователю, что в дальнейшем
    будет ассоциироваться у него только с вашим сайтом.
  • Привлечение пользователей. Иконки ICO 16х16 – отличный способ привлекать
    на сайт пользователей чуть чаще. Не так давно веб-мастера придумали такую «фишку»
    — размещать иконку ICO в адресной строке рядом с именем сайта. Такой значок получил
    название favicon.ico и позволил выделить определенный сайт из множества конкурентов.
    Но подробнее об этом – в следующем пункте.

История формата: что такое ICO

Появились эти файлы еще в самых первых дистрибутивах «Виндовс». Со временем они заметно изменились.

Значки, введенные в Windows 1.0, имели размер 32×32 пикселя и были монохромными. Поддержка 16 цветов была представлена ​​в «Виндовс 3.0».

Win32 представила поддержку до 16,7 миллионов цветов (Truecolor) и 256×256 пикселей в размерах. Windows 95 также имела новый движок Device Independent Bitmap (DIB). Тем не менее, для значков в этой версии ОС использовались только 256 цветов. Можно было включить цвета 65535 (Highcolor), изменив значение значка командной строки Shell в реестре либо купив дополнение Microsoft Plus! для Windows 95.

Настройка Shell позволяла использовать более крупные значки вместо 32×32 в файле ICO. Что такое это означало? Один файл мог хранить в себе изображение любого размера от 1×1 до 256×256 пикселей (включая неквадратные размеры) с 2 (редко используемыми), 16, 256, 65535 или 16,7 миллионами цветов. Однако, на практике «оболочка» все равно не могла отображать значки большого цветового диапазона. Область уведомлений панели задач «Виндовс» была ограничена 16 оттенками по умолчанию до выхода Windows Me. Это означало, что независимо от настроек, иконки отображались на экране однотипно.

Обновленная структура

Что такое ICO-32? Этот формат представляет собой 24-битное изображение с добавлением 8-битного канала для альфа-компоновки. Таким образом, в 32-битных изображениях маски не требуются, но все равно их использование рекомендуется для лучшего рассмотрения картинки.

Windows версии XP и выше начали использовать 32-битное изображение в режиме True color, построив маску AND на основе альфа-канала в случаях, когда 24-разрядная версия не представлена ​​в файле ICO/CUR. Однако более ранние версии Windows интерпретируют все пиксели со 100% непрозрачностью, если только соответствующая маска не снабжена изображением.

Уменьшение изображения

Первое, что нужно сделать это уменьшить изображение которое вы хотите сделать «иконкой» до размера «256×256». Это можно сделать двумя способами, первый из них по-проще, но второй тоже не трудный.

Способ 1:

В редакторе «Gimp», в верхнем баре нажать на «Изображение», затем выбрать «Размер изображения».

В открывшемся окне установить значения высоты и ширины 256.

Получилось не красиво, но для ленивых сойдёт.

Лучше делать вторым способом, т. к. я так и делал.

Способ 2:

Создать новое изображение, в баре нажать «Файл» выбираем «Создать».

Ширину и высоту указать «256×256», остальные параметры не трогаем.

У нас получается это.

Щёлкаем правой клавишей мыши на слой «Фон» и выбираем «Добавить альфа-канал ».

Теперь открываем ваше изображение в редакторе «Gimp». !Созданное изображение не закрываем!

В верхнем баре нажимаем кнопочку «Правка» и выбираем «Копировать».

Возвращаемся к созданному, пустому изображению «256×256».

И в верхнем баре нажимаем кнопочку «Правка» и выбираем «Вставить».

У вас получится что-то похожее:

После нажатия на инструмент «Масштаб» (ничего не меняем там), щёлкаете по этой картинке которую хотите уменьшить и открывается окошко с настройкой масштаба. У меня значения «Ширина» и «Высота» будут отличаться от ваших, это зависит от размера самой картинки.

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

Нажимаем «Изменить».

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

Сделаем это инструментом «Перемещение» на панели инструментов. Нажимаем на инструмент.

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

Постарайтесь, что бы изображение не выходило за края, если не выйдет, то можно дополнительно уменьшить слой инструментом «Масштаб». У меня вышло так:

Когда мы подогнали изображение под холст не изменив его пропорций (такая задача заключалась в этом втором способе), можно удалить слой «Фон». На панели «Слои-Кисти» щёлкните по слою «Фон» правой кнопкой мыши и выберете «Удалить слой».

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

Если жёлтый пунктир находится по краям холста как тут:

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

Теперь приступим к самому созданию качественной иконки формата «.ico».

Как сделать favicon.ico самому

  1. Открыть Фотошоп.
  2. Создать документ 32×32 пикселей.
  3. Вставить из Иллюстратора смарт-объект готового изображения.
  4. С помощью команды «Сохранить как» сохранить фавиконку в формате.ICO *.
  5. Полученную фавиконку загрузить в корень сайта и подключить через тему Вордпресс, либо руками прописать в шаблон сайта. О том , я уже писал ранее.

Как установить плагин ICO (Windows Icon) Format

  1. 64-bit Windows (Vista/Windows 7):
    • Restart before installing;
    • Положить плагин в папку C:\Program Files\Adobe\Photoshop\Plug-Ins\File Formats, но у меня другая структура, у меня этот файл хранится здесь: C:\Program Files\Adobe\Adobe Photoshop CS6 (64 Bit)\Plug-ins .
    • If you are running on a 64-bit Windows system and are launching the 64-bit version of Photoshop CS4 or CS5, download the 64-bit version of the plugin
      and put it in the Plug-Ins folder corresponding to 64-bit Photoshop (i.e., the one in «Program Files» not «Program Files (x86)»).
  2. Move the plugin into the «File Formats» folder inside your Photoshop Plugins folder:
    • For Windows (32-bit), ICOFormat.8bi
    • For Windows (64-bit), ICOFormat64.8bi
    • For Mac OS X, ICOFormat.plugin
      (note that separate versions are provided for CS2, CS3/4 and CS5)
    • For Mac OS X/Classic, icoformat
    • For 68K MacOS, icoformat(68K)
  3. If using Corel PSP Photo X2, put the plugin in C:\Program Files\Corel\Corel Paint Shop Pro Photo X2\Languages\EN\PlugIns
  4. Quit and relaunch Photoshop, if it’s already running.

Есть еще онлайн-сервис //www.convertico.com/. ConvertICO это бесплатный онлайн-конвертер файлов ICO/PNG. Он работает быстро и прост в использовании. Он используется для преобразования значков рабочего стола, иконок приложений, а также фавиконок для веб-сайтов.

Сейчас я максимально подробно расскажу как сделать нормальный «.ico», что бы он корректно отображался в операционных системах Windows, на других системах тоже по идее должен, но это не проверенно. Этот урок создан для широкой аудитории, как для знающих, так и для совершенно не знакомых с «Gimp». Например, вы отличный программист, создаёте программы на заказ, интегрируете в них уже готовые «.ico», но вдруг вы решили создать что-то своё, но вы не владеете ни одним графическим редактором, этот урок поможет вам. В этом уроке я буду объяснять не только какие инструменты нужно использовать, а ещё и как их нужно использовать.

Для начала скажу не знающим людям, что такое «.ico» и для чего он нужен.

«.ico» — формат «картинок» присвоенных определённой программе, например:

Перед вами исполняемый файл «Gimp 2.8», а выделенное красной линией и есть «.ico» файл, уже интегрированный в приложение.

То есть, выражаясь простым языком, это картинка программы. Так же «.ico» файл может быть иконкой сайта, курсором, но сейчас нам это не нужно.

Ну вот и всё, приступим к уроку. В этом уроке я буду использовать эту картинку.

Как подключить Favicon к сайту?

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

АТРИБУТ

ЗНАЧЕНИЕ

rel

icon указывает на тип используемого ресурса.

href

Здесь указывается путь до файла. Можно ввести ссылку до сервера или внешнего каталога.

type

Тут указывается тип изображения. Например, image/png для картинок в формате .png, image/svg для .svg. или image/x-icon для .ico

Можно вписать несколько разных значков. Браузер все равно сам выберет подходящую иконку. Такой подход предлагается в Favicon.io.

Например, я скачал себе .ico с сайта. Затем делаю следующее:

  1. Кидаю картинку в корневой каталог ресурса (туда же, где лежит index.html).
  2. Потом открываю index.html и прописываю в head строчку <link rel=”icon” href=”/favicon.ico” type=”image/x-icon”>.

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

Теперь вы знаете, как сделать иконку сайта на вкладке HTML. Рисуем картинку в .ico или .svg, кидаем ее в любое удобное место, а затем прописываем адрес с форматом в head.

Загрузка иконок и файлов

В мае 2014 года запущена новая функция (о которой многие и давно просили) — загрузка изображений из файла.
Расскажу о специфике.

От браузера требуется поддержка двух достаточно современных технологий — HTML5 convas и file API.
То есть, вам понадобится Internet Explorer не ниже версии 10, или Firefox 28 и выше, или Google Crome 31 и выше.
Подойдёт последние версии Safari и других браузеров.

Формат картинки в файле любой, поддерживаемый вашим браузером. Все браузеры поддерживают
JPEG, PNG и GIF. Многие браузеры поддерживают и другие форматы.

Размер картинки может быть любым в пределах разумного. Картинка будет уменьшена до 16×16.

Цветность будет уменьшена до 16 цветов. Редактор пытается построить адаптивную палитру,
но алгоритм пока далёк от совершенства. Я бы рекомендовал сперва подготовить картинку в полноценном редакторе.

Прозрачность преобразуется к однобитной по границе 50%.

Буду рад любым отзывам и либо уберу эту функцию, если она никому не нужна, либо
доработаю, если обнаружатся какие-то ошибки. Спасибо.

Что такое favicon.ico

favicon — это небольшая картинка, являющаяся логотипом сайта.
Она появляется в шапках вкладок, в адресной строке
(кроме новейших версий Chrome и Firefox
†),
в закладках.

В одном файле favicon.ico может быть несколько изображений разного
размера. Чаще всего используется изображение 16×16. Бо́льшие размеры
используются, например, в Windows, при создании закладки прямо на
рабочем столе. В этом случае размер зависит от версии операционной
системы и настроек рабочего стола.

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

Как разместить favicon.ico на своём сайте

Проще всего просто положить иконку в корень сайта. Она должна
стать доступна по адресу . Именно
тут её будут искать браузеры.

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

Вы так же можете явно указать браузерам, что у вас есть favicon.

Для этого надо включить в секцию код такого вида:

Что касается , тут есть неоднозначность. Стандартным типом
является . Я бы советовал использовать его. Однако,
особо древние версии IE предпочитают тип
. Подозреваю, что все современные
браузеры поддерживают этот тип, но кто знает. Каждые пару месяцев
появляется новый современный браузер и поручиться за все современные
браузеры я не могу.

Возможно вас так же заинтересует
конвертер PNG в ICO и
онлайн генератор обоев, фонов и заливок.

Отправить

Оцените статью
Рейтинг автора
5
Материал подготовил
Илья Коршунов
Наш эксперт
Написано статей
134
Добавить комментарий