- Что такое фавикон
- Android
- Apple
- Edge и ie 12
- favicon downloader
- Favicon для android
- Favicon для десктопа
- Favicon для мобильных устройств apple
- hifavicon
- Html5 и атрибут sizes
- Mac os
- P.s. еще немного полезностей
- Автоматизация
- В каком формате должен быть фавикон?
- В своих проектах мы используем gulp
- Достаточный пакет фавиконок для популярных браузеров
- Зачем нужен фавикон
- И как настроить и подключить все это многообразие?
- Как включить favicon в браузере safari в новой ios 12 и/или macos mojave
- Как создать favicon для сайта
- Как установить разные favicon для отдельных страниц
- Какую картинку выбрать для фавикона
- Код для таск-менеджеров grunt и gulp
- Пора ли отправлять ico на свалку?
- Прочие favicon
- Размеры фавиконов для браузеров и устройств
- свои иконки для приложений
- Формат favicon
- Заключение
Что такое фавикон
Favicon (от англ. FAVorites ICON — «значок для избранного») — значок сайта или страницы.
Значок отображается:
В Google фавиконки не отображаются. Поисковик периодически тестирует эту функцию, так что они могут появиться в будущем.
Хотя в результатах иностранного поисковика фавиконов нет, они все равно отображаются на вкладках браузера и в закладках.
Android
Устройства на Android отлично понимают формат PNG, а ещё поддерживают манифест веб-приложения manifest.json, в котором можно прописать все параметры того, как будет вести себя сайт, если его установить на домашний экран. Этот манифест пока, к сожалению, не читают устройства под IOS. А если Android не найдет этот файл, то он будет использовать apple-icon-touch.
Файл манифеста может содержать в себе ряд космических параметров, но тут находятся лишь те, которые нам необходимы для отображения сайта на домашнем экране:
{ "name": "Rick and Morty", "short_name": "Rick", "icons": [ { "src": "/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" }, { "src": "/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png" }
], "theme_color": "#b3adad", "background_color": "#b3adad", "display": "standalone"
}Ключ
name
определяет подпись в приложению на домашнем столе. Если этот параметр не указан, подпись будет взята из
Ключ short_name определяет укороченную подпись для приложения, если не хватает места для полного имени;
Ключ icons — определяет массив объектов иконок, может принимать три значения: sizes, src, type;
Ключ theme_color определяет цвет строки состояния. Начиная с 39 версии хрома для Android Lollipop появилась возможность менять цвет интерфейса браузера и цвет вкладки браузера.
Задать цвет можно и через <head>, добавив следующий мета-тег:
Ключ
background_color
определяет цвет фона для веб-приложения на домашнем столе. Этот же параметр отвечает за то, какой цвет будет иметь фон приложения, когда он открывается, т.е. манифест загрузился, но ещё не загрузились стили;
Ключ display определяет режим отображения веб-приложения. Например, значение standalone, которое мы указали, позволило открывать нам сайт как приложение.
Вызов в <head>:
Apple
Для iOS иногда используют размер 57×57, но рекомендуют лучше делать иконку PNG размером 180×180. В документации Safari такие называются
Web Clips, в них не должно быть прозрачности, углы автоматически округлятся при добавлении на главный экран. Это значок высокого расширения, он будет отображаться и в других браузерах.
В rel нужно указать “apple-touch-icon.png”.
Пример кода:
Edge и ie 12
Цвет файла и фона для иконки можно указать с помощью метаданных в HTML.
Пример кода:
У Microsoft есть
«Browser configuration schema reference» — XML-документ, в котором перечислены различные значки, соответствующие интерфейсу. Файлы конфигурации браузера позволяют задавать настройки с помощью внешних XML-файлов.
Пример кода:
favicon downloader
Download website icons with Favicon Downloader. Favicon Downloader can download all the different icons a website provides for various platforms including:
-apple-touch-icon
-apple-touch-icon-precomposed
-shortcut icon
-mask-icon (mask-icon is an SVG image websites can provide for Safari tabs).
-Web app icons used in Android.
-Microsoft Pinned Site icons.
-Google TV icons.
You can type a website address in the app to view all the icons the website provides and optionally save the image files on your Mac.
Favicon для android
Когда речь касается мобильных устройств, встает важный вопрос разрешения экрана. Как известно, все современный смартфоны имеют параметр плотности пикселей на дюйм — PPI, а это значит иконка одного и того разрешения будет выглядеть по разному на экранах с различной плотностью. Поэтому браузеры под андроид используют целый ряд различных разрешений для иконки:
- 36×36 – для экранов с коэффициентом плотности 0.75
- 48×48 – для экранов с коэффициентом плотности 1
- 72×72 – для экранов с коэффициентом плотности 1.5
- 96×96 – для экранов с коэффициентом плотности 2
- 144×144 – для экранов с коэффициентом плотности 3
- 192×192 – для экранов с коэффициентом плотности 4
Андроид воспринимает иконки в формате .png, а так же опирается на файл manifest.json который может содержать в себе ряд различных косметических параметров. В случае отсутствия возможных вариантов иконки под андроид, система опирается на иконки apple-touch-icon.
Favicon для десктопа
Начнем с привычных вещей. Практически все версии десктопных браузеров опираются на иконки формата 16×16, 32×32 и 48×48 в формате .png или .ico (для старых версий IE только .ico).
Favicon для мобильных устройств apple
Как и в андроид, устройства Apple имеют различный PPI для разных устройств, в том числе так называемые Retina-экраны. Для разных версий разрешений экрана и версий ОС так же существует ряд различных вариантов иконок:
- 57×57 – для iPhone с не ретина дисплеем и iOS версии 6.0 и ниже
- 60×60 – для iPhone с не ретина дисплеем и iOS версии 7.0
- 72×72 – для iPad с не ретина дисплеем и iOS версии 6.0 и ниже
- 76×76 – для iPad с не ретина дисплеем и iOS версии 7.0
- 114×144 – для iPhone с ретина дисплеем и iOS версии 6.0 и ниже
- 120×120 – для iPhone с ретина дисплеем и iOS версии 7.0
- 144×144 – для iPad с ретина дисплеем и iOS версии 6.0 и ниже
- 152×152 – для iPad с ретина дисплеем и iOS версии 7.0
- 180×180 – для iPhone 6 Plus c iOS версии 8.0
hifavicon
A fast and easy way to create a favicon for your website that looks good on new hi-res Retina displays as well as on regular displays.
Drag in a 32×32 icon image and a 16×16 one, then drag out your new favicon.ico into the desired folder.
You can also drop a non-square or larger image in the app, and it will resize appropriately (preserving aspect-ratio, filling the space from the center).
When you drop an existing retina favicon on either the 32 or 16 pixel areas, it will pick the right size from the icon.
The newly created favicon even works in old Internet Explorer versions on Windows XP.
Html5 и атрибут sizes
Атрибут
sizes
пришел в нашу жизнь с HTML5. Благодаря ему браузер или устройство может выбрать необходимый размер фавикона. Атрибут
sizes
указывается в формате [ширина х высота] без указания единиц. Если в файле хранится сразу несколько иконок, можно задавать их размеры через пробел. Ключевое слово any указывает, что иконка может масштабироваться до любого размера, например, если она хранится в векторном формате SVG.
Mac os
В Mac OS особо не разгуляешься, к сожалению. Если сохранить сайт на рабочий стол в Mac OS, то значок будет отображаться как скриншот страницы с html кодом. Просто так сайт приложением в Mac OS не сделать, но и не будем.
Safari — вот где нам пригодится формат SVG. Чтобы использовать SVG, необходимо указать атрибут rel со значением mask-icon, все элементы SVG должны быть черного цвета. Но не стоит пугаться, цвет можно поменять атрибутом color.
P.s. еще немного полезностей
Если вы хотите узнать как видят favicon вашего сайта поисковики Яндекс и Google, можно воспользоваться специальными сервисами:
Автоматизация
В заключение нужно сказать, что все, что мы рассмотрели в рамках данной статьи, не обязательно писать руками, не забывайте про автоматизацию. Существуют сайты, на которых можно быстро сгенерировать все необходимые нам размеры и форматы favicon:
, а при необходимости можно заодно сгенерировать код.
Есть пакеты для сборки и для Gulp, и для Grunt.
Главное помнить, что сегодня favicon — это больше, чем иконка в адресной строке и закладке браузера.
В каком формате должен быть фавикон?
Раньше основным форматом фавикона был формат ICO. Его главная особенность заключалась в том, что файл такого формата мог хранить в себе несколько вариантов размеров иконки. Сейчас формат ICO считается устаревшим, на смену ему пришёл формат PNG с новыми возможностями по взаимодействию с иконкой.
Помимо PNG, поддерживается формат SVG. Но у него, к сожалению, невысокая поддержка на данный момент. Однако этот формат идеально подходит для фавиконов, его использование намного бы упростило нам жизнь. Будем надеяться, что ситуация скоро изменится.
Фавикон может быть создан ещё в нескольких форматах, например, в формате GIF или JPEG, но проблемы с поддержкой делают их использование нецелесообразным.
В своих проектах мы используем gulp
1. Установите плагин gulp-real-favicon
npm install gulp-real-favicon --save-dev
2. Вставьте код в свой gulpfile.json
var realFavicon = require ('gulp-real-favicon');
var fs = require('fs');
// File where the favicon markups are stored
var FAVICON_DATA_FILE = 'faviconData.json';
// Generate the icons. This task takes a few seconds to complete.
// You should run it at least once to create the icons. Then,
// you should run it whenever RealFaviconGenerator updates its
// package (see the check-for-favicon-update task below).
gulp.task('generate-favicon', function(done) { realFavicon.generateFavicon({ masterPicture: 'TODO: Path to your master picture', dest: 'TODO: Path to the directory where to store the icons', iconsPath: '/', design: { ios: { pictureAspect: 'backgroundAndMargin', backgroundColor: '#ffffff', margin: '21%' }, desktopBrowser: {}, windows: { pictureAspect: 'whiteSilhouette', backgroundColor: '#da532c', onConflict: 'override' }, androidChrome: { pictureAspect: 'shadow', themeColor: '#ffffff', manifest: { name: 'PUGOFKA', display: 'browser', orientation: 'notSet', onConflict: 'override' } }, safariPinnedTab: { pictureAspect: 'silhouette', themeColor: '#5bbad5' } }, settings: { compression: 5, scalingAlgorithm: 'Mitchell', errorOnImageTooSmall: false }, markupFile: FAVICON_DATA_FILE }, function() { done(); });
});
// Inject the favicon markups in your HTML pages. You should run
// this task whenever you modify a page. You can keep this task
// as is or refactor your existing HTML pipeline.
gulp.task('inject-favicon-markups', function() { gulp.src([ 'TODO: List of the HTML files where to inject favicon markups' ]) .pipe(realFavicon.injectFaviconMarkups(JSON.parse(fs.readFileSync(FAVICON_DATA_FILE)).favicon.html_code)) .pipe(gulp.dest('TODO: Path to the directory where to store the HTML files'));
});
// Check for updates on RealFaviconGenerator (think: Apple has just
// released a new Touch icon along with the latest version of iOS).
// Run this task from time to time. Ideally, make it part of your
// continuous integration system.
gulp.task('check-for-favicon-update', function(done) { var currentVersion = JSON.parse(fs.readFileSync(FAVICON_DATA_FILE)).version; realFavicon.checkForUpdates(currentVersion, function(err) { if (err) { throw err; } });
});3. Замените TODO: Path to your master picture на путь до вашего исходника из которой будут генерироваться иконки. Например, assets/images/master_picture.png
4. Замените TODO: Path to the directory where to store the icons на путь до директории где будут лежать ваши сгенерированые иконки. Например, dist/images/icons
5. Замените TODO: List of the HTML files where to inject favicon markups на путь до файлов в которые будет вставлен код внедрения favicon. Например, [‘dist/*.html’, ‘dist/misc/*.html’]
6. Замените TODO: Path to the directory where to store the HTML files на путь до директории, где хранятся ваши HTML файлы.
7. Сгенерируйте иконки командой
gulp generate-favicon
8. Интегрируйте иконки в ваш шаблон
gulp inject-favicon-markups
Достаточный пакет фавиконок для популярных браузеров
Стандартно для фавикона делают файл favicon.ico — это контейнер для нескольких файлов. Будет достаточно favicon.ico с файлами в размерах 16×16, 32×32 и 48×48.
Этот пакет обеспечит нормальный внешний вид фавиконок на разных платформах. В остальных случаях система масштабирует до нужного размера.
Зачем нужен фавикон
Посмотрим, для чего нужен файл favicon.ico и можно ли без него обойтись. Иногда на форумах новички спрашивают, дает ли использование
favicon.ico бонусы при продвижении. Фавикон никак не влияет на оптимизацию и ранжирование, тем не менее, у него есть другие плюсы.
Favicon привлекает внимание к сайту. Без иконки сниппет меньше заметен взгляду, кажется, что ему чего-то не хватает.
- С фавиконом сайт запоминается лучше
Иконка для сайта — элемент бренда. Пользователь лучше запомнит логотип из фавикона и свяжет его с брендом, если будет видеть его на сайте и других площадках.
- Упрощает поиск нужного сайта
В закладках и истории проще искать нужный сайт не по тексту заголовка, а по опознавательной картинке — знакомому фавикону.
- Избавляет от ошибки в лог-файлах
Браузеры запрашивают файл
favicon.ico и если не находят строку с указанием фавикона, сервер отмечает в логах ошибку 404.
К примеру, такую:
И как настроить и подключить все это многообразие?
Логично предположить, что для подключения всего этого многообразия favicon потребовалось бы немало усилий. На что возникает резонный вопрос: существует ли инструмент для автоматизации этого процесса? И конечно же он существует. Для тех, кто в своей front-end разработке использует таск-менеджеры такие как Grunt или Gulp, существуют специальные плагины (о них вкратце в конце статьи). Мы же воспользуемся онлайн решением, которое позволит удобно настроить все параметры и сразу увидеть результат.
Онлайн-генератор позволяет на основе всего одной вашей картинки (желательный размер исходника не менее 260×260) создать иконку для вашего сайта для всех типов браузеров и устройств.
После загрузки иконки мы увидим страничку, где сможем очень подробно настроить нашу иконку под каждую платформу и сразу же увидеть результат.
На вкладке настройки под iOS мы можем указать цвет фона для иконки, а так же указать размер отступов внутри области иконки. Вкладка Dedicated picture позволяет загрузить другой вариант иконки для конкретного типа устройства (аналогично для Android, Windows и Mac OS)
Под андроид настройки немного поинтересней. Можно как и в версии iOS указать цвет фона и отступы, также есть вариант прозрачного фона с фирменной тенью всех стандартных иконок этой ОС. Есть возможность указать конкретное имя приложения. Во вкладке Options мы можем указать URL, на который будет вести наше приложение.
Для закрепленных вкладок в Safari 9 под Mac OS X El Capitan используется новый вариант с svg иконками.
С плиточной системой Windows все немного сложнее. Тут указание цвета фона строго обязательно, а цвет логотипа в большинстве случаев лучше выбрать белый.
Конечные глобальные настройки можно произвести в последнем окне опций. Здесь можно указать свой путь до каталога, где будут лежать все файлы для наших сгенерированных favicon, выбрать степень сжатия для экономии места, выбрать алгоритм масштабирования и т.д.
Как включить favicon в браузере safari в новой ios 12 и/или macos mojave
Значит, по порядку:
в iPhone или в iPad
- открываем «Настройки«, тапаем Safari и прокручиваем экране вниз и до раздела «Основные«;
- в нём находим и включаем опции «Показать панели вкладок» и » Показать значки на вкладках«.
Вот и всех делов. Но не забываем, что все знаки на вкладках в Safari iPhone показывать может пока только в «альбомном», то бишь в горизонтальном режиме.
в Mac и macBook:
- открываем Safari, кликаем «Настройки«, потом — «Вкладки«;
- включаем опцию «Отображать значки веб-сайтов на вкладках» (ставим галочку в чек-боксе):
После этого favicon браузер Safari показывать будет для всех сайтов (у которых такие значки предусмотрены), а не только в закрепленных вкладках, как в предыдущих версиях системы.
Как создать favicon для сайта
Есть три самых распространенных способа:
- Специальный плагин для Photoshop
Позволяет работать этому популярному редактору изображений с форматом ico. - Специальные программы для изготовления фавиконов
Они специально «заточены» для изготовления иконок для сайта. - Онлайн генератор favicon
Самый простой и доступный способ — загрузить картинку в генератор, который сделает иконку для сайта из любого изображения. Иконка получится красивее, если изображение-донор кадрировать до квадрата.
Загрузите квадратную картинку в генератор от PR-CY, он создаст архив с файлом ICO, в котором будет несколько вариантов фавикона, в том числе ретина иконки.
Как установить разные favicon для отдельных страниц
Разным страницам сайта можно указать разные фавиконки, чтобы они различались на вкладках. К примеру, веб-мастер может установить разные цвета одной иконки для блога, каталога и форума или для главной и разных сервисов, как у PR-CY:
Как установить разные фавиконки разделам сайта:
- Фавикон для главной и остальных страниц назовите favicon.ico, для отдельных разделов укажите названия по этим разделам, чтобы не запутаться.
- В коде нужной страницы пропишите путь к другой фавиконке раздела:
Какую картинку выбрать для фавикона
Если сайт представляет компанию, в фавикон лучше поставить логотип бренда или его фрагмент, если логотип сложный, детализированный или вытянутый. Если логотипа нет, подберите изображение и цветовую гамму по ассоциации с тематикой сайта.
Раньше любая иконка бросалась в глаза, потому что не все сайты их ставили. Сейчас выделиться сложнее, по запросу «как варить кофе» сайт без фавикона нашелся только на восьмой странице. Привлечь внимание лучше яркой контрастной иконкой, иногда для этого ставят стрелку, указывающую на сайт.
Фавикон в выдаче, на вкладках браузера и в закладках очень маленького размера. Детализированное изображение никто не разглядит. Подберите картинку, где будет минимум деталей, два-три цвета, однозначное прочтение смысла.
Фавикон не будет выделять сайт в выдаче, если у конкурентов будут такие же картинки. Банальные популярные иконки лучше не использовать.
Код для таск-менеджеров grunt и gulp
Теперь, когда мы понимаем принципы генерации favicon, для отображения вашего сайта на различных устройствах, мы можем автоматизировать этот процесс с помощью таск-менеджеров. Достаточно после генерации посмотреть вкладки Grunt или Gulp, в зависимости от того, что вы используете, и подробно изучить предложенный код, чтобы в дальнейшем использовать его в своих проектах и автоматизировать процесс генерации без обращения к онлайн ресурсу.
Пора ли отправлять ico на свалку?
Как я уже сказала, формат ICO сегодня уже можно считать устаревшим, но значит ли это, что от него нужно срочно избавиться? Ответ, как всегда, неоднозначный. Есть случаи, когда формат ICO ещё может сослужить вам хорошую службу. Приведу несколько примеров оправданного использования фавикона в формате ICO в разных операционных системах и поговорим об альтернативах.
Прочие favicon
Существуют также иные нестандартные объявления для иконок, например
- IE10 под Windows 8 требует указания цвета фона
- IE11 под Windows 8 и 10 принимает несколько различных вариантов иконок, а так же параметров настройки опираясь на XML файл browserconfig.xml
- Safari под Mac OS X El Capitan требует SVG иконку для закрепленных табов
- 96×96 – для Google TV
- 228×228 – для Opera Coast
Размеры фавиконов для браузеров и устройств
С технической точки зрения быстрее и проще сделать одну иконку ICO, PNG или SVG для всех устройств. С точки зрения юзабилити лучше сделать несколько для разных устройств и браузеров, потому что они могут отличаться внешне — где-то требуется больший размер, где-то достаточно небольшого файла.
Если мобильный пользователь захочет добавить ссылку на сайт на главный экран смартфона, в Android и iOS иконкой для ссылки станет фавикон.
Если это возможно, ориентируйтесь на каждую платформу, с которой пользователи могут открыть сайт.
свои иконки для приложений
Приложение поможет вам легко и весело создавать красивые значки. Персонализируйте свой телефон и измените его внешний вид под себя!
Создавайте качественные иконки, идеально подходящие для значков команд, которые можно добавить на экран «Домой» и с помощью которых можно будет запустить эту команду.
— Превратите любой смайлик или букву в значок
— Более 2 тыс. системных символов
— Сотни красивых цветов
— Добавляйте фотографии к своим значкам
— Полностью настраиваемые градиенты
— Группируйте значки в папки
Вы также можете создать цветные обои, что позволит согласовать иконки с эстетикой домашнего экрана.
Формат favicon
Изначально картинки для фавиконов создавали только в формате .ico. Этот формат использовал для закладок Microsoft Internet Explorer. Иконки помещали в корневой каталог сайта под именем favicon.ico.
Формат .ico удобен, поскольку в нём можно указать несколько размеров иконок с различной битностью. Минус в том, что браузеры не всегда правильно выбирают размер изображения и в итоге фавикон отображается в низком разрешении.
Позже на смену .ico пришли форматы .png и .svg. Они хорошо отображаются и меньше весят. Большинство современных платформ и операционных систем поддерживают .png, а формат .svg используют в Safari MacOS.
Иногда фавиконки делают в форматах .jpeg и .gif. Это допустимо, но нежелательно, поскольку поддерживают эти форматы не все браузеры. Firefox и Opera разрешают использование анимированных «гифок», но не рекомендую их применять — движущиеся картинки будут отвлекать внимание посетителя при просмотре сайта и раздражать пользователя при отображении среди браузерных вкладок.
В таблице показаны версии основных браузеров и поддерживаемые ими форматы фавикона:
| Основные браузеры и поддержка различных форматов фавикона в разных версиях | ||||||||
|---|---|---|---|---|---|---|---|---|
| Браузер | ICO | PNG | JPEG | SVG | GIF | APNG | GIF-анимация | |
| Google Chrome | Да | От 4.0 | От 4.0 | Нет | От 4.0 | Нет | Нет | |
| Opera | От 7.0 | От 7.0 | От 7.0 | Нет | От 7.0 | От 9.5 | От 7.0 | |
| Firefox | От 1.0 | От 1.0 | Да | Да | От 1.0 | От 3.0 | Да | |
| Internet Explorer | От 5.0 | От 11.0 | Да | Нет | От 11.0 | Нет | Нет | |
| Safari MacOS | Да | От 4.0 | От 4.0 | Да | От 4.0 | Нет | Нет | |
На текущий момент основные форматы для фавикона — это .ico и .png. Формат .jpeg в некоторых случаях может отображаться некорректно. Для Safari MacOS лучше применять .svg. А вот прочие форматы использовать нецелесообразно из-за плохой поддержки.
Для хорошего отображения фавиконов в разных контекстах желательно создавать иконки в двух вариантах:
- С прозрачным фоном. Значок будет показан рядом с URL-адресом: в закладках, в адресной строке и прочее.
- Со сплошной заливкой. Отображается там, где устройство или браузер использует маску для фона: в контекстном меню, в сетчатых закладках.
В таблице я показала, какие стиль и размер фавикона в форматах .png/.svg выбрать для разных браузеров и операционных систем
Классические десктопные браузеры | |||
| 16×16, 32×32, 48×48 | PNG | Прозрачный | |
Браузер Safari | |||
| Вектор | SVG | Прозрачный | |
Мобильный браузер Opera | |||
| 228×228 | PNG | Сплошная заливка | |
Windows 8.0 | |||
| 144×144 | PNG | Прозрачный | |
Windows 8.1 | |||
| 128×128, 270 x 270, 558×558 | PNG | Прозрачный | |
Apple iOS | |||
| 180×180 | PNG | Сплошная заливка | |
Google Android и Chrome | |||
| 192×192, 512×512 | PNG | Сплошная заливка | |
Конечно, сложно представить даже в нескольких таблицах все возможные вариации иконок. Если вы не знаете, какой именно размер фавикона вам необходим, воспользуйтесь специальными сервисами. Например, генератор Favicomatic предлагает на выбор различные размеры иконок и к каждому значку показывает подсказку для лучшего соответствия.
Заключение
Такие, казалось бы обычные действия, позволят вашему сайту выглядеть на различных устройствах еще более адаптивно.
