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

Долгое время всё прекрасно работало. В контейнер ICO можно было зашить много разных иконок: от крошечной монохромной до огромной полупрозрачной. Браузер после скачивания иконки сам выбирал нужный формат. Проблема была в том, формат ICO страшно неэффективный. Если зашить в ICO две PNG-иконки 16 и 32, то иконка будет весить в два-три раза больше, чем исходные файлы. Браузерам приходилось тянуть не только ненужные форматы, но ещё и в неэффективном виде.

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

<link rel="icon" src="images/my.ico">

При отсутствии внятных стандартов, за дело взялась Apple. К первому Айфону прилагался прорывной мобильный браузер Safari, который тоже начал искать в корне сайта иконки, но на этот раз в формате PNG и с названием apple-touch-icon. Эту иконку видно в избранном и при добавлении сайта на домашний экран. Бросил в корень второй файл и забыл, расходимся? Нет.

Чтобы иконка была без блика сверху, нужен файл apple-touch-icon-precomposed, ещё один для ретины, потом ещё несколько для всех моделей Айпадов, тройной ретины… и в итоге вам нужно намусорить в корне или в шапке сайта целым ворохом иконок со специальными размерами: 72, 76, 114, 120, 144, 152, 180 и кажется что-то ещё. Чтобы разобраться во всех нюансах тач-иконок, читайте отличное руководство Матиаса Байненса.

<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">

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

В HTML5 появилось расширенное описание<link rel="icon">: добавился атрибут sizes, чтобы указывать размеры, и атрибут type, чтобы указывать формат иконки. Например, если у вас ICO с несколькими иконками внутри, то укажите все размеры через пробел в sizes. Если иконка векторная — да, так тоже можно — укажите размер any. Главное, не забудьте указать правильные типы. Теперь-то расходимся, проблема решена? Почти.

<link rel="icon" href="favicon.png" type="image/png">
<link rel="icon" href="favicon.ico" type="image/vnd.microsoft.icon">
<link rel="icon" href="favicon.svg" type="image/svg+xml">

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

Спецификация Web App Manifest описывает простой JSON-файл, в котором можно указать не только все иконки, их размеры и форматы, но и полностью описать ваш сайт или приложение. Фирменный цвет, цвет фона, язык и направление письма, полное и краткое название, ориентация, режим запуска и другое. Вы подключаете его с помощью <link rel="manifest"> на каждую страницу и браузер сразу всё знает. Хороший инспектор манифеста есть во вкладке Application отладчика Chrome.

 {
  "name": "My App",
  "icons": [{
    "src": "64.png",
    "sizes": "64x64"
  }, {
    "src": "128.png",
    "sizes": "128x128"
  }],
  "display": "fullscreen",
  "orientation": "landscape",
  "theme_color": "tomato",
  "background_color": "cornflowerblue"
}

А что Apple? Что-что… До сих пор поддерживает свой формат тач-иконок и придумала даже ещё один: новый, нестандартный, как мы любим! С помощью <link rel="mask-icon"> для закреплённых вкладок Safari и кнопок на тач-баре Макбуков можно указать монохромную векторную маску и цвет для наведения. Спасибо, конечно, за вектор, но неспасибо за очередной велосипед.

<link rel="mask-icon" href="mask.svg" color="red">

Веб-манифест уже так или иначе поддерживают Chrome, Opera, Samsung Internet и Firefox, но пока только на Андроиде. В Edge он тоже скоро появится — разработка в процессе. Пока это будущий способ подключения иконок, а что делать сегодня, вот прямо сейчас? Сочетать всё, что мы знаем.

Для начала, забудьте про ICO, если только вам не нужен IE10. Подключите линком PNG-иконки: простую на 16 и 32 для ретины, чтобы было красиво в браузерной строке и закладках. Дальше подключите линком из корня сайта apple-touch-icon.png размером 180 × 180. Потом подключите веб-манифест, в котором указана иконка на 192 для Андроида. Ну и можно там же упомянуть 16, 32, вектор, цвета и название — пригодится.

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

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

Создание значка избранного (favicon.ico) для вашего сайта

Перейти к основному содержаниюПерейти к навигацииПоискСправка

Главная > Статьи > Ресурсы для веб-мастеров > Создание фавиконов

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

На этой странице я расскажу вам, как я делал иконки избранного на разных страницах моего сайта. На этом снимке экрана моей домашней страницы в Internet Explorer значки обведены красным:

Снимок экрана со значком избранного в адресной строке и списком избранного в Internet Explorer

Что такое favicon.

