Содержание

Как сделать Favicon для сайта

Что такое Favicon?

Favicon для сайта – это одна из его отличительных особенностей. Это еще один шаг к созданию и использованию фирменного стиля. Favicon, говоря простыми словами, это иконка (изображение), которое выводится в браузере перед адресной строкой. Также favicon используется при добавлении страницы в закладки. Согласитесь, пользователю удобнее будет найти ваш сайт в закладках, если там будет изображена ваша «фирменная» иконка.

Думаю, каждый из вас замечал favicon, посещая любимые сайты. Выглядит это следующим образом (в браузере Google Chrome):

И для сравнения, отображение иконки в браузере Internet Explorer:

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

Сделать фавикон можно как используя стандартные возможности Photoshop (или другого графического редактора), так и с помощью всевозможных веб-сервисов.

Рисуем Favicon с помощью веб-сервиса

Самый простой способ сделать фавикон – воспользоваться сервисом www. favicon.cc. Выглядит он так:

Чтобы нарисовать иконку, нужно просто выбрать нужный цвет, прозрачность и нарисовать нужные контуры. При создании иконки сразу есть возможность предпросмотра:

Создаем Favicon из готового изображения

Для того, чтобы конвертировать готовую иконку в формате .png (который, кстати, тоже может использоваться для задания favicon), можно воспользоваться другим веб-сервисом: favicon.ru.

Устанавливаем Favicon на сайт

Когда иконка будет готова, вы сможете ее скачать в формате .ico. Чтобы добавить favicon на сайт, поместите файл favicon.ico в корневой каталог сайта и добавьте между тегами <head></head> строчку:

<link rel="icon" href="favicon.ico"; type="image/x-icon" />

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

Также рекомендуется добавлять строку:

<link rel="shortcut icon" href="favicon. ico"; type="image/x-icon" />

(для Internet Explorer).

Размер фавикона может быть 16×16, 32×32.

Полезное замечание

Файл иконки может иметь не только расширение .ico, но и .png, причем рекомендуется использовать последний вариант. Это связано с тем, что устройства с высоким разрешением дисплея (например, iPhone, iPad, iPod) по умолчанию имеют размер иконки 57×57. Для этого лучше делать второй вариант иконки (в более высоком разрешении) и прописывать дополнительно строку:

<link rel="apple-touch-icon" href="apple-favicon.png" />

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

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

Главная / Редактирование сайта / Как мне настроить сайт? / Как создать фавикон

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

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

Рассмотрим, как им пользоваться.

Шаг 1

Выберите в меню «Настройки» пункт «Фавикон».

Шаг 2

Затем нажмите на кнопку «Создать фавикон».

Шаг 3

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

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

Шаг 4. Фон

Сперва выберите фон фавикона — для этого в блоке настроек «Фон» нажмите на кнопку «Выбрать» и в раскрывшемся списке выберите подходящий вариант.

Шаг 4.1. Цвет фона

Далее вам будет необходимо подобрать цвет для фона фавикона. Сперва раскройте список настройки цветов и выберите: «1 цвет», «2 цвета» или «Без заливки».

  • При выборе пункта «1 цвет» — вам будет необходимо нажать на кружок справа от списка и в раскрывшейся палитре выбрать нужный цвет (или указать его код в соответствующем поле палитры).

  • При выборе пункта «2 цвета» — вы сможете аналогичным образом указать два цвета, а также, нажав на иконку «угол», задать угол градиента (направление перехода от одного цвета к другому).

  • При выборе пункта «Без заливки» фон фавикона будет отображаться бесцветным (белым) и дополнительные настройки не будут доступны.

Шаг 4.2. Рамка фона

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

Шаг 5. Картинка

Далее — подберите картинку, которая будет отображаться в фавиконе (внутри выбранного вами выше фона). Для этого в блоке настроек «Картинка»:

  • Нажмите «Выбрать»,
  • В раскрывшемся списке в верхнем ряду выберите категорию изображений (они разбиты по тематикам, при выборе той или иной категории — наборы иконок будут изменяться),
  • После выбора категории — нажмите на нужную вам иконку из набора.

Шаг 5.1. Цвет картинки

По аналогии с «Фоном» задайте для выбранной картинки цвет, сперва выбрав режим («1 цвет», «2 цвета» или «Без заливки») из соответствующего списка.

  • Для пункта «1 цвет» — выберите цвет (или укажите код) в палитре.

  • Для пункта «2 цвета» — выберите два цвета и угол перехода между ними.

  • Для пункта «Без заливки» никаких дополнительных настроек не потребуется.

Шаг 5.2. Рамка картинки

Для картинки вы также можете включить «Рамку» и выбрать цвет для нее.

Шаг 5.3. Тень картинки

При необходимости включите тень для картинки. Для этого отметьте соответствующую галочку.

Шаг 5.4. Поворот, размер и расположение картинки

Чтобы повернуть картинку вокруг своей оси под определенным углом — воспользуйтесь кнопками поворота вправо или влево.

