Ico создать: бесплатная программа для создания иконок ICO, favicon для сайта

Содержание

Чем создать ICO файл? Программы для создания ICO файлов

ICO

Рассмотрим основные варианты, с помощью которых можно создать файл формата ICO (Icon File).
Зачастую выполнение данной задачи не потребудет каких-либо особых хитростей, просто скачайте Inkscape (для операционной системы Windows) — интерфейс программы не сложный, да и скачать ее вы можете бесплатно.
Если же вы пользуетесь операционной системой Mac — скачайте Apple Preview как основную для данной платформы.

Вооружившись программой с правильным функционалом, вы наверняка не испытаете проблем с созданием файла ICO.
Мы собрали в общий список все программы походящие под данную задачу для ОС Windows, Mac, Linux, Android и сделали удобную таблицу:

Программы для создания ICO файлов

Чем создать ICO в Windows?

Mac

Linux

Android

Общее описание расширения ICO

Файл ICO представляет из себя формат хранения значков в операционной системе от Майкрософт. Данное расширения файла, является форматом изображения и может содержать иконки файлов, программ и папок в системе Windows. Такой формат файлов, состоит из двух побитовых изображений, одно из которых является маской изображения (AND), а второе представляется в качестве самой иконки, отображаемой на маске (XOR).

Узнать подробнее что такое формат ICO

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

Сделать 🖼 Favicon для сайта

Как пользоваться сервисом для создания favicon?

  1. Нажмите «Выбрать изображение с компьютера» и загрузите картинку в форматах jpg, jpeg, png или gif. Подберите квадратное изображение без мелких деталей.
  2. Нажмите «Создать Favicon»;
  3. Сервис покажет пример того, как будет выглядеть ваш favicon. Если результат вас устраивает, скачайте готовый файл. Вы получите файл favicon.ico для сайта, то есть файл с расширением *.ico, его и надо будет использовать в дальнейшем.

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

Для разной аудитории сайта нужна поддержка основных браузеров и платформ — Windows Firefox, iOS Safari, Internet Explorer, Android Chrome и других. Для мобильных устройств часто прописывают отдельные иконки с другими размерами. Для этого указывают тип устройства в rel, к примеру, «apple-touch-icon», и атрибут sizes с размером.

Достаточный пакет

Будет достаточно одного файла favicon.ico с размерами 48×48.

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

Как установить favicon на сайт

  1. Сохраните картинку в корневой каталог сайта с именем favicon.ico, чтобы получился адрес вида https://sitename. ru/favicon.ico. Это путь к изображению. Он понадобится, если вы захотите использовать разные фавиконы для разделов сайта, чтобы пользователи лучше ориентировались в разделах ресурса. Если вы используете один favicon для всего сайта, путь к нему указывать не нужно.
  2. Добавьте ссылку на размещенный файл в HTML-код главной:
    
    <link rel="icon" href="https://sitename.ru/favicon.ico" type="image/x-icon">

Зачем делать favicon?

Никакой функции для SEO он не несет, но его использование позволяет повысить узнаваемость сайта, и, как следствие, показателя CTR.

Узнаваемость сайта

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

Информативность

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

Запоминаемость бренда

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

Как сделать файл ico. Создание иконки.ico для программ

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

Вы, конечно можете попытаться найти готовый файл favicon.ico на сайте www.iconfinder.com, но думаю многим хотелось бы сделать что-то свое. Ведь именно фавиконка будет выделять ваш сайт в поисковой выдаче. Подробнее об этом можете прочесть в статье « ». Итак, приступим.


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

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

* Если у вас не установлен специальный плагин ICO (Windows Icon) Format
, можете скачать его с сайта //www.telegraphics.com.au/sw/ . Там есть для Маков, Винды 32, 64-разрядных с поддержкой всех версий Photoshop, включая CS6.

Как установить плагин 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» файл может быть иконкой сайта, курсором, но сейчас нам это не нужно.

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

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

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

Способ 1:

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

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

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

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

Способ 2:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

2. 15 копий слоя

После создания картинки нужного нам размера, нужно откопировать слой 15 раз, то есть что бы было 15 одинаковых слоёв в панели «Слои-Кисти» . Да, это не опечатка, именно 15, потому что мы будем создавать качественный «.ico» файл.

Для начала я объясню, что мы будем потом делать с этими пятнадцатью слоями. В файле «.ico» структура слоёв будет состоять из трёх разных по качеству «отделений» (в каждом из них будет по 5 разных размеров иконки), что бы файл было видно везде.

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

2.1 Копируем

Создаём 15 копий. При помощи панели «Слои-Кисти» , кликаем на слой правой кнопкой мыши и выбираем «Создать копию слоя».

И делаем так пока не будет 15 слоёв в списке.

Я растянул панель, что бы вы увидели, что слоёв именно 15. Это делать не обязательно, но это удобно. Так же, для простоты понимания, я переименовал слои с учётом их «отделений», опять же не обязательно, но удобно.

2.2 Масштабируем

С помощью инструмента «Масштаб» изменяем слой который назван у меня «2», не нарушаем структуру строения. Устанавливаем значение высоты и ширины 48, то есть слой должен получиться 48×48. Слой «3» должен быть размером 32×32. Слой «4» — 24×24 и наконец слой «5» должен быть 16×16. У вас получится что-то похожее.

Так же делаем с остальными «отделениями».

И последний рывок.

В итоге у нас получается:

3. Экспорт (сохранение) иконки в нужном формате

Открывается окно с сохранением работы. Обратите внимание, название файла не имеет значения, оно может быть любым, а формат должен быть только «.ico», как на скриншоте.

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

То есть, первое «отделение» с пятью картинками должно быть «8 bpp», второе — «24 bpp», а третье — не изменяйте. Всё, поздравляю вас, теперь вы умеете делать качественные «.ico». Вот пример использования этой иконки интегрированной в программу.

Я приму вашу критику, помогу разобраться если вы что-то не поняли. Спасибо за внимание.

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

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

Для начало работы, необходимо что бы Photoshop мог сохранять картинки в формате ico. Для этого необходимо проделать следующие действия:

а. скачать плагин разархивировать и перенести его в следующую папку: C:\Program Files\Adobe\Photoshop CS\Plug-Ins\File Formats

б. Затем перезапустить Photoshop и преступить к созданию favicon ico.

Теперь можем сделать favicon ico

Для того что бы сделать favicon ico нет необходимости в знаниях всех тонкостей Photoshopa. Вполне достаточно и общего знакомства с Photoshop так как, для того что бы сделать favicon ico нет необходимости в умении пользования графическими редакторами. Таким образом, создание favicon ico является вполне простой и выполнимой задачей.

Итак, запускаем Photoshop и для создания favicon ico нажимаем кнопку в правом верхнем углу: Файл — Создать.

Появляется следующее окно, в котором указываем ширину и высоту favicon ico, соответственно 16х16 пикселей так же можем задать фон favicon ico. Так фон favicon ico выбираем прозрачным, расширение 96 пикс/дюйм, цветовой режим выбираем RGB и соответственно 8 бит.

В последствие берем инструмент масштаб и приближаем favicon ico с тем, что бы было удобнее рисовать favicon ico.

Указываем размер карандаша

Указываем цвет карандаша и рисуем favicon ico изменяя карандаш на нужный цвет.

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

После того как нарисовали favicon ico, необходимо сохранить сделанный favicon ico.
Для этого нажимаем следующие команды: Файл — Сохранить как или ctrl+shift+s.

Выбираем тип файла: ICO (Windows Icon)(*.ICO)

Указываем имя файла: favicon.ico

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

Сохраняем favicon. ico в корне сайта, где расположена страница index.html

Проверяем правильность сделанного favicon ico

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

