Как сделать иконку в формате ico: Онлайн конвертер изображений в ICO (PNG to ICO, JPG to ICO)

Содержание

Как сделать фавикон маленьким и кэшируемым

Брайан Джексон

Обновлено 6 июня 2022 г. 0007 быстро . Это определенно одна из тех оптимизаций, которые можно классифицировать как низкоприоритетные, но со временем все складывается, когда дело доходит до веб-производительности. Если вы добавите 20 небольших оптимизаций, внезапно вы увидите, что время загрузки сократилось на несколько секунд. Как поставщик CDN, мы любим делиться даже самыми маленькими хитростями, которые могут помочь вам опередить своих конкурентов и обеспечить максимально быструю загрузку ваших сайтов как для ваших посетителей, так и для Google.

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

Фавикон, или favicon.ico, — это небольшой файл значка изображения, связанный с вашим веб-сайтом. Когда браузер переходит на ваш веб-сайт, он в фоновом режиме автоматически ищет ваш favicon.ico (примечание: вы можете не увидеть этого в некоторых инструментах для тестирования скорости веб-сайта. WebPageTest действительно показывает favicon. co в своем каскадном анализе). Затем это отображается в различных местах, таких как вкладки в вашем браузере, а также на панели закладок. Как правило, favicon.ico хранится в корне вашего сайта.

Однако это больше не останавливается только на значках веб-браузера на рабочем столе. Теперь у нас есть устройства iOS, устройства Android, устройства Windows 10, и все они имеют свои собственные размеры и типы файлов, которые они поддерживают для связывания значка. Устройства iOS используют значок Apple Touch с высоким разрешением для иллюстрации закладок и ярлыков на главном экране. Для iPhone нужна картинка 57×57, а для нового iPad с экраном Retina нужна картинка 152×152. Android Chrome также использует эти изображения, если находит их. И Windows 10 идет совершенно другим путем с выделенным набором значков и деклараций HTML.

Вам нужен фавикон? Ответ положительный. Каждый веб-сайт должен иметь фавикон, связанный с ним. Поскольку браузер запрашивает этот файл, вы увидите ошибку 404, если ее нет. Поскольку favicon.ico находится в корне сервера, каждый раз, когда браузер запрашивает этот файл, отправляются файлы cookie для корня сервера. Уменьшение размера значка и уменьшение размера файлов cookie для корневых файлов cookie сервера повышает производительность при получении значка значка.

Как сделать значок

Фавикон на самом деле может быть файлом PNG, GIF или ICO. Однако файлы ICO обычно используются чаще, чем другие, поскольку размер файла меньше и поддерживается во всех основных браузерах. PNG чаще используются для устройств IOS, Android и Windows 10. Сегодня мы сосредоточимся в первую очередь на создании favicon.ico для вашего сайта.

Шаг 1

Фавикон обычно должен иметь размер 16×16 пикселей или 32×32 пикселя. И также рекомендуется, чтобы он не превышал 1 КБ или был как можно меньше. Вы можете создать свою фавиконку в любой программе, будь то Photoshop, Illustrator, Gimp, Paint или Sketch. Просто сохраните файл или переименуйте его в файл ICO, когда закончите. Он должен называться favicon.ico. (Подсказка: лучшая стратегия для того, чтобы держать его маленьким, — это используйте векторы при работе с вашим логотипом/иконой, прежде чем сохранять их.)

Вы также можете использовать онлайн-инструмент, такой как настоящий генератор фавиконок, в который вы можете загружать PNG, JPG или SVG (векторный тип файла) и он сгенерирует для вас файлы ICO. Инструмент также имеет несколько отличных генераторов для включения ваших значков в статические сайты и проекты, такие как:

Генератор значков для Gulp
Генератор значков для Grunt
Генератор значков для Ruby on Rails
Генератор Favicon через интерфейс командной строки Node.js

Шаг 2

Далее вам нужно загрузить его на свой веб-сайт. Просто загрузите его через FTP в корневой каталог вашего веб-сайта, и веб-браузеры, поддерживающие фавиконы, найдут его. Если вам нужно или вы хотите разместить свой значок в другом каталоге, вы можете просто добавить следующее в раздел вашего веб-сайта с указанием пути к нему. Например, приведенный ниже фрагмент кода был бы таким, если бы у вас была фавиконка в папке с именем images.

