Как сделать 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. Как сделать фавикон для сайта

Коллекции значков. Флаги всех стран.

Коллекция #1

Коллекция флагов стран в двух исполнениях
Flat — обычные плоские значки и Shiny — слегка выпуклые, с отблеском

Разрешения:
-16×16
-24×24
-32×32
-48×48
-64×64

Форматы:
-PNG
-ICO
-ICNS

Наименования отдельно:
-По названию страны
-По коду ISO

Дополнительно:
Есть флаги некоторых непризнанных республик и международных организаций.

Скачать с Mega.nz
Скачать с Google.Drive

Коллекция #2

Иконки плоские

Разрешения:
-32×32
-128×128

Форматы:
-PNG

Наименования:
-По коду ISO

Скачать с Mega.nz
Скачать c Google.Drive

xidel, крохотный парсер HTML, XML, JSON

Преамбула

Понадобилось тут быстро и качественно выдрать из HTMLки ссылки и картинки.

Наткнулся на довольно интересный инструмент. Называется xidel, и умеет вытаскивать данные не только из HTML, но также из XML, CSS, JSON, в общем штука получается довольно универсальная. Еще один плюс — кросплатформенность. На сайте есть готовые бинарники под Windows, Linux, пакет для Debian. Все вышеперечисленное, что очень приятно, есть в версиях, как для x86, так и для x64. Также имеются версии для Android ARM и Mac OS 10.8. Открыт и исходный код. Утилита, что хорошо, маленькая, самая большая версия для Android — 2Мб, остальные еще меньше.

Брать исходный файл программа может, как из сохраненной на диск страницы, так и непосредственно с сайта.

Примеры использования

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

Выдираем все адреса ссылок с главной страницы:

xidel -s --extract "//a/@href" "http://tolik-punkoff.com"

Выдираем адреса изображений:

xidel -s --extract "//img/@src" "http://tolik-punkoff.com"

То же самое с сохраненной предварительно на диск страницей:

wget -P "/tmp" --default-page="test.html" --header="Content-type: text/html" "http://tolik-punkoff.com"

xidel -s --extract "//a/@href" "/tmp/test.html"

wget -P "/tmp" --default-page="test.html" --header="Content-type: text/html" "http://tolik-punkoff.com"

xidel -s --extract "//img/@src" "/tmp/test.html"

Результат


Скачать

На официальном сайте
Мой пакет для Slackware

Изменение имени страницы входа в админ-панель WordPress

Преамбула

Да, эта информация есть много где в сети, но в некоторых версиях почему-то кое что пропущено, так что эта заметка из серии «от склероза».
Известно, что страница входа в админ-панель по умолчанию носит имя wp-login.php (например tolik-punkoff.com/wp-login.php), и в нее ломятся всякие противные боты и школохацкеры, с целью поломать сайт. Далее простой способ, как защитить сайт от этого. Всегда так делаю, вместе с другими мерами безопасности, конечно же. Из которых самый главный — регулярный бэкап.

Плюсы:

+ Дополнительные плагины не нужны.
+ Делается просто

Минусы:

— Для многопользовательского блога не подходит, но если админов немного — вполне (просто надо раздать всем ссылку на новую страницу входа).
— После глобального обновления WordPress будет слетать, и все придется делать снова.

Меняем имя страницы входа в админ-панель

1. Разлогиниваемся на сайте.

2. Скачиваем по FTP с сайта файлы
wp-login.php
wp-includes/general-template.php

3. Делаем резервную копию этих файлов.

4. Копируем wp-login.php под каким-нибудь другим именем (ctulhu.dot.com.php, 47767deedbeaf6587.php, в общем сами придумайте что-нибудь уникальное).

5. Открываем получившийся файл в любимом текстовом редакторе (редакторе Far’а, mcedit’e, Notepad++) запускаем поиск и замену. Ищем wp-login.php, меняем на новое имя странички входа. Сохраняем изменения

6. Повторяем предыдущий пункт для файла general-template.php

7. В файл wp-login.php заменяем содержимое на следующий код:

<?php
		header('Location: http://natribu.org', true, 301);
?>

8. Убираем виджет авторизации с сайта.

9. Закачиваем измененные файлы обратно на FTP, заменяя старые версии.