Это изобретение Microsoft. Internet Explorer будет искать его, когда кто-то посещает ваш сайт. Если он есть, он будет отображаться в виде значка в адресной строке с вашим URL-адресом. Если его там нет, браузер показывает стандартное изображение IE в виде листа бумаги с буквой «е» на нем. Он также будет отображаться вместе с заголовком вашей веб-страницы в списке избранного. Посетители могут перетащить значок из адресной строки на свой рабочий стол, чтобы там тоже была ссылка на ваш сайт, и логотип используется там в двойном размере.

Favicon.ico теперь также распознается Netscape.

Как его сделать?

1. Создайте файл изображения. Он должен быть 16×16 пикселей, хотя IE также масштабирует значок 32×32 на лету. Я использовал бесплатный Irfanview, чтобы изменить размер изображения и преобразовать его в формат ICO.
2. Загрузите его в корень вашего сервера как favicon.ico. Так и должно быть, но это не всегда так работает.
3. Итак, включите этот код на свою веб-страницу между тегами и: sean.co.uk/favicon.ico"> Но ссылка на собственную иконку, очевидно. Когда вы ссылаетесь на свой значок таким образом, вы можете дать ему другое имя favicon.ico и можете иметь множество разных значков избранного для разных страниц вашего сайта, ссылаясь на разные значки с каждой страницы. Я создал разные значки для нескольких разделов своего сайта, как показано на скриншоте выше. Вам необходимо включить соответствующий код LINK REL на каждую веб-страницу вашего сайта, поэтому включение его в шаблон может значительно облегчить вашу жизнь.

Как сделать значок для iPod Touch или iPhone?

Браузер Safari в iPod Touch и iPhone позволяет пользователям добавлять в закладки сайты, которые отображаются в виде ярлыков в интерфейсе, как показано на фотографии справа. На жаргоне Apple они называются «закладками веб-клипов».

Чтобы настроить его для своего сайта, необходимо создать файл изображения размером 57×57 пикселей и сохранить его в формате PNG. Затем загрузите его в корень вашего веб-сайта (где хранится ваша веб-страница по умолчанию, например index.htm) с именем файла apple-touch-icon.png. iPod Touch или iPhone наложат на него стеклянную накладку, чтобы он выглядел как значок Apple.

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

…где customicon.png — это имя файла вашего пользовательского значка, включая путь к нему, если необходимо.

Кредиты

© Шон МакМанус. Все права защищены.

Посетите сайт www.sean.co.uk, чтобы получить бесплатные главы из книг Шона по программированию (включая Mission Python, Scratch Programming in Easy Steps и Coder Academy) и многое другое!

Откройте для себя мои последние книги

100 лучших советов: Microsoft Excel

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

• Подробнее

Программирование с нуля IES

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

• Подробнее

Миссионерский питон

Создайте космическую приключенческую игру в этой книге по программированию на Python, изданной No Starch Press.

• Подробнее

крутых скретч-проектов в простых шагах

Узнайте, как создавать 3D-игры, создавать лабиринты, создавать драм-машину, создавать игры с мультяшными животными и многое другое!

• Подробнее

Raspberry Pi для чайников

Настройте свой Raspberry Pi, а затем научитесь использовать с ним командную строку Linux, Scratch, Python, Sonic Pi, Minecraft и электронные проекты.

• Подробнее

Ушной червь

В этом развлекательном техно-триллере для взрослых Шон Макманус рассказывает о музыкальной индустрии: от зала заседаний до сцены; из студии на ярмарку звукозаписи.

• Подробнее

Ресурсы Scratch и Raspberry Pi

Ресурсы Царапины Шона

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

• Подробнее

Ресурсы Raspberry Pi Шона

Учебники и руководства для Raspberry Pi, бюджетного компьютера, идеально подходящего для обучения программированию.

• Еще

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

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

Обновлено 6 июня 2022 г. . Это определенно одна из тех оптимизаций, которые можно классифицировать как низкоприоритетные, но со временем все складывается, когда дело доходит до веб-производительности. Если вы добавите 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 CLI

Шаг 2

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

  ico" type="image/x-icon" />
 

Favicon в WordPress

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

Фавикон в Joomla

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

Фавикон в Drupal

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

1. Перейдите на страницу admin/build/themes/settings/THEME или для Drupal 7 admin/appearance/settings/THEME в административной области сайта (замените THEME на название вашей темы по умолчанию).
2. Выберите файл 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 "max-age=84600, public"

 

 расположение ~* \.(js|css|png|jpg|jpeg|gif|ico)$ {
    истекает 7 дней;
    add_header Cache-Control «общедоступный, без преобразования»;
}
 

 
<ссылка rel="icon" href="//www.keycdn.com/favicon.ico">