Остается только дождаться индексации favicon ico и тогда в Яндексе в результатах поиска favicon ico будет отображаться напротив страниц сайта. Индексация favicon ico может проходить, от недели до нескольких месяцев.

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

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

Fasticona 1.0 free portable

Более простой программы для создания иконок я не встречал. Она даже не требует установки. На Fasticona 1.0 free portable не позволяется рисовать иконки, она их делает из готовых картинок. Вы можете сделать значок из любого изображения, (хоть из собственного фото) программа поддерживает разнообразные форматы. Простыми словами – это просто конвертер изображений.

Перед тем, как сделать иконку из картинки, загрузите изображение в программу с помощью кнопки «Open file». Выберите нужные параметры: размер (size), глубину цвета (colors и bits per sample), папку сохранения (output path, по умолчанию, папка, где сохранён запускающий файл) и название файла иконки (output the name).

Полученный файл сохраняется в формате *.ico. И только в нём.

Seanau Icon Tool Kit 6.0

Seanau Icon Tool Kit 6.0 придётся установить на компьютер, но места она займёт очень мало. Функционал у неё более расширенный. Эта программа позволяет как сделать иконку из картинки, так и нарисовать её самому. Для того у неё есть широкий инструментарий.

Создание favicon для сайта 2020 / Хабр

Что такое favicon и для чего он нужен?

Favicon – это значок (иконка), который отображается во вкладке браузера, закладках, а также в сниппетах результатов поиска.

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

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

Какой формат использовать для favicon?

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

О каких платформах пойдет речь в этой статье?

  • Десктопные браузеры
  • Chrome на Android
  • Иконка закладки в iOS (PWA)
  • macOS
  • Windows

Десктопные браузеры

Начнем, пожалуй, с классического десктопа.

Как было упомянуто ранее, формат ICO сегодня является устаревшим, но это не значит, что про него нужно забыть. Формат ICO может спасти вашу иконку и корректно отображать favicon в некоторых случаях. Например, до 11 версии IE PNG-формат не поддерживается. Поэтому для IE10 и младших версий нужно использовать старый формат ICO. В таком случае желательно использовать следующую комбинацию ICO и PNG форматов:

<link type="image/x-icon" rel="shortcut icon" href="…/favicon.ico">
<link type="image/png" rel="icon" href="… /favicon-16x16.png">
<link type="image/png" rel="icon" href="…/favicon-32x32.png">
<link type="image/png" rel="icon" href="…/favicon-96x96.png">
<link type="image/png" rel="icon" href="…/favicon-120x120.png">

Для создания мульти-размерной иконки ICO можно использовать сервис-конвертер icoconvert. При генерации иконки необходимо выбрать следующие размеры: 16х16, 32х32, 48х48 (highest resolution icon).

Иконки PNG имеют следующие размеры: 16х16, 32х32, 96х96, 120х120. Зачем иконка 120х120? Яндекс Справка сообщает, что может воспользоваться иконкой данного размера.

Если обратить внимание на значение rel (тип ресурса), то icon – учитывается большинством браузеров, а shortcut icon – учитывается браузером IE.

Chrome на Android

Android ожидает увидеть значок 192х192 в формате PNG, alpha-канал (прозрачность) приветствуется.

<link type="image/png" rel="icon" href="…/android-icon-192x192.png">

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

Сам файл манифеста формата json и объявляется следующей строкой:

<link rel="manifest" href="…/manifest.json">

Файл манифеста для Android Chrome можно сгенерировать с помощью сервиса RealFaviconGenerator.

{
 "name": "My Application",
 "short_name": "App",
 "description": "Application OK",
 "lang": "ru-Ru",
 "start_url": "/",
 "scope": "/",
 "display": "standalone",
 "theme_color": "#ffffff",
 "background_color": "#ffffff",
 "icons": [
  {
   "src": "\/res\/img\/icons\/android-icon-72x72.png",
   "sizes": "72x72",
   "type": "image\/png",
   "density": "1.5"
  },
  {
   "src": "\/res\/img\/icons\/android-icon -96x96.png",
   "sizes": "96x96",
   "type": "image\/png",
   "density": "2.0"
  },
  {
   "src": "\/res\/img\/icons\/android-icon-144x144.png",
   "sizes": "144x144",
   "type": "image\/png",
   "density": "3.0"
  },
  {
   "src": "\/res\/img\/icons\/android-icon-192x192.png",
   "sizes": "192x192",
   "type": "image\/png",
   "density": "4.0"
  },
  {
   "src": "\/res\/img\/icons\/android-icon-512x512.png",
   "sizes": "512x512",
   "type": "image\/png"
  }
 ]
}

Иконки должны иметь следующие размеры: 72х72, 96х96, 144х144, 192х192, 512х512 в формате PNG, прозрачность приветствуется. Так как иконка может иметь прозрачный фон, то в манифесте можно указать цвет с помощью background_color.

Стоит отметить, что на телефоне пользователь имеет возможность сохранить страницу браузера на главный экран. Это будет просто ссылка на страницу вашего сайта, подтянется иконка с названием android-icon-192×192.png, которая объявлена у вас в коде.

Если же подключить к сайту манифест, то при открытии страницы пользователю может быть предложено сохранить сайт в качестве приложения. В данном случае вы имеет возможность объявить визуально ту же иконку (android-icon-192×192.png) или переделать дизайн иконки для приложения под свои нужды и объявить в манифесте с соответствующими размерами.

Иконка закладки в iOS (PWA)

iOS Safari ожидает увидеть apple touch icon. Это иконка PNG формата 180х180, без alpha-канала (без прозрачности). Углы иконки будут автоматически скруглены, что упрощает создание apple touch icon.

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

Нижеперечисленные размеры иконок предназначены для поддержки различных устройств, например, для iPhone и iPad:

<link rel="apple-touch-icon" href="…/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" href="…/apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" href="…/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" href="…/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" href="…/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" href="…/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" href="…/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" href="…/apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" href="…/apple-touch-icon-180x180.png">

В коде нужно добавить атрибут rel=«apple-touch-icon» и указать размер с помощью sizes.

Если на сайте нет значка, размер которого является рекомендованным для устройства, то будет использована сама близкая по размеру иконка большего размера. Основная apple touch icon это иконка размером – 180х180. Остальные устройства могут уменьшать иконку.

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

Следует отметить, что устройства под iOS не единственные, которые ищут apple touch icon. Некоторые браузеры, вроде Android Chrome, могут использовать apple touch иконки, так как они встречаются чаще других PNG иконок высоких разрешений.

macOS

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

Чтобы добавить иконку необходимо использовать формат SVG, который позволит сделать маску иконки. Данная иконка будет отображена при закреплении вкладки в Safari.

<link color="#e52037" rel="mask-icon" href="…/safari-pinned-tab.svg">

В коде нужно добавить атрибут rel=«mask-icon». Сама SVG-иконка должна быть черного цвета. Цвет иконки задается в атрибуте color=»#e52037″.

SVG-иконка используется в закрепленной вкладке (pinned tab – no focus) в монохромном виде. При наведении (pinned tab – focus) иконка будет закрашена в цвет, который имеет атрибут «color». В touch bar также передается цвет атрибута «color».

При создании иконки необходимо убрать все имеющиеся тени, сделать ее плоской и простой. Упростить иконку до одного объекта можно с помощью операций «Union» и «Flatten». Данные операции легко применить в программе Figma.

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

Windows

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

Для IE10 и более младших версий необходимо использовать формат ICO, так как до IE11 формат PNG не поддерживался.

С приходом IE11 и Windows 8.1 появилась возможность закреплять сайты в виде живых плиток. Для маленьких плиток используется по умолчанию favicon, а для больших и широких плиток необходимо задавать изображение конкретного размера. Это можно сделать с помощью добавления тегов метаданных в разметку сайта или создать browserconfig.xml (файл конфигурации браузера).

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

