Какой размер для фавиконок использовать?
Чтобы далеко не ходить, сразу укажу, что остановился я на трех таких размерах для фавиконок, которые подходят всем браузерам и всем экранам:
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon-180x180.png"> <link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png"> <link rel="shortcut icon" href="favicon.ico">
Для сайта на CMS WordPress это может выглядеть так:
<link rel="apple-touch-icon" sizes="180x180" href="<?php bloginfo('template_directory'); ?>/images/favicon/apple-touch-icon-180x180.png"> <link rel="icon" type="image/png" sizes="32x32" href="<?php bloginfo('template_directory'); ?>/images/favicon/favicon-32x32.png"> <link rel="shortcut icon" href="<?php bloginfo('template_directory'); ?>/images/favicon/favicon.ico">
apple-touch-icon-180x180.png
— сразу для всех современных гаджетов и больших экранов, эту иконку будет использовать и iOs, и Android- Для обычных браузеров,
favicon-32x32.png
— средних размеров, можно и больше, но устройства, которые могут использовать большего размера фавикон, возьмут первый вариантapple-touch-icon-180x180.png
- Все же еще где-то используют IE9 и младше, поэтому приходится использовать такой устаревший формат как
favicon.ico
, по идее, можно сделать размер и 32х32, но оставим 100% поддерживаемый 16х16.
До этого я использовал такие фавиконки:
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"> <link rel="apple-touch-icon" href="apple-touch-icon-57x57.png"> <link rel="apple-touch-icon" sizes="72x72" href="apple-touch-icon-72x72.png"> <link rel="apple-touch-icon" sizes="114x114" href="apple-touch-icon-114x114.png">
Но все эти иконки успешно должна заменить одна apple-touch-icon-180x180.png.
И, скорее всего, этот вариант неправильный, потому что надо самые большие иконки указывать выше, чтобы устройство перебирало, подходит ли этот размер и выбирало дальше, если не подходит. А самая последняя иконка самого маленького размера точно подойдет для любого устройства.
На iPhone старых версий размер 180х180 просто сожмется до нужных пропорций.
Если же следовать требованиям всех браузеров и гаджетов, тогда придется делать под каждый формат свою иконку:
<link rel="apple-touch-icon" sizes="57x57" href="apple-touch-icon-57x57.png"> <link rel="apple-touch-icon" sizes="60x60" href="apple-touch-icon-60x60.png"> <link rel="apple-touch-icon" sizes="72x72" href="apple-touch-icon-72x72.png"> <link rel="apple-touch-icon" sizes="76x76" href="apple-touch-icon-76x76.png"> <link rel="apple-touch-icon" sizes="114x114" href="apple-touch-icon-114x114.png"> <link rel="apple-touch-icon" sizes="120x120" href="apple-touch-icon-120x120.png"> <link rel="apple-touch-icon" sizes="144x144" href="apple-touch-icon-144x144.png"> <link rel="apple-touch-icon" sizes="152x152" href="apple-touch-icon-152x152.png"> <link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon-180x180.png"> <link rel="icon" type="image/png" href="favicon-32x32.png" sizes="32x32"> <link rel="icon" type="image/png" href="favicon-194x194.png" sizes="194x194"> <link rel="icon" type="image/png" href="favicon-96x96.png" sizes="96x96"> <link rel="icon" type="image/png" href="android-chrome-192x192.png" sizes="192x192"> <link rel="icon" type="image/png" href="favicon-16x16.png" sizes="16x16"> <link rel="manifest" href="manifest.json"> <meta name="apple-mobile-web-app-title" content="JoJo Productions"> <meta name="application-name" content="JoJo Productions"> <meta name="msapplication-TileColor" content="#00aba9"> <meta name="msapplication-TileImage" content="mstile-144x144.png"> <meta name="msapplication-config" content="browserconfig.xml"> <meta name="theme-color" content="#555555"> <link rel="shortcut icon" href="favicon.ico">
Но самый первый вариант с тремя фавиконами успешно заменяет кучу этих иконок.
Кстати, фавиконы не обязательно размещать в корень сайта (в моем примере такие пути указаны для лучшей читаемости), их нужно сохранить в любой каталог с изображениями и просто указать правильный относительный или абсолютный путь к ним.
Немного другая вариация фиксированного меню. Меню фиксируется к верхней части экрана только на мобильных устройствах….
Красивая и не слишком сложная анимация, например, для загрузочной страницы сайта. HTML <h1 class="intro">[CSS animation]…
Один из множества примеров сделать фиксированное меню при прокрутке. Пример упрощен, потому что хедер изначально…
Делаем параллакс-эффект для больших блоков с фоном и для отдельных элементов на сайте. Подключаем jQuery…