Favicon в WordPress

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

Фавикон в Joomla

Если вы используете Joomla, вам необходимо загрузить favicon.ico в папку /joomla/templates/<ваш шаблон> 9каталог 0048. Не забудьте также ознакомиться с официальной документацией Joomla Favicon.

`Фавикон в Drupal`

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

Перейдите на страницу admin/build/themes/settings/THEME или для Drupal 7 admin/appearance/settings/THEME в административной области сайта (замените THEME на название вашей темы по умолчанию).
Выберите файл favicon.ico в разделе «Настройки ярлыка» на странице конфигурации темы и загрузите файл. (Возможно указать путь для сохранения фавикона в папке темы).

`Оптимизация вашего фавикона`

Оптимизация вашего фавикона путем кэширования позволяет избежать частых запросов на него. Поэтому важно использовать кеширование браузера, добавляя заголовки с истекшим сроком действия и используя управление кешем. Еще одна рекомендация — загружать фавикон из CDN. YSlow также рекомендует стараться, чтобы ваш значок не превышал 1 КБ. Во всяком случае, просто постарайтесь, чтобы ваш значок был как можно меньше. Ниже вы можете видеть, что наш значок на нашем тестовом сайте находится прямо под отметкой 1 КБ на 925 байт.

Добавьте заголовки Expires в Apache, добавив их в файл .htaccess . Обратите внимание на строку с image/x-icon .

 ## ИСХОДИТ КЭШИРОВАНИЕ ##

    ExpiresActive On
    ExpiresByType image/jpg "доступ 1 год"
    ExpiresByType image/jpeg "доступ 1 год"
    ExpiresByType image/gif "доступ 1 год"
    ExpiresByType image/png "доступ 1 год"
    ExpiresByType text/css "доступ 1 месяц"
    ExpiresByType text/html "доступ 1 месяц"
    ExpiresByType application/pdf "доступ 1 месяц"
    ExpiresByType text/x-javascript "доступ 1 месяц"
    ExpiresByType application/x-shockwave-flash "доступ 1 месяц"
    ExpiresByType image/x-icon "доступ 1 год"
    ExpiresDefault "доступ 1 месяц"

## ИСХОДИТ КЭШИРОВАНИЕ ##

   Добавьте заголовки  Expires  в Nginx, добавив в конфигурацию вашего сервера. Обратите внимание, что включен файл типа  ico .
 сервер {
    слушать 80;
    имя_сервера пример.com;

    расположение / {
        корень /var/www/пример;
        индекс index.html index.htm;
    }

    расположение ~* \.(jpg|jpeg|gif|ico|png)$ {
        истекает через 365 дней;
    }

    расположение ~* \.(pdf|css|html|js|swf)$ {
        истекает 30 дней;
    }
}
 
 Прочитайте наш более подробный пост о том, как использовать кеширование браузера.
 Cache-Control  Вы также можете использовать  Cache-Control  . Следующий фрагмент можно добавить в файл  .htaccess  в Apache, чтобы указать серверу установить для заголовка  Cache-Control 
   max-age  значение  84600  секунд и значение  public  для перечисленных файлов. Обратите внимание, что включен файл типа  ico .
 
    Заголовок установил Cache-Control "max-age=84600, public"

 
 Этот следующий фрагмент можно добавить в файл конфигурации Nginx. В приведенном ниже примере используются директивы заголовка  Cache-Control   public  и  no-transform  с настройкой срока действия, установленной на 7 дней. Обратите внимание, что включен файл типа  ico .
 расположение ~* \.(js|css|png|jpg|jpeg|gif|ico)$ {
    истекает 7 дней;
    add_header Cache-Control «общедоступный, без преобразования»;
}
 
 Прочитайте наш более подробный пост о том, как использовать 
  Кэш-Контроль  .
 Загрузите свой значок из CDN 
 Еще одна оптимизация, которую вы можете сделать, это фактически загрузить свой значок из вашего CDN. Несмотря на то, что этот файл не запрашивается на регулярной основе и он очень мал, он все же может быть полезен, потому что, когда браузер пытается его захватить, он будет делать это с более близкой точки присутствия.
 Чтобы загрузить фавикон из CDN, вы можете просто обновить фрагмент в заголовке. Ниже приведен пример на нашем тестовом сайте. Мы указываем на наш значок, который находится на нашем CDN. Делая это, вы также можете воспользоваться преимуществами  Cache-Control  и заголовки с истекающим сроком действия на пограничных серверах CDN, и вам не нужно беспокоиться о них на исходном сервере.
  
 
 А вот пример того, что мы запускаем на сайте KeyCDN с парой вариантов значков и значком Apple Touch.
 