Ограничение доступа к каталогу wp-admin

К сожалению, если вы введете адрес yoursite.com/wp-admin, то вас, и злоумышленника, перебросит на страницу авторизации. Самое простое решение — перекрыть доступ со всех IP, кроме доверенных, например, создав а каталоге wp-admin файл .htaccess со следующим содержимым:

order deny,allow
allow from 6.6.6.6
deny from all

где вместо 6.6.6.6 IP с которого будете заходить на сайт в админ-панель.

Повторюсь, заметка от склероза, на полноту и абсолютную правильность не претендует.

Изменение внешнего вида ссылки cut’а в WordPress

И внешнего вида cut’а нашего плагина LJ-cut style plugin for WordPress

Внешний вид ссылки на подкат, и в том и в другом случае управляется CSS-классом a.more-link

Если в CSS-файле вашей темы данный класс не прописан, то ссылка на подкат может выглядеть бледно:

Если так, то заходим в консоль WordPress, в боковом меню выбираем Внешний вид —> Редактор, в редакторе файл style.css, и вставляем на свободное место вне других конструкций CSS, CSS-код стиля more-link:

/*a.more-link*/
a.more-link{
	/*тут параметры стиля*/
}

Например:

/*a.more-link*/
a.more-link{
	font-weight: bold;
	border-bottom:double;
	text-decoration:none;
}

Понятно, что если в CSS темы стиль more-link уже прописан, то меняем его по своему усмотрению.

Теперь ссылка на подкат стала выглядеть симпатичней:

Статья про наш плагин, позволяющий делать в блоге WordPress кат, как в ЖЖ Копия

Окончательно закрыли сайт Hexproject’а

На сайте был старый движок, бесплатные хостинги какашка, да и весь кодинг (даже с приставками «быдло-» и «около-«) можно выложить на Гитхаб, и не надо что-то отдельное изобретать.

Виртуальная сим-карта для регистрации на сервисах, требующих номер телефона.

Мои друзья делают замечательный проект, способствующий сохранению анонимности в Интернете — virtualsim.net. На этом сайте вам за небольшую сумму зарегистрируют номер телефона на год, на который можно будет регистрироваться на всяких сайтах и сервисах, требующих номер телефона (Telegram, Vkontakte, OK.RU и т.д.)

Мы вот таким образом обзавелись телеграм-каналом и страницей во Vkontakte.

У ребят огромная база данных (на несколько тысяч номеров), есть возможность выбрать страну. В настоящий момент доступны Украина, Россия, Казахстан, Латвия. При офигенно качественном и важном сервисе, избавляющем, наконец, от мобильного рабства, цены вполне демократичны: Минимальный тариф за номер — 5$ в год для некоммерческой деятельности, например, регистрации страницы в VK, для коммерческой деятельности подороже, но вполне терпимо. Если честно, дешевле я не нашел. Постоянным клиентам предоставляются скидки. Впрочем, дублировать весь прайс в данной заметке я не буду. Если вас заинтересовал сервис, пройдите по ссылке ниже

virtualsim.net

VIRTUALSIM.NET ОСТАВАЙСЯ АНОНИМНЫМ!

Об анимированные GIF

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

Решил проверить, как с этим делом у imgur, который стандартный хостинг для изображений на работе и в блоге, но тот перекодировал GIF во что-то свое, сильно уж вебдванольное, которое в моем браузере отказалось запускаться (но запустилось в Хроме).

Любители современных медиа, у которых смартфоны, и они из них не вылазят, насоветовали Giphy. Вроде работает, действительно загружает и показывает GIF, как GIF, а не как нечто неведомое.
Но неужто, на весь интернет, это единственный хостинг для анимированных GIF? Не верю.

И, предупреждая комментарии, о mail.тьфу или известной тьфунатебяльной сети, я про них знаю, но не подходит, по причине месторасположения. Тьфу на тебя, ГОРФ.

HTML и CSS мелочи

Простой двухколоночный макет на DIV’ах

HTML
CSS
Скачать

Таблица с помощью DIV

HTML
CSS
Скачать

Ограничение размера изображения в CSS

Абсолютный размер в пикселях
По размеру DIV’а
Пример

Источники

Киберфорум
Кот из примера
Еще какие-то

