HTML: Создание и добавление фавикона. По тематике без папок

Текст

Родион Данилов

Сколько приложений установлено на вашем iPhone - 50 или даже 100? За последний год количество приложений, без которых (как оказалось) мы все не можем прожить и дня, как минимум удвоилось. И настал тот момент, когда просто необходимо эти ярлыки организовать так, чтобы они все были под рукой. Есть множество способов того, как можно расположить ярлыки ради увеличения эффективности их использования. Мы собрали несколько самых рациональных и оригинальных способов.

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

Для того чтобы иконки «не расползались» на 5 экранов, стоит завести папки. Наиболее очевидный способ для каталогизации приложений - собирать в отдельные папки эппы, похожие друг на друга. Для многих папки с названиями категорий, которые предлагаются в системе по умолчанию (такие как «Производительность», «Справочник», «Развлечения»), кажутся слишком расплывчатыми. Вместо них попробуйте завести папки с названиями, которые будут понятны именно вам. Подумайте, для чего вы используете свой телефон. Смотрите видео, играете в игры, слушаете музыку, читаете книги или новости? Маркируйте папки глаголами «смотреть», «слушать», «читать», «учиться» и расположите в них приложения соответственно. Это поможет вам быстрее ориентироваться в огромном количестве приложений.

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

Если вы привыкли ориентироваться в алфавитном ряду, то вам подойдёт способ расположения иконок от A до Z. Вместо того чтобы расставлять все значки приложений на iPhone вручную, запустите Settings («Настройки»), выберите пункт General, затем Reset и reset Home Screen Layout. После этого все иконки предустановленных приложений Apple будут расположены по умолчанию, а другие приложения будут отсортированы по алфавиту.

Один из самых популярных способов организации ярлыков приложений предполагает их размещение по частоте использования (в порядке убывания). Важно учитывать: чтобы не захламлять телефон и иметь все приложения под рукой, не стоит заводить более трёх экранов. Расположите на главном экране самые часто используемые инструменты, такие как камера; на второй странице главного экрана - полезные приложения, организованные в папки по темам и категориям. На третий экран скиньте приложения, которые вы используете реже всего. Вы также можете поместить туда игры, которые постоянно отвлекают вас от дел.

для визуалов предложила обозреватель Mashable Кайли Сингх. Так как папки можно маркировать не только текстом, но и эмодзи, вполне логично, что папка с символом, например, ноты может вмещать музыку и приложения, с ней связанные. В папке с пальмой могут храниться ваши фотографии из отпуска, а за бегущим человечком - спортивные приложения Runstatic и Nike+.

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

Фавикон - это сокращение от «избранный значок» (в переводе с английского языка). Название происходит от списка закладок в Internet Explorer, который называется «Избранное»/«Список избранного». При добавлении сайта в закладки Explorer (версии 5 и выше) обращается к серверу с запросом, имеет ли ресурс файл favicon.ico. Если такой файл существует, он будет использоваться для предоставления значка, который отображается рядом с закладкой с текстом.

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

Значки на вкладках браузера

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

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

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

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

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

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

Вы можете использовать логотип вашего бренда, символ тематики ресурса или любимое изображение, чтобы сделать ваш индивидуальный значок сайта. Рекомендуемый размер для фавикона - не менее 512 пикселей в ширину и в высоту. Изображение должно быть квадратным, но можно использовать большие прямоугольные картинки. Многие движки позволят вам обрезать картинку, когда вы будете добавлять ее (поэтому не стоит волноваться о том, как установить фавикон на SMF в виде большой картинки).

Создание иконки с помощью «Фотошопа»

Специалисты рекомендуют использовать например, Adobe Photoshop или GIMP. Это позволит создать значок сайта ровно 512×512 пикселей. Таким образом, вы можете сохранить точные пропорции картинки, использовать прозрачные изображения или залить фон на ваш выбор. Эта картинка может быть в JPEG или GIF. После этого нужно определить, как установить фавикон на сайт.

Зачем нужно добавлять на сайт?

Как уже было отмечено, иконка favicon - это маленький значок, который появляется рядом с названием сайта в браузере. Он помогает пользователям идентифицировать ссылку, а более частые посетители вашего сайта будут моментально определять это маленькое изображение. Это повышает узнаваемость бренда и помогает завоевать доверие среди аудитории. Таким образом, фавикон определяет «личность» вашего сайта. Кроме того, он также улучшает юзабилити и пользовательский опыт сайта.

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

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

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

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

Как добавить фавикон на блог WordPress

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

Как добавить фавикон в WordPress

Начиная с версии WordPress 4.3 можно добавить favicon на сайт из области администратора. Просто перейдите в «Вид»/«Настройки» и выберите вкладку «Сайт».

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

Добавление фавикона на блог

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

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

Как установить фавикон на WordPress старой версии (4.2 или ниже)