<ссылка rel="icon" href="//www.keycdn.com/favicon.ico">

 
 Если вы работаете на WordPress, вы можете автоматически скопировать его в свою Pull Zone с помощью нашего бесплатного плагина WordPress CDN Enabler.
 Резюме 
 Как видите, процесс создания фавикона очень прост, и есть способы оптимизировать даже самые маленькие файлы. Это ни в коем случае не самая важная оптимизация, которую вы могли бы сделать, но опять же, все считается и складывается. И помните, если вы добавите ссылки для других устройств, браузер или устройство не получат их, если они не поддерживаются. Поэтому не стесняйтесь добавлять дополнительные значки для поддержки более широкого спектра платформ без ущерба для вашей производительности.
 Есть ли какие-нибудь другие полезные трюки с фавиконками или отсылки? Если это так, не стесняйтесь поделиться ими ниже.
 Как настроить значки в Windows 10 
 Когда я искал способы сделать свой компьютер более удобным для просмотра, я решил научиться настраивать значки в Windows 10, чтобы сделать мои любимые программы более удобными для просмотра. Это было особенно полезно во время моей летней стажировки, потому что все мои наиболее часто используемые программы имели одинаковые цветные значки, и я хотел убедиться, что случайно не открою не ту программу. Вот мои советы о том, как настроить значки в Windows 10, не требуя передовых технических навыков.
 Во-первых, зачем использовать пользовательские значки в Windows 10? 
 Использование пользовательских значков Windows 10 дает множество преимуществ, в том числе:
 Возможность создавать собственные цветовые палитры для значков
 Сделать значки с похожими цветами на дисплее легче различимыми
 Создавайте более простые значки с меньшим количеством визуальных элементов
 Наличие высококонтрастных значков для пользователей с нарушениями зрения
 Ссылки по теме 
 Настройки специальных возможностей для слабовидящих для Windows 10
   Как расположить домашний экран iPad
 Настройки специальных возможностей, которые я использую в ОС iPad и iOS 13
 Поиск пользовательских значков в Интернете 
 В Интернете есть множество различных бесплатных пользовательских значков для популярных программ, хотя их необходимо загрузить в формате файла . ico, чтобы их можно было использовать в качестве значков. Я рекомендую запустить веб-поиск по одному из следующих терминов:
 ICO-файлы
 загрузок ICO
 Бесплатные иконки для Windows
 ICO-файлы можно бесплатно скачать в Интернете, однако я рекомендую избегать любых приложений или веб-сайтов, которые требуют от пользователей загрузки другого приложения или файла EXE для доступа к значкам, поскольку они могут содержать вирусы.
   Ссылки по теме 
 Распространенные типы файлов для лиц с нарушениями зрения и ограниченными возможностями печати
 Как я организую цифровые файлы для своих занятий
 Как организовать и идентифицировать шнуры для слабовидящих
 Создание собственных значков 
 Другим вариантом дизайна является создание собственных значков в Windows 10. Обычно я создаю собственный слайд/страницу размером 128 x 128 в Microsoft PowerPoint, PicsArt или MIcrosoft Publisher для создания собственных значков, хотя дизайн значков можно создавать в других программах графического дизайна, а также.
  Другой вариант — обрезать существующие изображения до квадратной формы или отсканировать рисунки/изображения и обрезать их до нужного размера.
 Ссылки по теме 
 Использование PicsArt для имитации ухудшения зрения
 Как создавать изображения с высоким разрешением для пользователей с плохим зрением
 Как сделать музыку доступной с помощью Microsoft Publisher
 Преобразование изображений в значки 
 Если пользователи хотят использовать свои собственные изображения или рисунки для значков, им необходимо преобразовать файл изображения в формат файла ICO. Для этого я использую онлайн-конвертер файлов, ссылка на который приведена ниже, и сохраняю изображение во всех различных разрешениях, поскольку один файл ICO может поддерживать несколько разрешений.
 Ссылки по теме 
 Веб-сайт ICO Converter
 Как изменить значки на рабочем столе в Windows 10 
 Чтобы изменить значки на рабочем столе в Windows 10, выполните следующие действия:
 Если программы еще нет на рабочем столе, откройте меню «Пуск» и перетащите имя программы на рабочий стол.  область.
 На рабочем столе щелкните правой кнопкой мыши значок программы. Рядом со значком
 появится выпадающее меню. В нижней части раскрывающегося меню нажмите «Свойства»
 В меню "Свойства" нажмите центральную кнопку с надписью "Изменить значок..."
 Если значок не отображается, нажмите кнопку «Обзор» и перейдите в папку, в которой сохранен файл ICO
 Когда он появится на экране, щелкните значок по вашему выбору и нажмите «ОК».
 Нажмите «ОК» в диалоговом окне «Свойства». Если значок не отображается сразу, закройте программу или перезагрузите компьютер.
 Новый значок появится на рабочем столе и панели задач
  
 Некоторые приложения не поддерживают пользовательские значки, поэтому, если меню «Свойства» недоступно, значок приложения нельзя изменить.
 Ссылки по теме 
 Диалоговые окна и слабое зрение
 Как я документирую настройки специальных возможностей для слабовидящих
 вопросов, которые следует задать при выборе ноутбука для колледжа
 Изменение размера значков на рабочем столе 
 Некоторые пользователи могут предпочесть большие значки на рабочем столе, чтобы их пользовательские значки было легче увидеть. Значки можно увеличить, выполнив следующие действия:
 Щелкните правой кнопкой мыши на рабочем столе и дождитесь появления раскрывающегося меню
 Наведите указатель мыши на раздел «Вид»
 Выберите маленькие, средние или большие значки
 Изменения вступят в силу автоматически
 
 Как изменить значки на панели задач в Windows 10 
 Чтобы изменить значки на панели задач в Windows 10, выполните следующие действия:
 Если программы еще нет на панели задач, откройте меню «Пуск» и щелкните правой кнопкой мыши имя программы. Нажмите «Дополнительно» в раскрывающемся меню и нажмите «Закрепить на панели задач» 9.0036
 На панели задач щелкните правой кнопкой мыши значок программы. Рядом со значком
 появится выпадающее меню. Щелкните правой кнопкой мыши имя программы в раскрывающемся меню и откройте меню "Свойства"
 В меню "Свойства" нажмите центральную кнопку с надписью "Изменить значок..."
 Если значок не отображается, нажмите кнопку «Обзор» и перейдите в папку, где сохранен файл . ico
 Когда он появится на экране, щелкните значок по вашему выбору и нажмите «ОК»
 Нажмите «ОК» в диалоговом окне «Свойства». Если значок не отображается сразу, закройте программу или перезагрузите компьютер.
 Новый значок появится на рабочем столе и панели задач
 Некоторые приложения не поддерживают пользовательские значки, поэтому, если меню «Свойства» недоступно, значок приложения нельзя изменить.
 Другие варианты облегчения просмотра значков 
 Помимо пользовательских значков, существует множество других вариантов упрощения просмотра Windows 10. Некоторые из вариантов, которые я использовал, включают:
 Включение высококонтрастного режима
 Использование лупы Windows для увеличения объектов
 Создание пользовательских сочетаний клавиш для открытия приложений
 Открытие приложений с помощью Cortana
 Связанные ссылки 
 Использование высококонтрастных тем в Windows 10
 Лупа для Windows и слабое зрение
 Как создавать собственные сочетания клавиш в Windows
 Заключительные мысли 
 Мне нравятся настраиваемые значки в Windows 10 и удобные значки на рабочем столе и панели задач.