<meta name="msapplication-TileImage" content="…/mstile-144x144.png">
<meta name="msapplication-square70x70logo" content="…/mstile-70x70.png">
<meta name="msapplication-square150x150logo" content="…/mstile-150x150.png">
<meta name="msapplication-wide310x150logo" content="…/mstile-310x310.png">
<meta name="msapplication-square310x310logo" content="…/mstile-310x150.png">

Данной строкой мы указываем цвет фона плитки:

<meta name="msapplication-TileColor" content="#2b5797">

Можно указать имя вашего веб-сайта:

<meta name="application-name" content="My Application">

Что такое browserconfig? Это XML-документ, в котором перечислены различные значки, соответствующие пользовательскому интерфейсу Metro UI.

Чтобы подключить файл browserconfig в разметке необходимо добавить следующую строку в head:

<meta name="msapplication-config" content="…/browserconfig.xml">

Сам файл будет выглядеть следующим образом:

<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
    <msapplication>
        <tile>
            <square70x70logo src="…/mstile-70x70.png"/>
            <square150x150logo src="…/mstile-150x150.png"/>
            <square310x310logo src="…/mstile-310x310.png"/>
            <wide310x150logo src="…/mstile-310x150.png"/>
            <TileColor>#ffc40d</TileColor>
        </tile>
    </msapplication>
</browserconfig>

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

В следующем списке приведены некоторые рекомендации по использованию различных размеров:

  • Small — 70×70 (Рекомендуемый размер: 128×128)
  • Medium — 150×150 (Рекомендуемый размер: 270×270)
  • Wide — 310×150 (Рекомендуемый размер: 558×270)
  • Large — 310×310 (Рекомендуемый размер: 558×558)

Например, для картинки 70х70 рекомендуемый размер 128х128. Это означает, что нужно создать картинку с прозрачным фоном размером 128х128, название которой будет mstile-70×70. То же самое нужно проделать с остальными размерами.

Подготовка favicons

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

Например, в моем случае вес всех изображений был 200кб, после сжатия 50кб. Качество изображений практически не изменилось. Вы можете воспользоваться любым удобным сервисом для сжатия картинок. Я использовала iloveimg.

Заключение

Последовательность подключения в разметке веб-сайта:

<link type="image/x-icon" rel="shortcut icon" href="…/favicon.ico">
<link type="image/png" rel="icon" href="… /favicon-16x16.png">
<link type="image/png" rel="icon" href="…/favicon-32x32.png">
<link type="image/png" rel="icon" href="…/favicon-96x96.png">
<link type="image/png" rel="icon" href="…/favicon-120x120.png">
<link type="image/png" rel="icon" href="…/android-icon-192x192.png">

<link rel="apple-touch-icon" href="…/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" href="…/apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" href="…/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" href="…/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" href="…/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" href="…/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" href="…/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" href="…/apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" href="…/apple-touch-icon-180x180.png">

<link color="#e52037" rel="mask-icon" href="…/safari-pinned-tab.svg">

<meta name="msapplication-TileColor" content="#2b5797">
<meta name="msapplication-TileImage" content="…/mstile-144x144.png">
<meta name="msapplication-square70x70logo" content="…/mstile-70x70.png">
<meta name="msapplication-square150x150logo" content="…/mstile-150x150.png">
<meta name="msapplication-wide310x150logo" content="…/mstile-310x310.png">
<meta name="msapplication-square310x310logo" content="…/mstile-310x150.png">
<meta name="application-name" content="My Application">
<meta name="msapplication-config" content="…/browserconfig.xml">

<link rel="manifest" href="…/manifest.json">
<meta name="theme-color" content="#ffffff">

С помощью последней строки кода «theme-color» можно закрасить адресную строку и строку уведомлений в любой цвет. В значении content задается цвет.

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

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

Конвертировать PNG в ICO онлайн, бесплатно преобразовать .png в .ico

Расширение файла .png
Категория файла images
Описание PNG – растровый графический формат, разработанный в качестве альтернативы GIF, который обладал коммерческой лицензией. В его основе находятся лучшие возможности предшественника, в том числе сжатие без потерь и поддержка прозрачного фона. Технология PNG обеспечивает сохранение всех этапов редактирования и восстановление шага с сохранением качества. Однако она не позволяет сохранять в одном файле сразу несколько картинок, что ограничивает ее использование при разработке анимированных изображений.
Технические детали Расширение PNG было предложено как инструмент, помогающий передавать и хранить изображения во Всемирной сети. Технология ограничивается 8-битным каналом прозрачности, благодаря чему можно корректировать цвета от непрозрачных до прозрачных. Она поддерживает 24-битовые цвета RGB, соответствующие картинки и оттенки серого. Правда, в качестве непрофессионального формата PNG не может отображать другие цветовые пространства. Открыть такие файлы позволяют большинство программ, также они запускаются в любых браузерах. Изображения отличаются небольшим весом при хорошем качестве.
Программы

Apple Preview

Microsoft Windows Photos

Adobe Photoshop CC

Corel Paint Shop Pro

Microsoft Windows Photo Gallery Viewer

Основная программа Microsoft Paint
Разработчик PNG Development Group (donated to W3C)
MIME type

image/png

Бизнес в цифре. Как создать криптовалюту и законно ли это в РФ :: РБК.Крипто

Предприниматель из Франции выпустил токены и продал их для развития своего дела. Насколько это реально в России, какие могут возникнуть трудности, и чем рискуют инвесторы

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

Свои цифровые монеты создают и торговые площадки. Например, утилитарный токен биржи Binance позволяет своим держателям понижать размер комиссий за сделки, а также участвовать в IEO, проводимых здесь. Схожее решения есть у платформ Kucoin, Huobi, OKEx и других.

Недавно, 12 апреля, свою криптовалюту создал отдельный предприниматель. Алекс Масмей, основатель компании, предлагающей кредиты в криптовалюте, выпустил на блокчейне Ethereum токен $Alex и продал его своим подписчикам. Таким образом бизнесмен смог привлечь $20 000 на развитие дела, о чем сообщил в своем Twitter-аккаунте.

Всего Масмей выпустил 1 млн токенов, 10% из которых распределил в рамках первичного предложения. Как заявил предприниматель, держатели криптовалюты смогут получить 15% от его дохода в течение трех лет, а также принимать участие в ведении бизнеса путем голосования.

Как создать свою криптовалюту

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

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

Другой, более простой и дешевый способ — создать криптовалюту поверх уже существующей. Подобные функции есть у блокчейна Ethereum. С его помощью можно выпустить токены стандарта ERC20, для этого не требуется владеть серьезными навыками программирования. Аналогичный механизм есть у платформ Waves, Eos, Ripple и Tron.

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

Создать свою криптовалюту в РФ — законно или нет?

Роман Янковский, советник практики IP / IT компании Tomashevskaya & Partners, член Комиссии по правовому обеспечению цифровой экономики Московского отделения Ассоциации юристов России, рекомендовал предпринимателям относиться к подобной идее осторожно. Если выпускать токены от имени физического лица, то такие действия не являются незаконными, рассказал эксперт. Но он отметил, что ответственность может наступить, если не вернуть деньги инвесторам — эти действия можно квалифицировать как мошенничество.

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

«Действительность такого договора весьма условная: закону он не противоречит, но с тем же успехом можно отправить деньги на случайный номер карты и потом требовать возврата с процентами. Скорее всего, по суду можно будет добиться лишь возврата первоначальной суммы», — считает Янковский.