Загрузите свой фавикон в корневой каталог сайта по После этого можете просто вставить этот код в файл header.php нужной темы.

< link rel="icon" href ="http://www.example. com/favicon.png" type= "image/x-icon" >

< link rel="shortcut icon" href ="http://www.example. com/favicon.png" type= "image/x-icon" >

Замените wpbeginner.com на URL вашего сайта, и все будет сделано. Если блог не имеет файла header.php или вы не можете найти его, то используйте специальный плагин. Установите и активируйте его в настройках сайта. После активации плагина зайдите в «Настройки», найдите пункт «Вставка колонтитулов», перейдите к вкладке «Вставка кода», приведенного выше в разделе заголовка, и сохраните настройки.

Если не хотите разбираться с тонкостями работы с FTP, но при этом все же интересуетесь, как установить фавикон, также можете использовать специальный плагин, который регулирует загрузку иконки на всех этапах. Такие дополнения к движку доступны не только для WordPress, но и для других популярных систем, в том числе для Joomla.

Самый простой способ сортировки, при котором востребованные приложения располагаются на главном экране или ближе к нему, а запускаемые редко занимают своё место на последних страницах.

Преимущества : нужные приложения всегда под рукой.

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

2. Папки по категориям

С момента появления папок в iOS использовать их для сортировки сам бог велел. Наиболее логичный способ - это сгруппировать их по тематике. «Интернет», «Спорт», «Офис», «Игры» - сама система подсказывает названия для объединения двух похожих приложений. Обычно всё помещается в папках на втором экране, а на первом освобождается место для более востребованных программ.

Преимущества : можно компактно разместить большое количество приложений.

Недостатки : сложность поиска и одно дополнительное действие для запуска.

3. Папки действий

В отличие от предыдущего, в этом способе в качестве критерия сортировки используется назначение приложений - действия, которые они помогают совершать. Например, в папку «Читать» попадают iBooks, Reeder и Pocket, в «Слушать» - Spotify, «Подкасты» и «Музыка», а в «Играть» - игры.

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

Преимущества : удобство восприятия и минимальное время на поиски.

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

4. Папки на одном экране

Суть этого способа - в сознательном отказе от использования нескольких рабочих столов для того, чтобы разместить всё на главном экране. Придётся постараться и сгруппировать приложения так, чтобы уложиться в доступное место. Зато потом не надо будет листать - достаточно открыть одну из папок и запустить нужное приложение.

Преимущества : максимальная компактность.

Недостатки : довольно сложно сгруппировать все приложения по нескольким папкам.

5. По тематике без папок

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

Преимущества : более чёткое визуальное восприятие и быстрый поиск.

Недостатки : почти нереально уместить нужные приложения на 2–3 рабочих столах; они растягиваются на 5–7 экранов.

6. Минимализм

Хороший способ, упрощающий поиск приложений и делающий ваш рабочий стол привлекательным. Однако подойдёт он лишь тем, у кого настолько мало установленных приложений, что их можно разместить на 1–2 экранах.

Преимущества : красиво и понятно.

Недостатки : бесполезно, если приложений больше двадцати.

7. По алфавиту

Самый суровый способ для тех, кому лень как-либо сортировать приложения. Он используется в iOS по умолчанию. Если вы знаете название приложения, найти его не составит труда. Для включения такого типа сортировки откройте «Настройки» → «Основные» → «Сброс», выберите «Сбросить настройки „Домой“» и подтвердите действие.

Преимущества : строгий порядок.

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

8. По цвету

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

Преимущества : очень красиво.

Недостатки : почти бесполезно. Найти нужное приложение становится довольно сложно.

9. Комбинированный способ

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

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

Преимущества : возможность тонкой настройки под себя.

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

Как поддерживать на рабочем столе порядок

Какой бы из способов вы ни выбрали, не забывайте поддерживать порядок. Сделать это очень легко. Достаточно придерживаться простых правил:

Создавайте не больше трёх рабочих столов, иначе на пролистывание экранов будет уходит много времени.
Раз в месяц удаляйте приложения, которые не используете. Иконок станет меньше, а порядка больше. Ещё и .
Не забывайте о поиске. Свайп вниз на любом экране откроет Spotlight, в котором, вбив всего пару символов, можно легко найти нужное приложение.

Формат ICO и другие графические форматы иконок. Установка фавикон на сайт с поддержкой для iOS, Android и др. устройств, а также новинок HTML5. Пошаговая инструкция, от простого к сложному, доступно и наглядно, для начинающих веб-мастеров.

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

Так вы узнаете о некоторых секретах формата ICO, проблемах с Internet Explorer и их устранении, о новых графических форматах favicon (прозрачных и анимированных) , стандартах HTML5 и иконках для мобильных устройств под iOS и Android, а также многое другое.

Формат ICO
Файл favicon.ico
BugFix для Internet Explorer
Фавикон в HTML5