Чтобы увеличить или уменьшить картинку — воспользуйтесь кнопками «+» и «-«.

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

Чтобы сбросить все изменения (поворот, размер, расположение), нажмите на крестик.

Шаг 6. Надпись

Теперь укажите текст для фавикона — он будет выводиться поверх выбранной выше картинки. В блоке настроек «Надпись» введите до 4-х символов в соответствующее поле.

Шаг 6.1. Формат надписи

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

Шаг 6.2. Расположение надписи

Отредактируйте положение надписи внутри фавикона с помощью кнопок-стрелок (кнопка с точкой — выравнивает текст по центру).

Обратите внимание!

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

Шаг 6.3. Цвет надписи

Задайте цвет надписи, сперва выбрав режим — «1 цвет», «2 цвета», «Без заливки».

  • Для пункта «1 цвет» — выберите цвет или укажите код цвета в палитре справа от списка выбора.

  • Для пункта «2 цвета» — укажите два цвета и градус перехода между ними.

  • Для пункта «Без заливки» не потребуется никаких дополнительных настроек.

Шаг 6.4. Рамка надписи

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

Шаг 6.5. Тень надписи

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

Шаг 6.6. Поворот и размер надписи

Чтобы повернуть надпись вокруг своей оси под определенным углом — воспользуйтесь кнопками поворота вправо или влево.

Чтобы увеличить или уменьшить размер надписи — воспользуйтесь кнопками «+» и «-«.

Чтобы сбросить все изменения (поворот, размер, а также расположение, заданное в шаге 6.2), нажмите на крестик.

Шаг 7

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

Шаг 8

После внесения всех необходимых изменений — нажмите «Сохранить». Созданный вами фавикон будет сохранен в списке готовых примеров.

Шаг 9

Если же вы хотите разместить созданный вами фавикон у себя на сайте — нажмите на кнопку размещения.

Откроется окно размещения фавикона, нажмите на кнопку «Перейти к оплате» (услуга размещения фавикона осуществляется на платной основе), произведите оплату.  После успешной оплаты фавикон сразу отобразится на сайте.

Как скачать фавикон

  • После создания и оплаты фавикона вы сможете скачать его в формате SVG с помощью соответствующей кнопки в карточке фавикона.

Была ли статья вам полезна?

Да

Нет 

Укажите, пожалуйста, почему?

  • Рекомендации не помогли
  • Нет ответа на мой вопрос
  • Содержание статьи не соответствует заголовку
  • Другая причина

Комментарий

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

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

Обновлено 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

Шаг 2

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

Favicon в WordPress

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

Фавикон в Joomla

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

Вы также можете использовать 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.

Резюме

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

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

Как создать значок FavIcon для вашего веб-сайта

Фавиконы — использование и история

Так что же такое фавиконы на самом деле?

Фавикон — это небольшое изображение, например, логотип, отображаемое слева (или справа) от URL-адреса (ссылки), который вы просматриваете в своем веб-браузере.

Основная цель — легко распознать ссылку, например, в списке закладок или вкладок (для браузеров с вкладками). Не каждый браузер поддерживает это, но большинство современных браузеров поддерживают его даже на мобильных платформах, таких как Android и iOS. Ниже несколько примеров (по порядку: Internet Explorer, Firefox, Chrome, Safari, Opera):

Примеры фавиконов

Жили-были…

Первая реализация фавиконов была сделана Microsoft в версии 4. 0 их Internet Explorer. В то время спецификации были простыми и ограниченными:

Фавикон был буквально значком, точнее: изображением 16 × 16 пикселей, сохраненным в формате файла Windows .ICO, обычно хранящемся в корневом каталоге вашего веб-сайта.

На веб-страницы был добавлен простой фрагмент кода, обычно сразу после тега кода HTML.

 
 <ссылка rel="значок ярлыка" href="images/favicon.ico" />

Анимация

Вскоре после первой реализации (думаю, людей в основном раздражал формат файла .ICO и его ограничения) браузер начал поддерживать формат GIF для использования с фавиконками. Более того; GIF-файл больше не нужно хранить в корне вашего сайта.

GIF открыл еще одну маленькую уловку: анимацию! GIF имел возможность анимировать изображения, и некоторые браузеры (в основном Firefox) фактически отображали эту анимацию, привлекая внимание к значку, например, с помощью небольших шуток или прокручиваемого сообщения.

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

Код для использования был немного изменен:

Прозрачность PNG

По мере того, как время шло, и PNG как формат графического файла начал доминировать над GIF (я полагаю, что это альтернатива с открытым исходным кодом), W3C приняла PNG в качестве предпочтительного формата файлов для значков. Как и некоторые операционные системы, такие как MacOS X и некоторые варианты Linux.

Некоторые преимущества PNG по сравнению с GIF:

  • Поддержка 24-битных и 32-битных цветовых палитр (больше цветов)
  • Поддержка прозрачности
  • Поддерживает слои
  • и т. д.