Не согласен с коллегой Дмитрий Кириллов, старший юрист налоговой практики Bryan Cave Leighton Paisner (Russia) LLP, преподаватель Moscow Digital School. По его словам, законы РФ не позволят физическому лицу привлечь средства на финансирование бизнеса путем выпуска токенов.

«Согласно федеральному закону о привлечении инвестиций с использованием инвестиционных платформ № 259-ФЗ от 2 августа 2019 г. привлекать инвестиции в такой форме (ICO-подобные модели) может только организация или индивидуальный предприниматель. Обычное физическое лицо выпустить токены под личный бренд в России, на мой взгляд, не сможет», — уверен Кириллов.

Как быть с налогами?

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

Привлечение средств в формате токенсейла, может быть расценено как заем или как дарение от физических лиц, допустила Мария Аграновская, адвокат, управляющий партнер GRAD, преподаватель Moscow Digital School. В случае дарения придется заплатить налоги, предупредила эксперт.

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

Станет ли подобный формат популярен в России?

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

Другой точки зрения придерживается CTO платформы стабильных криптовалют Stasis.net Анатолий Князев. По его мнению, привлечение капитала таким способом не станет востребованным. Отчасти из-за негативного следа ICO. Большинство подобных проектов не принесли желаемого результата, что сказалось на отношении потенциальных инвесторов, пояснил предприниматель.

«Расцвет ICO происходил три года назад на волне хайпа криптовалют. В итоге, большая часть ICO проектов оказалась нежизнеспособной, и инвесторы лишились своих средств. Сегодня потенциальные инвесторы скептически относятся к инвестициям в новые малоизвестные токены, предпочитая известные криптовалюты», — рассказал Князев.

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

Выпуск своей криптовалюты в России — авантюра спорная

Масмею удалось привлечь $20 000 на развитие бизнеса — это факт. Однако неизвестно, что будет с деньгами инвесторов дальше. У предпринимателя может не получится развить свое дело, или же, теоретически, он не захочет этого сделать.

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

Как создать favicon (фавикон) для сайта


О чем статья:


  • Что такое фавикон и каких форматов он бывает


  • Какие требования предъявляют разные платформы


  • С помощью каких инструментов можно создать иконку


  • Можно ли не создавать фавикон и как это повлияет на выдачу


Что такое фавикон 


Favicon – это сокращение от favorites icon, то есть иконка для избранного. Это может быть логотип сайта или любое другое изображение, которое позволит сделать ресурс узнаваемым. Первоначально фавикон служил для визуального выделения сайтов в закладках. Сейчас он отображаться практически везде, где это возможно: во вкладках и на пустом начальном экране десктопных и мобильных браузеров, в адресной строке и на странице поисковой выдачи рядом с url сайта. Когда вы сохраняете закладку на сайт на главном экране мобильного устройства, там тоже будет отображаться фавикон. Поэтому если раньше можно было создать favicon одного размера только для отображения в браузере, то сейчас необходимо генерировать иконки под разные контексты, платформы и технологии.


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

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


Очень долго основным форматом фавикона был .ico. Он удобен тем, что в файл можно прописать сразу несколько размеров иконок с разной битностью. Сейчас ему на смену пришли форматы .png и .svg. Формат .svg используется в Safari MacOS, а .png — в остальных операционных системах и платформах. .ico до сих пор используется, но современные версии браузеров иногда не могут выбрать правильную иконку в файле, из-за чего фавикон отображается в низком разрешении. Фавиконку можно сделать в форматах .jpeg и .gif, однако мы не рекомендуем их использовать, потому что такие фавиконы поддерживают не все браузеры.


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




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


  • Один вариант с прозрачным фоном. Этот фавикон будет отображаться во всех местах рядом с url-адресом или именем сайта: в адресной строке, в закладках и пр.

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


Фавиконки отображаются на пустой стартовой странице Google


Особенности фавиконов для разных платформ

Десктоп

Несмотря на то, что формат .ico постепенно устаревает, его всё ещё можно встретить в браузерах Internet Explorer 10 версии и ниже. В них .png не поддерживается, поэтому для корректного отображения нужно прописать в коде сайта комбинацию .ico и .png форматов фавиконок. Размеры иконок: Google рекомендует устанавливать иконки, размеры которых кратны 48 пикселям. Т.е. 48х48, 96х96, 144х144. Или использовать формат .svg, который не имеет конкретного размера. Яндекс указывает в Справке, что рекомендуемые размеры favicon: 120х120 пикселей – именно такая иконка выглядит четче и заметнее в его сервисах, а также 16х16, 32х32 пикселей. Из всех форматов рекомендуемый – также .svg.


Если вы используете формат .ico, мультиразмерную иконку удобно создавать в сервисе icoconvert или аналогичном. В настройках выберите следующие размеры: 16х16; 32х32; 48х48 пикселей. Andriod, Chrome и Opera Google рекомендует создать фавикон для этих платформ размером 192х192 и 512х512 пикселей в формате .png. Назовите файлы соответственно android-icon-192×192.png или android-chrome-512×512.png.


Так выглядят фавиконы в мобильной версии браузера Google Chrome

Andriod, Chrome и Opera


Google рекомендует создать фавикон для этих платформ размером 192х192 и 512х512 пикселей в формате .png. Назовите файлы соответственно android-icon-192×192.png или android-chrome-512×512.png. 


Если вы хотите, чтобы иконку вашего сайта можно было сохранить на домашнем экране телефона, планшета и даже телевизора теперь, создайте файл .png размером 192х192 пикселя и веб-манифест – текстовый файл JSON, который предоставляет информацию о приложении. Затем добавьте файл site.webmanifest на свой сайт и сошлитесь на него в HTML-странице в теге <head> таким образом:

<link rel=”manifest” href=”/site.webmanifest”>

В манифесте есть ключ icons. Он принимает список иконок, их размеры и форматы. Если его не указать, браузер будет искать в коде такие варианты, как favicon.ico, <link rel=”icon” или, в крайнем случае, использует скриншот страницы.

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


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

Mac OS и iOS Safari Web Clip

Для корректного отображения в Mac OS favicon нужно создавать в формате .svg. Тогда иконка корректно отобразится при закреплении вкладки в браузере Safari. При создании фавикона, его нужно сделать простым, плоским и убрать все тени.
Для iOS Safari создают apple touch icon – фавикон в формате .png размером 180х180 пикселей. Как и в ОС Android, страницу сайта можно сохранить на экран мобильного устройства, и иконки в этом случае будут выглядеть как приложение. Такая ссылка называется Web Clip.

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

Apple touch icon используются не только в iOS. Браузер Chrome также может искать их в коде сайта, так как такие фавиконки часто встречаются, сделаны в нужном формате .png и в высоком разрешении.

Размеры фавиконов для разных экранов устройств Apple:





 

Ретина версия 6 и ниже 

Ретина версия 7 

Не ретина версия 6 и ниже 

Не ретина версия 7 

iPhone 

144х144 

120х120 

57х57 

60х60 

iPad 

144х144 

152х152 

72х72 

76х76 

Для iPhone 6 Plus версия 8 и выше – 180х180 пикселей.

Другие варианты 




Android TV (до 2014 г. – Google TV) 

Opera Coast 

96х96 

228х228 


Как создать?


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


Adobe Photoshop или Figma


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

изображения в пикселях и фон – прозрачный или непрозрачный.


Realfavicongenerator.net – генерирует фавикон разных размеров онлайн. Загружайте исходник размером не менее 260х260 пикселей, желательно квадратной формы. Затем выберите настройки для iOS, Android, Windows Phone, MacOS Safari. Дополнительно выберите степень сжатия. В результате получаете все типы иконок и код для вставки. 



Favicon.cc – еще один сервис для создания favicon формата .ico. Вы можете загрузить готовую картинку или нарисовать самостоятельно, используя инструменты графического редактора.



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


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