L.S.

Отключение режима обслуживания в WordPress.

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

Чтобы отключить режим обслуживания, надо зайти по FTP на сервер и удалить из корневого каталога сайта (обычно public_html) и удалить файл .maintenance

Если FTP-плагин FAR не видит скрытых файлов (начинающихся с точки)

Надо отредактировать запись об FTP-соединении (по F4), активировать пункт Расширенный режим и проверить, чтобы в поле ниже было написано LIST -la

Способы для некоторых других FTP-клиентов:

Total Commander:
1. net — ftp show hidden files
2. в файле wcx_ftp.ini в разделе [General]
вписать FtpShowHidden=1 и перезагрузить Total Commander.

Far Navigator:
Custom List command
LIST -la

Скачать пост в PDF

Маленький сайтик с моими программами.

Завел себе отдельный маленький сайтик, куда буду выкладывать свои быдлокодерские поделки, а то негоже им на Хаоссофте валяться. Заодно сайтик это типа демонстрация возможностей маленького «визиточного» движка.
Hellcome!
http://hexladen.comli.com/

Это перепост заметки из моего блога на LJ.ROSSIA.ORG
Оригинал находится здесь: http://lj.rossia.org/users/hex_laden/326529.html
Прокомментировать заметку можно по ссылке выше.

Заshitа, паимаешь.

Или как я случайно сломал либрусек.
Не, это шутка насчет «случайно сломал», просто лежала у меня в закладках книжка на том самом либрусеке, а я разгребал срач в закладках, и перешел. В ответ мне всплыло мерзкое жабаскриптовское окошко, перегораживающее весь текст, и предложило либо зарегистрироваться бесплатно (но для маськвы и маськовской области, совсем охуели, суки, будто весь мир вокруг их сраной помойки вертится), либо заплатить 4 рубля.
А я решил попробовать просто запретить NoScript’ом жабий скрип на либрусеке, и надо же, поганое окошко как ветром сдуло. А книжку я на всякий случай отправил на принтер. Принтеру никакой жабий скрип не помешает.

Это перепост заметки из моего блога на LJ.ROSSIA.ORG
Оригинал находится здесь: http://lj.rossia.org/users/hex_laden/320574.html
Прокомментировать заметку можно по ссылке выше.

О халявных хостингах заруб ежом.

Буду краток. GrendelHosting — говно, просто ненормально падучий, такое ощущение, что они на ночь сервера выключают. Из розетки. Для Хаоссофта остановился на 000webhost

Это перепост заметки из моего блога на LJ.ROSSIA.ORG
Оригинал находится здесь: http://lj.rossia.org/users/hex_laden/318312.html
Прокомментировать заметку можно по ссылке выше.

Перенес Хаоссофт

На зарубежные хостинги, два дня выбирал адекватный и бесплатный. В результате создал два зеркала, одно на GrendelHosting. По тому, что предлагают за ноль денег, казалось лучшим выбором: безлимитный входящий трафик, безлимитное (!) место под сайт, замечательная контрольная панель, FTP и прочие плюхи, типа бесконечного числа поддоменов. Но чувства подсказывали, что так хорошо все не бывает. Сутки пришлось ждать активации аккаунта, а в последующие двое суток, аккаунт почему-то деактивировался пару раз, причем странным образом — переходишь по адресу сайта, перекидывает на страничку провайдера с надписью, мол аккаунт не активирован, если вы создатель сайта, подождите, пока обновятся кэши DNS. По FTP тоже не зайти, а в панели статус аккаунта (я уж грешным делом подумал, за что-то словил бан, ибо TOS читать не люблю) Active. И через их собственный предпросмотр сайта он тоже открывается нормально. В общем какие-то у них странные глюки.
Решил сегодня еще один хостинг найти, запасной. В общем долго парился, сравнивал, потом плюнул и тыкнул по первой ссылке из Гугля 000webhost. Перенес сайт и туда, буду месяц наблюдать, потом оставлю какой-нибудь один. Старый Хаоссофт пока работает, но долбанный gixx.ru, мрази, совсем задолбали куда надо и не надо совать проверку на спам, даже когда ковыряешься в админке сайта, может вылететь предложение ввести капчу, что приводит к весьма неожиданным глюкам в работе самой админки и сайта.
Скрипты и всякую мелочь думаю с Хаоссофта перенести на отдельный маленький сайтик.
Думал еще на host.sk зеркало создать, но говорят, он из ГОРФ не открывается, причем не заблокирован роскомганьбой, а просто не открывается.
Новые ссылки на Хаоссофт:
http://chaossoft.grn.cc
http://chaossoft.site90.com

