Как сделать favicon для сайта.

Преамбула

Favicon (от FAVorite ICON) называют иконку, отображающуюся на вкладке (или в окне, зависит от браузера) с открытым сайтом.

Вот на моем пока стандартная иконка WordPress:

Делаем свою.

Форматы файлов для favicon

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

PNG: десктопные браузеры (Chrome, Safari, Firefox, Opera, Internet Explorer 11 и некоторые другие), а также браузеры для Android.

GIF: Chrome, Safari, Firefox, Opera

Анимированный GIF: Firefox, Opera. Однако, использовать анимированный GIF не рекомендуется — будет мельтешить и надоедать, да и это не самый легкий формат для картинок.

SVG (векторные изображения): Safari

Преимущество формата ICO в том, что иконка позволяет в одном файле хранить изображения разных размеров (с разным разрешением), также рекомендуется делать файл ICO для совместимости со старыми версиями браузеров. Еще формат ICO рекомендует Google и Яндекс, они выводят иконку в поисковой выдаче рядом с заголовком сайта.

Рекомендуемые разрешения для favicon

Если сравнивать с иконками для своего приложения под Windows (копия) у favicon рекомендуемых расширений целый зоопарк, хотя изначально предусматривалось только разрешение 16x16.

Десктопные браузеры:

— 16x16
— 32x32
— 48x48

Устройства на Android (в зависимости от разрешения экрана и количества точек на дюйм):

— 36x36
— 48x48
— 72x72
— 96x96
— 144x144
— 192x192

Устройства Apple:

— от 57x57 до 76x76

Устройства Apple с дисплеем Retina:

— от 114x114 до 180x180

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

Wordpress запрашивает у пользователя PNG с расширением 512x512, сохраняет его и дополнительно генерирует картинки со следующими разрешениями: 32x32, 150x150, 180x180, 192x192, 270x270, 300x300. Причем, в коде страницы прописываются сначала файлы с разрешением 32x32 и 192x192 (для десктопных и андроидных браузеров соответственно), потом 180x180 как иконка для девайсов от Apple и иконка 270x270 для использования в качестве закрепленной иконки в плиточном интерфейсе Windows 8.1

Как сделать favicon

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

Установка favicon в WordPress

Для современных версий движка WordPress на моменте создания изображения все сложности практически и заканчиваются:
Favicon в WordPress
К сожалению, WordPress не умеет генерировать иконку в формате ICO, но это легко исправить. Таковую иконку легко собрать вручную, или же сгенерировать с помощью генератора favicon’ов (онлайн).

Генерация favicon онлайн

Есть, например, такой вот генератор favicon: https://realfavicongenerator.net/. Он генерирует иконки сразу на все случаи жизни: для десктопных браузеров и поисковиков, для кнопки сайта в iOS, иконку сайта для Android Chrome, иконку для плиточного интерфейса Windows 8.1 и 10, и даже векторную иконку для Safari (MacOS). В процессе генерации можно покрутить разные параметры для каждого случая в отдельности (размер, цвет фона и т.д.)

В конце вы получаете архив с иконками, вебманифест сайта для Android-устройств, browserconfig.xml для IE11 (Win 8.1) и Edge (Win 10), а такжe HTML-код, который необходимо вставить в секцию <head></head> на страницы сайта:

<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
<meta name="msapplication-TileColor" content="#000000">
<meta name="theme-color" content="#ffffff">

Создание favicon вручную

Постараюсь описать «на все случаи жизни». Пусть изображения (кроме ICO) будут находиться в /img/icons (измените путь на ваш).

Современные десктопные браузеры (с поддержкой PNG):

1. Экспортируем исходное изображение как PNG с разрешениями 16x16, 32x32, 48x48 и именами, пусть fi-16x16.png, fi-32x32.png, fi-48x48.png
2. В секции <head></head> прописываем теги:
<link rel="icon" type="image/png" sizes="48x48" href="/img/icons/fi-48x48.png">
<link rel="icon" type="image/png" sizes="32x32" href="/img/icons/fi-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/img/icons/fi-16x16.png">
3. Заливаем файлы на сайт. Далее не буду упоминать, что все теги прописываются в <head></head>, а файлы надо не забыть залить на сайт 🙂

Интересно, что автоматический генератор favicon и движок WordPress игнорируют разрешение 48x48. Почему так я не совсем понял, если у кого-то есть соображения на сей счет, высказывайтесь в комментариях.

Классический favicon.ico для поддержки устаревших браузеров и для поисковиков:

По идее, современные браузеры тоже должны поддерживать формат ICO, так что можно пропустить предыдущий пункт, хотя я перестраховался и оставил его.
1. Экспортируем исходное изображение как PNG с разрешениями 16x16, 32x32, 48x48
2. Далее потребуется инструмент для сборки иконки icon sushi Копия
3. Открываем все нужные изображения (File —> Open…)
4. Выделяем их в окне программы.
5. Сохраняем иконку (File —> Save as Multiple Icon) под именем favicon.ico
6. Заливаем ее в корень сайта.
7. Добавляем теги:
<link rel=”shortcut icon” href=”/favicon.ico” type=”image/x-icon”>
<link rel=”icon” href=”/favicon.ico” type=”image/x-icon”>

Для WordPress добавляем в раздел между тегами <head></head> файла header.php текущей темы (Внешний вид —> Редактор тем, в Редакторе ищем файл header.php) следующий код:

<link rel=”shortcut icon” href=”<?php echo get_site_url(); ?>/favicon.ico” />
<link rel=”icon” href=”<?php echo get_site_url(); ?>/favicon.ico” />
Остальные устройства

Источники

1. Манифест? А? Что? Зачем?
2. Пишем правильный манифест для сайта
3. get_site_url()
4. Favicon сегодня: форматы, поддержка, автоматизация (копия)
5. Как сделать фавикон для сайта

Пропал PDF-принтер и Foxit PDF Creator от Foxit

Но мы запасливые.

Преамбула

Сегодня переустанавливал клиентам винды, ставил бесплатный Foxit PDF Reader, и с удивлением обнаружил, что в новых версиях из комплекта софтины пропала возможность создавать PDF плагинами для Word и Excel, также пропал и PDF-принтер.

Видимо их профессиональная программа Phantom хреново продавалась. И Foxit на этой почве скурвился.

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

Лицензионное соглашение не мешает распространять старые версии, с принтером, креатором и прочими свистелками. Тем более, что программа работает на XP, и, скорее всего, я выпущу небольшой ролик для развития темы (PDF, DJVU и FB в Windows XP).

А пока нате вам.

Скачать

Foxit Reader v. 8.3.2.25013

Проверка на битые сектора (bad-блоки) диска в Linux.

Преамбула

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

Проверка и получение списка bad-блоков

Естественно, все команды выполняются от root или через sudo.

badblocks -v /dev/sdc2 >/tmp/badsect.txt

где:
-v — подробный вывод информации о процессе. Правда слово «подробный» здесь некоторое преувеличение. В процессе вывод будет такой:

Checking blocks 0 to 1805311
Checking for bad blocks (read-only test):

Но, без ключа -v программа будет молчать, как партизан на допросе.

/dev/sdc2 — раздел, который необходимо проверить.
/tmp/badsect.txt — куда выводить список bad-секторов.

Программка стандартная (входит в пакет e2fsprogs), так что в неурезанных дистрибутивах есть.

Служебные сообщения она выводит на stderr, так что «наблюдать» за процессом перенаправление вывода в файл не помешает

Если после окончания работы утилиты вывод такой, то все OK, битых секторов нет:

Checking blocks 0 to 1805311
Checking for bad blocks (read-only test): done
Pass completed, 0 bad blocks found. (0/0/0 errors)

Примечание: Если у вас только консоль, посмотреть список разделов можно командой

ls /dev/sd*

Вывод:
/dev/sda /dev/sdb /dev/sdb1 /dev/sdb2 /dev/sdc /dev/sdc1 /dev/sdc2

Или через fdisk:
fdisk -l

Пометка найденных сбойные секторов

Чтобы ОС не могла записать данные в битый сектор.
Примечание: способ работает только на ext файловых системах (ext2, ext3, ext4)

e2fsck -l /tmp/badsect.txt /dev/sdc2

где:

-l взять список bad-блоков из файла и пометить их.
/tmp/badsect.txt — файл со списком bad-секторов
/dev/sdc2 — раздел, с которым надо работать.

Плюсы:
+ способ работает почти во всех линуксах
Минусы:
— работает только на линуксовых файловых системах (fsck не понимает ключ -l)
— если битых секторов слишком много, проще выкинуть винчестер e2fsck начинает писать, что сектор находится «вне диапазона» и не метит его.

Грязный хак, способный на некоторое время продлить жизнь жесткого диска

Внимание! Никогда, слышите, никогда так не делайте! Начав сыпаться, жесткий диск может крякнуть в любой момент, проще (и дешевле, если у вас на харде что-то кроме котофото из интернетов) купить новый хард. Меня заставили под пытками. Мне пришлось, т.к. HDD был от древнего квадраттера, работающего на линухе, и HDD требовался IDE-шный, который сейчас хрен найдешь (да, для работы я не делюсь своими IDE HDD, я жадный).

Так вот, если битые сектора кучкуются в начале или в конце жесткого диска, то возможно, глюк оттуда не расползется, так что часть с битыми секторами можно просто отрезать и пометить в gparted как unformatted

Но никогда так не делайте. Я предупреждал.

Victoria, утилита для проверки HDD на поврежденные сектора (BAD-блоки)

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

Утилита уже пожилая, но лучше еще никто не придумал. И она запускается и нормально работает из Windows PE, что на базе XP, что на базе Windows 7

Для удобства утилита упакована в RAR SFX-архив (мало ли кто будет качать на машину без установленных архиваторов)

Victoria 4.46b

Последняя официальная версия. Минус — на системах x64 не работает, только x86.

Скачать Victoria 4.46b с Mega.NZ (RAR SFX)

Victoria 4.47

Пропатченная белорусскими умельцами версия. Один из плюсов — работает на x64 системах (но в режиме API). На x86 в т.ч. на XP и XP PE тоже работает. Минус (относительный) — показывает график вместо привычной карты диска.

Список исправлений в версии 4.47:

1) возможен запуск на x64 виндах (доступен только режим API)
2) процесс сканирования не останавливается в случайных местах
3) возможно случайное сканирование на дисках более 1TB
4) можно свободно сворачивать окно программы не боясь за процесс сканирования (даже рекомендую сворачивать окно)
5) возможно сканирование за один проход дисков более 1TB (визуальное отображение секторов при этом отключается)
6) ругательства на драйвер PortTalk теперь производятся в лог
————————————
E-mail: syshwid@gmail.com

Скачать Victoria 4.47 с Mega.NZ (RAR SFX)