Как установить 


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


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


Положите файлы в корневую директорию сайта и проверьте корректность. Для этого введите в адресную строку “yoursite.com/favicon.ico” для файлов формата .ico, для других форматов — соответствующее расширение файла. Браузер должен отобразить иконку.


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


Десктоп (ico) — <link rel=»icon» type=»image/ico» href=»favicon.ico»>


Декстоп (png) — <link rel=»icon» type=»image/png» href=»favicon.png»>


Apple — <link rel=»apple-touch-icon» href=»apple-touch-favicon.png»>


Safari — <link rel=”mask-icon” href=”icon.svg”>


Андроид — <link rel=»shortcut icon» href=»favicon.png»>


Иконки в устройствах Apple всегда закругляются по углам, чтобы этого избежать используйте apple-touch-icon-precomposed вместо apple-touch-icon.


Проверьте ответ сервера. Фавикон индексирует специальный робот. Чтобы индексация прошла успешно, проверьте, что ссылка на фавикон не закрыта от индексации в файле robot.txt и отдает ответ сервера HTTP 200.


Узнайте, виден ли фавикон. Проверьте через сервисы, подставив адрес своего сайта: 


Если у сайта нет фавиконки, то Яндекс.Вебмастер предупреждает об ошибке. Она может отображаться в журнале с системной информацией. Если же браузер не нашел в коде сайта нужный файл, например, favicon.ico, то сервер зафиксирует ошибку 404.


Когда поисковые роботы видят наличие технических недостатков, то понижают сайт в выдаче. Так фавиконы косвенно влияют на SEO-продвижение ресурса.

Запомните

  1. Формат.ico устаревает. И Google, и Яндекс рекомендуют и использовать форматы .svg и .png. Проверяйте, какие форматы поддерживают браузеры с помощью сервиса caniuse.com.
  2. Раньше было достаточно создать один размер фавикона 16х16 пикселей. Сейчас делайте иконки во всех размерах. Если создали фавикон одного размера, то многие браузеры смогут перевести его нужный размер, но не исключены ошибки и некорректное отображение. Если в коде будут прописаны все размеры, то браузер подтянет нужный.

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


  4. Чтобы сделать favicon, воспользуйтесь графическими редакторами – Adobe Photoshop или Figma. Или специальными сервисами: realfavicongenerator.net, favicon.cc и аналогичными. Генерируйте иконки online сразу для всех видов браузеров и мобильных платформ.


  5. Положите созданную фавиконку в корневой каталог сайта или пропишите ссылку в теге <head>. Если вам нужны разные иконки для каждого раздела сайта, прописывайте их на каждой странице.


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


  7. Проверьте корректность индексации. Ответ сервера должен быть HTTP 200. Посмотрите видимость фавикона в Яндексе и Google через сервисы поисковиков.


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

Материал подготовила Светлана Сирвида-Льорентэ.

Определение первоначального предложения монет (ICO)

Что такое первичное размещение монет (ICO)?

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

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

Ключевые выводы

  • Первоначальные предложения монет (ICO) — популярный метод сбора средств, используемый в основном стартапами, желающими предлагать продукты и услуги, обычно связанные с криптовалютой и пространством блокчейнов.
  • ICO

  • похожи на акции, но иногда они полезны для предлагаемых программных услуг или продуктов.
  • Некоторые ICO принесли инвесторам огромную прибыль. Многие другие оказались мошенниками, потерпели неудачу или работали плохо.
  • Для участия в ICO вам обычно необходимо сначала приобрести цифровую валюту и иметь базовые представления о том, как использовать криптовалютные кошельки и биржи.
  • ICO

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

Как работает первичное предложение монет (ICO)

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

Во время кампании ICO энтузиасты и сторонники проекта покупают некоторые токены проекта за фиатную или цифровую валюту. Эти монеты называются покупателями токенами и похожи на акции компании, проданные инвесторам во время IPO.

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

Хотя ICO не регулируются, Комиссия по ценным бумагам и биржам (SEC) может вмешаться. Например, производитель Telegram привлек 1,7 миллиарда долларов в ходе ICO в 2018 и 2019 годах, но SEC подала экстренное действие и получила временный запретительный судебный приказ из-за предполагаемой незаконной деятельности со стороны команды разработчиков. Окружной суд США Южного округа Нью-Йорка вынес предварительный судебный запрет, и Telegram должен был вернуть 1,2 миллиарда долларов инвесторам и заплатить гражданский штраф в размере 18 долларов.5 млн.

Особые соображения

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

Как найти ICO для участия? Нет рецепта, чтобы быть в курсе последних ICO. Лучшее, что может сделать заинтересованный инвестор, — это читать о новых проектах в Интернете. ICO вызывают большой ажиотаж, и в Интернете есть множество мест, где инвесторы собираются, чтобы обсудить новые возможности. Существуют специальные сайты, на которых собираются ICO, что позволяет инвесторам открывать для себя новые ICO и сравнивать различные предложения друг с другом.

Сравнение первичного размещения монет (ICO) и первичного публичного предложения (IPO)

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

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

ICO также сохраняют как минимум два важных структурных отличия от IPO. Во-первых, ICO в значительной степени не регулируются, что означает, что государственные организации, такие как Комиссия по ценным бумагам и биржам (SEC), не контролируют их. Во-вторых, из-за их децентрализации и отсутствия регулирования ICO намного свободнее с точки зрения структуры, чем IPO.

ICO можно структурировать по-разному. В некоторых случаях компания устанавливает конкретную цель или лимит для своего финансирования, что означает, что каждый токен, проданный в ICO, имеет заранее установленную цену и что общее количество токенов является статическим.В других случаях существует статическая поставка токенов ICO, но динамическая цель финансирования — это означает, что распределение токенов среди инвесторов будет зависеть от полученных средств (т. Е. Чем больше общих средств получено в ICO, тем выше общий токен цена).

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

Изображение Сабрины Цзян © Investopedia 2020

Преимущества и недостатки первичного размещения монет (ICO)

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

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

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

ICO действительно сделали многих инвесторов миллионерами. Например, в 2017 году было проведено 435 успешных ICO, каждое из которых собрало в среднем 12 долларов США.7 миллионов. Таким образом, общая сумма привлеченных средств на 2017 год составила 5,6 миллиарда долларов, при этом на 10 крупнейших проектов было привлечено 25% от этой суммы. Кроме того, токены, приобретенные в ходе ICO, вернули в среднем 12,8 раза первоначальные инвестиции в долларовом выражении.

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

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

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

Центральный банк Китая запретил использование токенов в качестве валюты и запретил банкам предлагать услуги, связанные с ICO. В результате цены на биткойны и эфириум упали, что многие расценили как признак будущего регулирования криптовалюты. Запрет также наложил штраф на уже выполненные предложения. В начале 2018 года Facebook, Twitter и Google все запрещенная реклама ICO.Взаимодействие с другими людьми

Нет никакой гарантии, что инвестор не окажется в проигрыше от мошенничества при инвестировании в ICO. Чтобы избежать мошенничества с ICO, инвесторы должны:

  1. Убедитесь, что разработчики проекта могут четко определить свои цели. Успешные ICO обычно имеют простые и понятные технические документы с четкими и краткими целями.
  2. Знайте разработчиков. Инвесторы должны стремиться к 100% прозрачности компании, запускающей ICO.
  3. Ознакомьтесь с юридическими условиями, установленными для ICO.Поскольку внешние регулирующие органы обычно не контролируют это пространство, инвестор должен убедиться, что любое ICO является законным.
  4. Убедитесь, что средства ICO хранятся в кошельке условного депонирования. Это кошелек, для доступа к которому требуется несколько ключей. Это полезная защита от мошенничества, особенно когда держателем одного из ключей является нейтральное третье лицо.