Это перепост заметки из моего блога на LJ.ROSSIA.ORG
Оригинал находится здесь: http://lj.rossia.org/users/hex_laden/313903.html
Прокомментировать заметку можно по ссылке выше.

Движок для сайта-визитки. Последняя версия.

Умницы-карелы прислали последнюю версию движка.
Скачать можно здесь.

Это перепост заметки из моего блога на LJ.ROSSIA.ORG
Оригинал находится здесь: http://lj.rossia.org/users/hex_laden/299287.html
Прокомментировать заметку можно по ссылке выше.

Движок для сайта-визитки

Основан на какой-то галерее, сделали друзья-карелы сто лет назад. На этом движке работает ChaosSoft.
По-умолчанию админский пароль хранится в открытом виде, и передается тоже, посему для безопасности требуется снести с сервера admin.php и passlogin.php, после того как все настроили и заполнили сайт информацией. Можно включить нормальную авторизацию.
Требует php, но основан на файлах (MySQL не нужен)
Установка проста:
-Распаковываем архив
-Копируем все файлы в директорию на сервере
-Настраиваем сайт, вносим информацию
-Сносим admin.php и passlogin.php
Скачать можно здесь (все версии сразу в одном архиве)

Это перепост заметки из моего блога на LJ.ROSSIA.ORG
Оригинал находится здесь: http://lj.rossia.org/users/hex_laden/298530.html
Прокомментировать заметку можно по ссылке выше.

Как не надо делать сайты

Вот хипста-дизайнеры wos’а мудаки то.
Есть хорошая статья, но читать ее невозможно совершенно из-за мельтешащего на краю зрительного поля изображения, а еще блять сайт, на котором кроме текста вообще нихуя толком нет, который блять информационный ресурс, и текст там, епта, основное, не работает без JS.
Медицинские дебилы. Хуже, блять, просвиньина.
Если вы когда-нибудь будете делать сайт — не делайте его так, пусть говна в мире будет поменьше.
UPD: оно все-таки потом съебало с экрана, но осадок остался.

Это перепост заметки из моего блога на LJ.ROSSIA.ORG
Оригинал находится здесь: http://lj.rossia.org/users/hex_laden/275518.html
Прокомментировать заметку можно по ссылке выше.

про «Спойлер и Прокорм»

Бля, зашел на сайт просвиньина и сблеванул. Не от текста, а от дизайна — когда под заголовком и аннотацией статьи всплывает уебищная картинка на которой нихуя не прочитать текст, причем картинка имеющая отношение не только к статье, но (прошу особо заметить!) и к упоротому мозгу редактора, или хто у их там за ту хуйню ответственный, при прокручивании вообще какой-то триповый эффект с напрягающими всплывающими и мигающими картинками.
Дизайн (особенно в данном случае) прекрасно передает суть сайта. Так что дизайнера наградить! После чего отрезать руки по самую жопу.

Это перепост заметки из моего блога на LJ.ROSSIA.ORG
Оригинал находится здесь: http://lj.rossia.org/users/hex_laden/264304.html
Прокомментировать заметку можно по ссылке выше.

Хваталка


Маленькая изящная программка для захвата цвета
В комплекте есть экранная лупа с регулировкой увеличения.
Автоматически конвертирует цвет в RGB, HLS, CMYK, HEX/VCL.
Правый клик мыши — поиск цвета, левый — захват.
Freeware, для Windows.
Установки не требует.
Автор и все сетевые хранилища с софтиной куда-то подевались за давностью лет, потому выкладываю, чтоб не потерялось.
Скачать с Yandex.Disk
Скачать с Mega.co.nz

Это перепост заметки из моего блога на LJ.ROSSIA.ORG
Оригинал находится здесь: http://lj.rossia.org/users/hex_laden/220959.html
Прокомментировать заметку можно по ссылке выше.