Использование этого формата (при использовании прозрачности) позволяет избавиться от странного цвета фона, который обычно не совпадает с вкладками браузера.
Если внимательно посмотреть на предыдущие примеры, то в первом примере (Internet Explorer) вы увидите, что на вкладке есть белое поле, содержащее фавикон .

Не совсем элегантно, верно?

В других примерах вы увидите, как выглядит значок пчелы с использованием PNG — они гармонируют с дизайном браузера.
Я рекомендую вам сделать PNG в формате 32 × 32 пикселя — например, Windows 7 прекрасно использует это на панели задач:

Windows 7 FavIcon

Для PNG код будет выглядеть так:

 
 <ссылка rel="icon" type="image/png" href="favicon.png">

Специальные параметры: Internet Explorer 9

Internet Explorer 9 и более поздние версии поддерживают значки большего размера для функции, которую они называют «закреплением панели задач», когда вы перетаскиваете значок или вкладку браузера Internet Explorer на панель задач Windows (рекомендуемый значок размер: 64 × 64 пикселя), чтобы «закрепить» ярлык на панели задач.

Размер значков — не единственный параметр, который вы можете найти.

На Dynamic Drive можно найти отличный бесплатный генератор фавиконок.

Internet Explorer 9добавить больше функциональности с функцией «закрепления»; при щелчке правой кнопкой мыши по ярлыку на панели задач на вашем веб-сайте могут отображаться дополнительные функции/ссылки с относительно простыми кодами, такими как (частичный пример Twitter):

 
  
  
 1 
 2 
 3 
 
 		  
  com/home; icon-uri= images/ie/tweet.ico" />

Если вас интересуют эти функции, дополнительную информацию можно найти здесь: Scott Hanselman’s ComputerZen.com.

Значки Apple Touch

На устройствах Apple под управлением iOS (iPad, iPhone, iPod Touch) вы можете создать ярлык на «рабочем столе», для которого вы, конечно же, хотели бы использовать значок с более высоким разрешением. Эти значки обычно называют «значками Apple Touch».

Как вы можете видеть ниже; разрешение ваших файлов FavIcon имеет значение. Значок слева определенно четче, чем справа (более низкое разрешение PNG).

Apple Touch FavIcons

Для этой цели Apple использует пользовательский тег, с помощью которого устройство автоматически придает ему «стеклянный» вид и черный фон по умолчанию (если вы используете прозрачность):

 
  png" />

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

Они также распознаются некоторыми браузерами Android и Blackberry.

Формат файла (конечно) PNG, рекомендуемые в настоящее время размеры:

57 × 57 пикселей для старых (без Retina) поколений iPhone и iPod Touch,
72 × 72 пикселей для iPad первого поколения. ,
114 × 114 пикселей для iPhone 4 (и, возможно, других устройств с дисплеем Retina),
512 x 512 пикселей для дисплеев Retina большего размера (например, iPad3).

Для всей корректности вы можете определить их в своем HTML (рекомендую такой порядок):

 
  
  
 1 
 2 
 3 
 4 
 
 		  
  png1" 90 сенсорный значок" href="apple-touch-icon-114x114.png">

Эти ссылки (во всяком случае, для iOS) не нужно определять; Просто поместите файлы в корень вашего веб-сайта, и iOS найдет их — если вы будете придерживаться правильного соглашения об именах.

Standard

apple-touch-icon.png  (этот значок был предложен в качестве запасного значка размером 57 × 57 пикселей)
apple-touch-icon-57×57.png
apple-touch-icon-72×72.png
apple-touch-icon-114×114.png
apple-touch-icon- 512×512.png

Имена файлов говорят сами за себя… верно?

Precomposed

apple-touch-icon-precomposed.png
apple-touch-icon-57×57 -precomposed . png
Apple-touch-icon-702.png png
apple-touch-icon-114×114 -precomposed .png
apple-touch-icon-512×512-precomposed.png

Как видите; мы только что добавили « - предварительно составленный ».

Так что мне использовать?

Лично я бы рекомендовал следующее для «обычной» веб-страницы:

1. Определите обычный значок

favicon для использования в старых браузерах

Создайте файл .ICO с иконками в нем размером 16 × 16 пикселей ( 16 цветов).
. Поместите файл favicon.ico в корень вашего веб-сайта.

2. Определите значок PNG для других браузеров, если вы хотите использовать прозрачность. работы), поддерживается прозрачность.


Поместите файл favicon.png также в корень (не обязательно, просто удобно, чтобы все вместе) вашего веб-сайта.

3. Определите специальные PNG для устройств Apple (при желании)

Создайте PNG, используя упомянутое выше соглашение об именах (apple-touch-icon. png, apple-touch-icon-72×72.png, apple-touch -icon-114×114.png), используйте 8- или 24-битную глубину цвета. При необходимости измените готовую версию (соответствуйте именам на шаге 4!).
Поместите его также в корень вашего сайта.

4. Добавьте код фавиконки на свои веб-страницы сразу после тега 

 
  
  
 1 
 2 
 3 
 4 
 5 
 6 
 
 		  
 " href="favicon.png">

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