Комиссия по ценным бумагам и биржам

представляет HoweyCoin

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

Комиссия по ценным бумагам и биржам США представила поддельную монету под названием HoweyCoin, чтобы продемонстрировать мелким инвесторам опасность ICO. HoweyCoin назван в честь теста Howey, который представляет собой тест для определения того, являются ли инвестиции ценной бумагой. Тест Howey предназначен для определения того, что транзакция представляет собой инвестиционный контракт, если человек вкладывает свои деньги в обычное предприятие. и вынужден ожидать прибыли исключительно от усилий промоутера или третьей стороны.Взаимодействие с другими людьми

Комиссия по ценным бумагам и биржам США использовала этот стандарт для взимания платы с Kik, службы обмена сообщениями, которая привлекла 100 миллионов долларов в ходе незарегистрированного ICO, с незаконной продажей ценных бумаг. Комиссия по ценным бумагам и биржам также приняла меры против Telegram, еще одного приложения для обмена сообщениями, которое также проводилось в рамках ICO.

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

Пример первичного предложения монет (ICO)

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

Иногда ICO с замечательной окупаемостью инвестиций не являются проектами, которые приносят больше всего денег, и наоборот. ICO Ethereum в 2014 году было пионером, собрав 18 миллионов долларов за 42 дня. Ethereum оказался решающим для пространства ICO в целом благодаря своим инновациям в отношении децентрализованных приложений (dApps). Когда он дебютировал, эфир стоил около $ 0.67, а по состоянию на 24 сентября 2020 года он торгуется на уровне 348,99 доллара.

В 2015 году началось двухэтапное ICO для компании Antshares, которая позже была переименована в NEO. Первый этап ICO завершился в октябре 2015 года, а второй продлился до сентября 2016 года. За это время NEO заработала около 4,5 миллионов долларов. Хотя это не один из крупнейших ICO с точки зрения привлеченных денег, он обеспечил исключительную рентабельность инвестиций для многих ранних инвесторов. Цена NEO во время ICO составляла около 0,03 доллара, а на пике она торговалась примерно на уровне 187 долларов.40.

Совсем недавно ICO генерировали значительно большие суммы с точки зрения общей суммы привлеченных средств. В течение месячного ICO, закончившегося в марте 2018 года, Dragon Coin удалось собрать около 320 миллионов долларов. Совсем недавно компания, стоящая за платформой EOS, побила рекорд Dragon Coin, собрав колоссальные 4 миллиарда долларов в течение годичного ICO.

Что такое ICO?

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

Ключевые выводы

  • Предприниматели, желающие запустить новую криптовалюту, могут сделать это посредством первичного предложения монет (ICO), разновидности первичного публичного предложения (IPO).
  • В настоящее время государственное регулирование ICO практически не регулируется, и любой может запустить его, при условии, что он внедрит технологию.
  • Как? Создайте технический документ или другой документ с описанием системы, создайте веб-сайт или приложение, описывающее, как это работает, и ищите финансирование.
  • Реклама играет ключевую роль, поскольку на рынке так много конкурирующих монет, поэтому очень важно выяснить, как привлечь внимание целевой демо.
  • Не хотите запускать новую монету, а хотите инвестировать в новую монету? Обязательно проведите тщательное исследование, так как существует ряд мошенников.

Так что же такое ICO?

Представьте себе: вы стартап из Кремниевой долины, у вас есть отличная идея для новой системы криптовалюты. Возможно, вы хотите упростить платежную систему для родителей / няни, чтобы она могла быть цифровой и зашифрованной.Какая отличная идея! Назовем это BabyCoin. Единственная проблема в том, что вам нужны люди, которые будут давать вам деньги, чтобы вы действительно могли зарабатывать валюту. Теперь вы можете пойти в банк или попытаться привлечь венчурных инвесторов, но что, если бы вы могли собрать деньги, не отказываясь от своей собственности в компании? Войдите в ICO.

Вот как это работает. Вы создаете документ, подробно описывающий, как именно будет работать система (обычно это называется белой книгой), делаете красивый веб-сайт и объясняете, почему это отличная идея, которая может быть очень полезной.Затем вы просите людей отправить вам деньги (обычно биткойны или эфиры, но вы также можете использовать фиат), а взамен вы отправляете им обратно немного BabyCoin. Они надеются, что BabyCoin будет широко использоваться и будет в большом обращении, что повысит стоимость валюты.

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

Итак, кто может запустить ICO?

Буквально кто угодно! В настоящее время в Америке очень мало регулирования ICO, то есть, пока вы можете настроить технологию, вы можете попробовать и получить финансирование в своей валюте. Сейчас криптовалюта в целом похожа на дикий запад; есть золото на холмах и относительно мало законов, о которых стоит говорить. Это может пойти вам на пользу или привести к мошенничеству. Из всех способов финансирования ICO, вероятно, является одним из самых простых в использовании как мошенничество.Поскольку нет никаких правил, ничто не мешает кому-то выполнить всю работу, чтобы заставить вас поверить, что у него есть отличная идея, а затем скрыться с деньгами.

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

Как начать собственное ICO?

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

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

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

Как и в любом бизнесе, нужно зацепить покупателя к концу первой страницы. В официальном документе Ethereum требуется время, чтобы объяснить, что такое блокчейн, а затем подробно рассказывается, как они намерены развивать прогресс, достигнутый Сатоши Накамото, и создавать что-то захватывающее. Все это они делают к концу первой страницы. Теперь, должен ли каждый официальный документ включать полную историю блокчейна, включая время, когда парень заплатил 10 000 биткойнов за пиццу? Вероятно, нет, но это должно быть понятно кому-то, кто не знает, как работают эти системы.

ICO практически не регулируется, особенно по сравнению с IPO для акций, поэтому проявите должную осмотрительность, прежде чем приступить к инвестированию.

Маркетинг вашего ICO

Теперь, когда у вас есть официальный документ, вам нужно рекламировать. У вас есть две цели, которых вы будете пытаться достичь: люди, знающие, как работают криптовалюты и ICO, и люди, которые практически ничего не знают. Вы захотите определить людей, которые будут больше всего взволнованы вашим новым предприятием, поскольку они будут более охотно давать вам деньги, если это означает для них сделку.В случае с BabyCoin (опять же, гипотетически), возможно, мы обратимся к некоторым популярным мамочкам-блогерам / влогерам и посмотрим, будут ли они заинтересованы в создании некоторого контента, чтобы продемонстрировать, почему BabyCoin является крупнейшим нововведением в сфере ухода за детьми со времен Клуба няни. Просто убедитесь, что они раскрывают характер сделки, чтобы рекламировать для вас: SEC выпустила предупреждение для инвесторов, в котором говорится, что знаменитости незаконно использовать социальные сети для поддержки ICO, не раскрывая, какую компенсацию они получили.

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

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

Что со всеми этими ICO знаменитостей?

Если вы видели, как ваши любимые актеры и артисты, такие как Джейми Фокс и Ghostface Killah, призывают своих последователей инвестировать в новое горячее ICO, возможно, вам стоит присмотреться к ним поближе.

Суперзвезда бокса Флойд Мэйвезер-младший и ди-джей Халед когда-то продвигали Centra Tech, ICO, которое привлекло 30 миллионов долларов в конце 2017 года, но в конечном итоге Centra в суде была названа мошенничеством, и двум знаменитостям пришлось согласиться с U.С. регуляторы. По состоянию на август 2020 года трое основателей Centra Tech признали себя виновными в мошенничестве с ICO.

Как определить, какие ICO хороши?

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

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

5 000

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

Будет ли кто-нибудь регулировать ICO?

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