Фавикон для Apple
Фавикон для Android

Адрес файла favicon.ico

Формат ICO

А начну я с того, что формат ICO (Windows icon) был разработан компанией Microsoft для значков файлов. Он аналогичен формату CUR (Windows cursors) и наиболее близок к BMP . Отличие лишь в заголовках, а также наличии маски, что и позволяет создавать прозрачность в рисунках. Однако альфа-канал (полупрозрачность) для 32-битных значков появился лишь в Windows XP.

Файл favicon.ico

Идея с файлом favicon.ico (картинкой 16х16 пикселей) тоже принадлежит Microsoft, которую они реализовали для закладок в Internet Explorer 5. Отсюда и название fav - сокращённо от favorite - избранное, а icon - значок. На данный момент этот формат поддерживается всеми популярными браузерами, но главное в деталях. Условно обобщённый вариант установки фавикон на сайт имеет следующий вид:

Обратите внимание на то, что в приведённом примере используется два отношения: shortcut (с англ. ярлык ) и icon (с англ. иконка ). Фишка в том, что shortcat здесь является излишним, и был оставлен лишь для старых версий Internet Explorer, но он должен идти перед icon .

image/vnd.microsoft.icon vs image/x-icon?

Интересно и то, что в 2003 году формат ICO был зарегистрирован Саймоном Батчером (Simon Butcher) в IANA и его MIME-типом стал image/vnd.microsoft.icon . Проблема в том, что старые версии Internet Explorer не могут корректно интерпретировать его, так что лучше использовать старый image/x-icon .

BugFix для Internet Explorer

Не забываем и о том, что для Internet Explorer можно использовать HTML-костыли основанные на комментариях, например:

Другие графические форматы фавикон

Впрочем, сейчас активно стала набирать обороты интеграция и других графических форматов: PNG, GIF, JPEG, APNG и SVG. Лучше всего дело обстоит со статическими форматами PNG и GIF , их поддерживают все новые версии популярных браузеров. Анимированный APNG работает только в Firefox (начиная с версии 3.0) и Opera (начиная с версии 9.5) , а вот анимированный GIF не понимают лишь IE и Safari. JPEG не поддерживает только Internet Explorer.

Приведу несколько корректных примеров вставки favicon в соответствующих форматах на сайт:

Обращаю внимание на то, что для APNG использует MIME-тип video/png , а для GIF (даже анимированного) - image/gif . Также интересен здесь и MIME-тип для SVG формата, это image/svg+xml .

Фавикон в HTML5

Теперь, что касается формата favicon в HTML5 , подробней читайте . Интересным здесь является атрибут sizes , который задаёт размер иконок для визуально отображения в формате:

{ширина1} x{высота1} [{ширинаN} x{высотаN} ] | any

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

Favicon.ico для мобильных браузеров

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

Фавикон для Apple

Если атрибут sizes не указан, используется значение по умолчанию 57x57 .

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

apple-touch-icon-57×57.png
apple-touch-icon-72×72.png
apple-touch-icon-114×114.png
apple-touch-icon-144×144.png

Если же Вы хотите, чтобы iOS не добавляла к иконке каких-то эффектов , используйте ключевое слово precomposed , например:

Здесь тоже имеется набор автоматически распознаваемых имён:

apple-touch-icon-57×57-precomposed.png
apple-touch-icon-72×72-precomposed.png
apple-touch-icon-114×114-precomposed.png
apple-touch-icon-144×144-precomposed.png

Фавикон для Android

Браузеры на базе Android унаследовали формат Apple. По сути, будет достаточно указать, что-то вроде следующего:

Адрес файла favicon.ico

Наверное, Вы обратили внимание на то, что в некоторых примерах используется относительный, а не к фавикон? Это не случайно, т.к. помимо HTTP сейчас набирает обороты HTTPS. Для избежания проблем, в абсолютном адресе, проще не указывать протокол, например:

или использовать относительный путь.

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

Ну, а теперь попробуем сформировать обобщённый вариант вставки фавикон сайт , у меня он получился таким:

Попробую внести ясность в предложенную конструкцию. В начале идёт фавикон для Internet Explorer, который среагирует на shortcut . Далее оптимальным будет статичная PNG иконка с прозрачностью, а анимацию иконки я отдал GIF формату. Для мобильных устройств создадим иконки стандартного размера 57x57 пикселей, одну без эффектов, а другую со своими эффектами (precomposed - отключит эффекты браузера) . Для того чтобы избежать проблем с HTTP и HTTPS я указал относительный путь , начиная от корня сайта (/ - в начале адреса) , но для IE, наверное, лучше будет использовать абсолютный путь.

На этом у меня всё. Надеюсь, что статья была Вам полезна. Если сможете внести какие-то правки, дополнения, уточнения и т.д. - пишите. Спасибо за внимание. Удачи!