Иконка веб-сайта — важная деталь вашего сайта. Однако зачастую о пресловутой favicon мы задумываемся в самый последний момент и вставляем строчку link тега всего с одним вариантом иконки. Иногда считаем достаточным положить файл favicon в корень сайта, ведь современный браузер в силах самостоятельно найти и подключить вашу иконку. А иногда забываем о favicon вовсе.
В свою очередь favicon не так прост как кажется и имеет не один вариант подключения, отображения и параметров. И если с десктопными браузерами все просто, то для смартфонов иконка может содержать массу различных параметров и размеров. А ведь существуют и совсем экзотические варианты вроде Google TV и т.д. Давайте попробуем разобраться какие вообще бывают варианты favicon.
Начнем с привычных вещей. Практически все версии десктопных браузеров опираются на иконки формата 16×16, 32×32 и 48×48 в формате .png или .ico (для старых версий IE только .ico).
Когда речь касается мобильных устройств, встает важный вопрос разрешения экрана. Как известно, все современный смартфоны имеют параметр плотности пикселей на дюйм - PPI, а это значит иконка одного и того разрешения будет выглядеть по разному на экранах с различной плотностью. Поэтому браузеры под андроид используют целый ряд различных разрешений для иконки:
Андроид воспринимает иконки в формате .png, а так же опирается на файл manifest.json который может содержать в себе ряд различных косметических параметров. В случае отсутствия возможных вариантов иконки под андроид, система опирается на иконки apple-touch-icon.
Как и в андроид, устройства Apple имеют различный PPI для разных устройств, в том числе так называемые Retina-экраны. Для разных версий разрешений экрана и версий ОС так же существует ряд различных вариантов иконок:
Существуют также иные нестандартные объявления для иконок, например
Логично предположить, что для подключения всего этого многообразия 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, выбрать степень сжатия для экономии места, выбрать алгоритм масштабирования и т.д.
После подкручивания настроек под наши нужды, можно наконец-то сгенерировать иконки. В появившемся окне мы увидим несколько вариантов подключения иконок. Чтобы подключить иконки привычным способом в файл HTML, достаточно скачать предложенный архив и вставить специально сгенерированный код между тегами head вашего сайта.
После чего можно проверить работоспособность ваших favicon тут.
Теперь, когда мы понимаем принципы генерации favicon, для отображения вашего сайта на различных устройствах, мы можем автоматизировать этот процесс с помощью таск-менеджеров. Достаточно после генерации посмотреть вкладки Grunt или 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 вашего сайта поисковики Яндекс и Google, можно воспользоваться специальными сервисами:
http://favicon.yandex.net/favicon/mydomain.comhttp://www.google.com/s2/favicons?domain=mydomain.com
Где mydomain.com – домен вашего сайта.
Хотите поговорить о PHP за под пиво пятничным вечером? Заметьте, это просто посиделки, а конференция, на которой мы, будем выступать. Не полным составом, конечно, а силами двух спикеров.
В предыдущей статье мы уже начали рассказывать вам о новой версии «1С-Битрикс: Управление сайтом», которую представили на презентации 30 мая. Мы успели выделить только некоторые “фишки” и особенности новой редакции, да и то рассказали о них в общих чертах. Теперь хотелось бы остановиться на некоторых блоках более подробно, в частности, поговорить о Сайтах24.
Весна для компании 1С-Битрикс оказалась очень плодотворной. Всего пару месяцев назад мы всей командой слушали и обсуждали презентацию Битрикс24.Гонконг, а вчера появился ещё более весомый повод для дискуссий: релиз новой сборки версии «1С-Битрикс: Управление сайтом» 18.0.