Это означает, что SEC готовится принять жесткие меры в отношении ICO, которые, по их мнению, вводят инвесторов в заблуждение. Первый удар был нанесен 11 декабря 2017 года, когда SEC остановила работу калифорнийской компании Munchee, выпустившей приложение для обзора продуктов питания. Манчи пытался собрать деньги, чтобы создать криптовалюту, которая будет работать в приложении для заказа еды.Это первый случай, когда SEC прекращает проведение ICO для незарегистрированных ценных бумаг. Означает ли это, что молот вот-вот упадет? Посмотрим.

Итог

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

Инвестирование в криптовалюты и другие первичные предложения монет («ICO») очень рискованно и спекулятивно, и эта статья не является рекомендацией Investopedia или автора вкладывать средства в криптовалюты или другие ICO. Поскольку ситуация каждого человека уникальна, перед принятием финансовых решений всегда следует проконсультироваться с квалифицированным специалистом. Investopedia не делает никаких заявлений и не дает никаких гарантий относительно точности или своевременности информации, содержащейся в данном документе.На момент написания статьи автор не владеет криптовалютой ни в каком количестве.

Как создать и установить favicon.ico (Linux, GNU, Windows, Unix)

Как создать и установить favicon.ico (Linux, GNU, Windows, Unix)
[Обзор] [Новости] [Утилиты] [Статьи]
[Наука] [Стар.]


Как создать и установить

favicon.ico

Что такое фавикон

Favicon — это сокращение от «Значок избранного» (для вас «Значок избранного»
Американцы;).Название получено из списка закладок для Microsoft.
Internet Explorer, который называется «Избранное» / «Список избранного».
Когда вы добавляете сайт в список избранного / избранного,
Internet Explorer (версия 5 и выше) спрашивает сервер, есть ли у него файл
позвонил favicon.ico .
Если он присутствует, этот файл будет использоваться для отображения значка.
рядом с текстом закладки.

Другие браузеры, такие как Mozilla, также добавили поддержку значков. В зависимости от
в браузере значок может появляться в разных местах, а не только в
список закладок (на самом деле он может вообще не отображаться в списке закладок).Он может отображаться в адресной строке или в заголовке браузера.
вкладку, например.

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

Чтобы создать favicon.ico , просто создайте файл .PNG размером 16×16 и преобразуйте его.
в ресурс значков с png2ico. Если хотите, можете добавить больше изображений в
тот же ресурс значков для предоставления альтернативных разрешений. Большинство
браузеры используют только изображение 16×16, но в другом контексте (например, когда вы перетаскиваете
URL-адрес из адресной строки на рабочий стол) может отображаться значок большего размера.Если ресурс значка содержит только изображение 16×16, оно будет масштабировано до
подходящего размера, поэтому технически нет необходимости добавлять альтернативу
резолюции. Однако это может повысить качество отображаемого значка.

Имейте в виду, что для пользователя с медленным модемом favicon.ico может увеличиться.
время загрузки страницы на несколько секунд, если оно слишком велико, поэтому не
перестараться. Добавление альтернативы 32×32 должно быть достаточно, чтобы изображение
будет хорошо смотреться даже в контексте с более крупными значками.Добавление еще большего количества и больших альтернатив — ненужное раздувание.
Постарайтесь, чтобы количество цветов было меньше 16 и создайте значок из 16 цветов, используя
переключатель --colors 16 png2ico (или даже создать черно-белый значок
с переключателем --colors 2 ). Это приведет к меньшему
файл, который загружается быстрее.

Когда вы создаете изображения для включения в свой favicon.ico , не забывайте
что значок может быть составлен на фоне различных цветов, чтобы
вы должны использовать прозрачность, а не сплошной фон, если хотите
чтобы ваш значок не отображался внутри поля.Обратите внимание, что ресурсы значков
поддерживает только двоичную прозрачность, т.е. пиксель может быть видимым или невидимым
но не что-то вроде 30% полупрозрачности.

Установка вашего Favicon

Чтобы добавить новый favicon.ico на веб-страницу, поместите его на сервер в
в том же каталоге, что и веб-страница, для
(например, www.example.com/foo/favicon.ico для
www.example.com/foo/index.html ). Это первое место
браузер будет искать. Если он не находит там значка, он проверяет
каталог верхнего уровня сервера ( www.example.com/favicon.ico
для сервера www.example.com ), поэтому, поместив его туда, вы можете получить
значок по умолчанию для всех страниц в вашем домене. В зависимости от
браузер и конфигурация, favicon.ico не всегда
отображается, даже если он находится в одном из указанных выше мест,
если веб-страница явно не заявляет о своем присутствии. Заявить, что
на вашей веб-странице есть значок, вы добавляете следующие 2 строки в
раздел вашей страницы:



[Обзор] [Новости] [Утилиты] [Статьи]
[Наука] [Стар.]


Авторские права (c) 2000-2010, Матиас Бенкманн

[проверить эту страницу]

Преобразование изображений

— Как преобразовать .PNG в .ICO?

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

Вот как это делается вручную. Вы можете использовать GIMP, альтернативу Photoshop с открытым исходным кодом, которую можно загрузить с веб-сайта проекта. Никаких дополнительных плагинов не потребуется. Возьмите PNG, который хотите преобразовать. Размер должен быть не менее 128 пикселей, но лучше 256+.

Открыть сказал png в GIMP. Вы собираетесь сделать изображение из нескольких слоев.Когда вы закончите, каждый слой будет разного размера в готовой иконке. Вот макет слоя, который я обычно использую 256 пикселей (необязательно), 128 пикселей, 96 пикселей, 64 пикселей, 48 пикселей, 40 пикселей, 32 пикселей и 24 пикселей. Вы хотите иметь такое разнообразие размеров, потому что вам нужно учитывать все различные увеличения, которые пользователь будет иметь при просмотре в проводнике. 256 — это перебор, но почему бы не сделать иконку пригодной для будущего?

Шаг 1. Импортируйте png в gimp. Обычно я делаю это, используя «Открыть с помощью» в окнах png и выбирая gimp.После этого GIMP сделает все остальное. убедитесь, что это единственный слой на данный момент (удалите все фоновые слои, если gimp сделал таковые).

Шаг 2: Измените размер изображения до 256×256 (или 128×128, если вы не хотите использовать 256), щелкнув меню Изображение и выбрав Масштаб изображения . Если изображение, с которым вы работаете, не квадратное, вам придется обрезать его перед масштабированием, иначе оно будет выглядеть странно. Вы можете обрезать, используя инструмент выбора прямоугольника (убедитесь, что вы делаете квадратное выделение, нажимая Shift во время выбора).Когда вы закончите выбор, щелкните меню Image и выберите Crop to Selection .

Шаг 3: Дублируйте текущий слой, выбрав меню Layer и выбрав Duplicate Layer . Снова нажмите меню Layer и выберите Scale Layer и измените размер дублированного слоя до нового размера, например 128 или 96 и т. Д.

Шаг 4: промойте и повторяйте, пока не сделаете все слои до 24 пикселей.

, шаг 5: экспортируйте текущий чертеж как значок, щелкнув меню File и выбрав Export As .Когда вы получите диалоговое окно, убедитесь, что вы ввели правильное расширение (.Ico), а все остальное сделает gimp.

Использование Adobe Photoshop или Illustrator для создания ICO | автор: Jon Graft

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

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

Мой файл шаблона.

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

Шаг 2. Создайте экшен Photoshop. Это действие будет обрезать монтажную область до внутренней части кадра, сохранить изображение как PNG, отменить обрезку и повторить для остальных размеров. Вместо того, чтобы пытаться объяснить это письменно, я просто покажу вам. Посмотрите мое короткое видео ниже, и вы поймете идею.

Очень быстрое видео, показывающее, как создать настраиваемое действие.

Шаг 3: Создайте свой значок! Я работаю над другим сообщением в блоге о том, как я создаю свои значки. Как только он будет готов, я вернусь и свяжу его здесь. Теперь вы можете перейти к разделу «Преобразование» ниже.

Многие люди предпочитают создавать свои иконки в Adobe Illustrator, и я понимаю, почему. Illustrator отлично подходит для значков SVG (будущее), но я предпочитаю использовать Photoshop, когда дело касается ICO.

Шаг 1. Создайте файл шаблона. Вам понадобятся два артборда; один с разрешением 16×16 и другой с разрешением 24×24. Мы делаем это, чтобы максимально избежать субпикселизации при расширении до больших размеров. Вы можете скачать созданный мной файл шаблона AI.

Шаг 2: Создайте свой значок! Я работаю над другим сообщением в блоге о том, как я создаю свои значки. Как только он будет готов, я вернусь и свяжу его здесь.

Как выглядит мой экран экспорта, хотя на нем отсутствует четырехкратная шкала.

Шаг 3. Экспортируйте монтажные области. Выберите «Файл»> «Экспорт»> «Для экранов» или воспользуйтесь сочетанием клавиш ⌥ + ⌘ + E. На этом следующем экране вы хотите экспортировать обе монтажные области как PNG в масштабе 1x, 2x, 3x и 4x. После экспорта вы можете удалить значок 72 пикселя (24 пикселя при масштабе 3x) и выбрать, какой значок 48 пикселей вы хотите сохранить (масштаб 16 пикселей при 3x или 24 пикселя при масштабе 2x). Теперь вы можете перейти к разделу «Преобразование» ниже.

Внимание! Если у вас возникли проблемы с отображением правильного размера ICO, экспортированных из Illustrator, запустите экспортированные PNG-файлы Illustrator через ImageOptim.

Конструктор икограмм — создание карт, иллюстраций и инфографики из изометрических значков

Конструктор икограмм — создание карт, иллюстраций и инфографики из изометрических значков

Создавайте красивые трехмерные карты, инфографику и изометрические иллюстрации за считанные минуты

Начало работы
Это легко, весело и бесплатно!

Особенности нашей уникальной конструкции

Иконки и шаблоны

Наша графическая база содержит 3050+ иконок и 390+ шаблонов, и она постоянно растет.Также вы можете загрузить свою графику.

Онлайн-графический редактор

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

Редактируемый вектор SVG

Вся графика векторная. Это означает, что вы можете редактировать размер, цвет, настраивать или даже печатать любые объекты без потери качества.

Изометрическая графика 2.5D

Все наши рисунки выполнены в одном стиле. Мы используем изометрическую проекцию 2: 1 для всех наших значков и сетки для идеальной стыковки элементов.

Персональная графика

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

Pixel Perfect PNG

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

Используйте шаблон для начала

Редактировать, изменять и настраивать при необходимости

или Создавайте собственные объекты с нуля

Перетаскивайте элементы в сетку для создания уникальной графики

Где использовать …

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

Многие учителя во всем мире используют Icograms Designer в качестве учебного пособия в своих классах, и мы очень рады быть частью этого образования. для молодого поколения.

На данный момент наша графическая база содержит 3050+ иконок и 390+ шаблонов для сельского хозяйства, логистики, транспорта, складирования, строительства, информационных технологий / сетей, энергетики, фабрики, интерьеров, здравоохранения, офиса и т. Д.и он постоянно растет. Мы регулярно добавляем новые иконки и шаблоны. Также, если этого недостаточно и вам нужно что-то особенное, вы можете заказать персональную графику.

Раскройте свой творческий потенциал и выберите свой собственный способ использования икограмм.
Есть идея? Зайдите в Icograms Designer и воплотите его в жизнь!

Что говорят пользователи …

«Икограммы — это забавный инструмент, позволяющий любому создавать высококачественные изометрические чертежи за считанные минуты.
Icograms (Наталья) доставила индивидуальные изометрические чертежи в точности так, как я просил. Результат был идеальным с первого раза.
Не могу дождаться, чтобы снова использовать икограммы в своих следующих проектах.
Возможности безграничны, а цена превосходит всех дизайнеров ».

Базиль,
основатель makejo.com

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

Шринивас Наик,
основатель и блогер TechSini.com

«Icograms Designer — отличный инструмент, который позволяет моей команде легко составить представление о генеральном плане жилых и промышленных зон».

Ростислава Старака,
Главный архитектор NovaModel

Как создать значок Favicon (.ICO) в Photoshop

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

Что такое фавикон?

Значок (также называемый веб-сайтом, URL-адресом, ярлыком или значком закладки) — это маленький значок, который отображается слева от URL-адреса страницы, которую вы просматриваете в адресной строке браузера, а также в углу текущая вкладка браузера или окно браузера просматриваемой веб-страницы. Если у вас открыто несколько вкладок, она служит удобной визуальной очередью, которая поможет вам быстро распознать идентичность веб-страницы.

Как должен выглядеть фавикон?

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

Характеристики значка Favicon (файл .ICO)

Значок:

  • Квадратный рисунок
  • 16 x 16 пикселей (хотя вы можете начать с 64 x 64, чтобы дать вашему дизайну больше свободы)
  • Заканчивается на .ico расширение .

Значок «favicon» был первоначально представлен в более ранней версии Internet Explorer и поддерживал только формат .ico. Сегодня большинство современных браузеров поддерживают другие графические форматы для значков, помимо .ico (PNG, GIF (включая анимированные GIF)), но .ico является наиболее используемым во всех браузерах и, таким образом, является стандартом, который вы должны использовать для своих Веб-сайт.

Создание файла Favicon (.ICO) в Photoshop

Создайте новый файл в Photoshop.Хотя вы хотите получить квадрат 16 × 16 пикселей, вы можете начать с 32 × 32 или 64 × 64, чтобы у вас было больше места для работы. Импортируйте квадратную версию вашего логотипа или значка для представления вашего бренда в Photoshop. Затем скопируйте и вставьте его в новый файл. Используйте инструмент трансформации (удерживайте нажатой клавишу Shift, чтобы сохранить пропорции), чтобы изменить размер и убедиться, что ваш измененный размер 16 × 16 по-прежнему выглядит хорошо. Когда вы закончите, выберите «Сохранить для Интернета» и сохраните изображение в формате .png с разрешением 72 DPI (точек на дюйм).

Скрыть файл в.ICO через Converter Tool

Перейдите на ICO Converter, бесплатный веб-сайт, конвертирующий ваш файл .png в .ico. Нажмите «Обзор» и импортируйте созданный файл .png. Выберите размер и битовую глубину и сохраните на свой компьютер.

Добавьте значок Favicon на свою веб-страницу

После того, как ваш favicon.ico будет сохранен и готов к работе, вы можете добавить его на свой веб-сайт следующим образом. В заголовок каждой веб-страницы вам нужно добавить следующий код (замените example.com/favicon.ico на каталог, в который вы загрузили свой значок):

Мы не рекомендуем вам использовать относительный путь (href = ”favicon.ico”), потому что это может привести к потере путей при перемещении вашего веб-сайта, а также более уязвимо для кражи ссылок. Вместо этого используйте абсолютный путь (включая доменное имя), как в примере выше. Вы должны иметь возможность скопировать и вставить этот URL-адрес в свой веб-браузер и увидеть значок.

Загрузите значок на свой веб-сервер

После того, как вы добавили URL-адрес вашего файла значка на свою веб-страницу, вы захотите убедиться, что favicon.ico действительно находится там, где вы его указали (в примере выше, в корне вашего документа (корневая папка вашего веб-сайт — т.е. / public_html или / www на серверах Linux)).

Посмотрите, как работает фавикон!

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

Photoshop по-прежнему лучший?

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

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *