# django-favicon-plus
Django favicon plus is a simple django app which allows you to upload a image and it renders a wide variety for html link tags to display the favicon. These different tags are used for bookmark links on mobile devices or they appear if you favorite a website in your browser.
This version is a fork of the [original version from arteria
GmbH](https://github.com/arteria/django-favicon-plus/) due to lack of
maintenance.
## How to use:
Install django-favicon using PIP.
```shell
pip install django-favicon-plus-reloaded
pip install git+https://edugit.org/AlekSIS/libs/django-favicon-plus.git
```
Add app to `INSTALLED_APPS` List in your `settings.py` file, make sure `sites`-app is also installed, a URL is
specified in the admin backend and you specify your site in settings.py with `SITE_ID = <your-site-id-here>`.
```python
INSTALLED_APPS = (
...
'django.contrib.sites',
...
'favicon',
...
)
```
The default `FAVICON_CONFIG` look like this, if you want something else you can define it in your settings.py.
The key of the dictionary is the value for the `rel` attribute of the link tag, while the list in the value are the
sizes for the `size` attribute and the image resizing.
```python
FAVICON_CONFIG = {
'shortcut icon': [16 ,32 ,48 ,128, 192],
'touch-icon': [196],
'icon': [196],
'apple-touch-icon': [57, 72, 114, 144, 180],
'apple-touch-icon-precomposed': [57, 72, 76, 114, 120, 144, 152,180],
}
```
Please make sure you have specified a `MEDIA_URL` in `settings.py` and your root `urlconf` looks like this:
```python
urlpatterns = [
path('admin/', admin.site.urls),
...,
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
```
You can also provide a `FAVICON_PATH` in your `settings.py` to specify the folder name of your favicon folder.
The default is `favicon`
Upload an image in the admin backend --> all the size will be created, its best to take a larger base favicon.
Use the templatetag in your base.html
```html+django
{% load favtags %}
{% place_favicon %}
```
this will create:
```html
<link rel="apple-touch-icon-precomposed" size ="180x180" href="/media/favicon/fav-180.png"/>
<link rel="apple-touch-icon-precomposed" size ="152x152" href="/media/favicon/fav-152.png"/>
<link rel="apple-touch-icon-precomposed" size ="144x144" href="/media/favicon/fav-144.png"/>
<link rel="apple-touch-icon-precomposed" size ="120x120" href="/media/favicon/fav-120.png"/>
<link rel="apple-touch-icon-precomposed" size ="114x114" href="/media/favicon/fav-114.png"/>
<link rel="apple-touch-icon-precomposed" size ="76x76" href="/media/favicon/fav-76.png"/>
<link rel="apple-touch-icon-precomposed" size ="72x72" href="/media/favicon/fav-72.png"/>
<link rel="apple-touch-icon-precomposed" size ="57x57" href="/media/favicon/fav-57.png"/>
<link rel="apple-touch-icon" size ="180x180" href="/media/favicon/fav-180_5l5PyO1.png"/>
<link rel="apple-touch-icon" size ="144x144" href="/media/favicon/fav-144_5A8THfC.png"/>
<link rel="apple-touch-icon" size ="114x114" href="/media/favicon/fav-114_GqBGFXA.png"/>
<link rel="apple-touch-icon" size ="72x72" href="/media/favicon/fav-72_UoWu9ik.png"/>
<link rel="apple-touch-icon" size ="57x57" href="/media/favicon/fav-57_sfX3XoJ.png"/>
<link rel="touch-icon" size ="192x192" href="/media/favicon/fav-192.png"/>
<link rel="shortcut icon" size ="192x192" href="/media/favicon/fav-192_rD0bCKr.png"/>
<link rel="shortcut icon" size ="128x128" href="/media/favicon/fav-128.png"/>
<link rel="shortcut icon" size ="48x48" href="/media/favicon/fav-48.png"/>
<link rel="shortcut icon" size ="32x32" href="/media/favicon/fav-32.png"/>
<link rel="shortcut icon" size ="16x16" href="/media/favicon/fav-16.png"/>
<link rel="icon" size ="192x192" href="/media/favicon/fav-192_Gw5Uu1M.png"/>
<link rel="shortcut icon" size ="32x32" href="/media/favicon/fav-32.png"/>
```
## Management
You can upload multiple images, but only one is set as favicon and used.
## Contribution
If you want to contribute something send an MR.
# Source
### Based on
[Favicon Cheat Sheet on github](https://github.com/audreyr/favicon-cheat-sheet)
### Favicon
16x16 .ico or better .png
```html
<link rel="shortcut icon" href="/images/favicon.png" />
```
### apple-touch-icon(-precomposed)
57x57, 72x72, 114x114, and 144x144
highest resolution for ipad retina 144x144.png precomposed(=iOS won’t add any effects to the icon)
```html
<link rel="apple-touch-icon" sizes="144x144" href="/images/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="114x114" href="/images/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="72x72" href="/images/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="57x57" href="/images/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="/images/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="/images/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="/images/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon-precomposed" sizes="57x57" href="/images/apple-touch-icon-57x57.png">
```
Android versions 1.5 and 1.6 will read the second tag (with "-precomposed"), and versions 2.1 and newer will read the first tag.
Google's specifications say that you should use 48x48 pixel PNGs, but you can use a large image (128x128), like Google does for its own apps.
https://mathiasbynens.be/notes/touch-icons
Raw data
{
"_id": null,
"home_page": "https://edugit.org/AlekSIS/libs/django-favicon-plus",
"name": "django-favicon-plus-reloaded",
"maintainer": "AlekSIS Team",
"docs_url": null,
"requires_python": "",
"maintainer_email": "aleksis-dev@lists.teckids.org",
"keywords": "",
"author": "arteria GmbH",
"author_email": "arteria@arteria.ch",
"download_url": "https://files.pythonhosted.org/packages/42/df/8cec4f60b07aa98e863c9121eacd418ade74b849469ac5edc65e488eaaef/django-favicon-plus-reloaded-1.2.tar.gz",
"platform": null,
"description": "# django-favicon-plus\n\nDjango favicon plus is a simple django app which allows you to upload a image and it renders a wide variety for html link tags to display the favicon. These different tags are used for bookmark links on mobile devices or they appear if you favorite a website in your browser. \n\nThis version is a fork of the [original version from arteria\nGmbH](https://github.com/arteria/django-favicon-plus/) due to lack of\nmaintenance.\n\n## How to use:\nInstall django-favicon using PIP.\n```shell \npip install django-favicon-plus-reloaded\npip install git+https://edugit.org/AlekSIS/libs/django-favicon-plus.git\n```\n\nAdd app to `INSTALLED_APPS` List in your `settings.py` file, make sure `sites`-app is also installed, a URL is\nspecified in the admin backend and you specify your site in settings.py with `SITE_ID = <your-site-id-here>`.\n\n```python\nINSTALLED_APPS = (\n ...\n 'django.contrib.sites',\n ...\n 'favicon',\n ...\n)\n``` \nThe default `FAVICON_CONFIG` look like this, if you want something else you can define it in your settings.py.\nThe key of the dictionary is the value for the `rel` attribute of the link tag, while the list in the value are the\nsizes for the `size` attribute and the image resizing.\n\n```python\nFAVICON_CONFIG = {\n 'shortcut icon': [16 ,32 ,48 ,128, 192],\n 'touch-icon': [196],\n 'icon': [196],\n 'apple-touch-icon': [57, 72, 114, 144, 180],\n 'apple-touch-icon-precomposed': [57, 72, 76, 114, 120, 144, 152,180],\n}\n```\nPlease make sure you have specified a `MEDIA_URL` in `settings.py` and your root `urlconf` looks like this:\n\n```python\nurlpatterns = [\n path('admin/', admin.site.urls),\n ...,\n] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)\n```\n\nYou can also provide a `FAVICON_PATH` in your `settings.py` to specify the folder name of your favicon folder.\nThe default is `favicon`\n\nUpload an image in the admin backend --> all the size will be created, its best to take a larger base favicon.\n\nUse the templatetag in your base.html\n```html+django\n{% load favtags %}\n \n{% place_favicon %}\n```\nthis will create:\n```html\n<link rel=\"apple-touch-icon-precomposed\" size =\"180x180\" href=\"/media/favicon/fav-180.png\"/>\n<link rel=\"apple-touch-icon-precomposed\" size =\"152x152\" href=\"/media/favicon/fav-152.png\"/>\n<link rel=\"apple-touch-icon-precomposed\" size =\"144x144\" href=\"/media/favicon/fav-144.png\"/>\n<link rel=\"apple-touch-icon-precomposed\" size =\"120x120\" href=\"/media/favicon/fav-120.png\"/>\n<link rel=\"apple-touch-icon-precomposed\" size =\"114x114\" href=\"/media/favicon/fav-114.png\"/>\n<link rel=\"apple-touch-icon-precomposed\" size =\"76x76\" href=\"/media/favicon/fav-76.png\"/>\n<link rel=\"apple-touch-icon-precomposed\" size =\"72x72\" href=\"/media/favicon/fav-72.png\"/>\n<link rel=\"apple-touch-icon-precomposed\" size =\"57x57\" href=\"/media/favicon/fav-57.png\"/>\n<link rel=\"apple-touch-icon\" size =\"180x180\" href=\"/media/favicon/fav-180_5l5PyO1.png\"/>\n<link rel=\"apple-touch-icon\" size =\"144x144\" href=\"/media/favicon/fav-144_5A8THfC.png\"/>\n<link rel=\"apple-touch-icon\" size =\"114x114\" href=\"/media/favicon/fav-114_GqBGFXA.png\"/>\n<link rel=\"apple-touch-icon\" size =\"72x72\" href=\"/media/favicon/fav-72_UoWu9ik.png\"/>\n<link rel=\"apple-touch-icon\" size =\"57x57\" href=\"/media/favicon/fav-57_sfX3XoJ.png\"/>\n<link rel=\"touch-icon\" size =\"192x192\" href=\"/media/favicon/fav-192.png\"/>\n<link rel=\"shortcut icon\" size =\"192x192\" href=\"/media/favicon/fav-192_rD0bCKr.png\"/>\n<link rel=\"shortcut icon\" size =\"128x128\" href=\"/media/favicon/fav-128.png\"/>\n<link rel=\"shortcut icon\" size =\"48x48\" href=\"/media/favicon/fav-48.png\"/>\n<link rel=\"shortcut icon\" size =\"32x32\" href=\"/media/favicon/fav-32.png\"/>\n<link rel=\"shortcut icon\" size =\"16x16\" href=\"/media/favicon/fav-16.png\"/>\n<link rel=\"icon\" size =\"192x192\" href=\"/media/favicon/fav-192_Gw5Uu1M.png\"/>\n<link rel=\"shortcut icon\" size =\"32x32\" href=\"/media/favicon/fav-32.png\"/>\n```\n## Management\n\nYou can upload multiple images, but only one is set as favicon and used.\n\n\n## Contribution\n\nIf you want to contribute something send an MR.\n\n\n# Source\n\n### Based on \n\n[Favicon Cheat Sheet on github](https://github.com/audreyr/favicon-cheat-sheet)\n\n### Favicon\n16x16 .ico or better .png\n```html\n<link rel=\"shortcut icon\" href=\"/images/favicon.png\" />\n```\n### apple-touch-icon(-precomposed)\n57x57, 72x72, 114x114, and 144x144\nhighest resolution for ipad retina 144x144.png precomposed(=iOS won\u2019t add any effects to the icon)\n```html\n<link rel=\"apple-touch-icon\" sizes=\"144x144\" href=\"/images/apple-touch-icon-144x144.png\">\n<link rel=\"apple-touch-icon\" sizes=\"114x114\" href=\"/images/apple-touch-icon-114x114.png\">\n<link rel=\"apple-touch-icon\" sizes=\"72x72\" href=\"/images/apple-touch-icon-72x72.png\">\n<link rel=\"apple-touch-icon\" sizes=\"57x57\" href=\"/images/apple-touch-icon-57x57.png\">\n\n<link rel=\"apple-touch-icon-precomposed\" sizes=\"144x144\" href=\"/images/apple-touch-icon-144x144.png\">\n<link rel=\"apple-touch-icon-precomposed\" sizes=\"114x114\" href=\"/images/apple-touch-icon-114x114.png\">\n<link rel=\"apple-touch-icon-precomposed\" sizes=\"72x72\" href=\"/images/apple-touch-icon-72x72.png\">\n<link rel=\"apple-touch-icon-precomposed\" sizes=\"57x57\" href=\"/images/apple-touch-icon-57x57.png\">\n```\nAndroid versions 1.5 and 1.6 will read the second tag (with \"-precomposed\"), and versions 2.1 and newer will read the first tag.\n\nGoogle's specifications say that you should use 48x48 pixel PNGs, but you can use a large image (128x128), like Google does for its own apps.\n\nhttps://mathiasbynens.be/notes/touch-icons\n",
"bugtrack_url": null,
"license": "MIT",
"summary": "Simple Django app which allows you to upload a image and it renders a wide variety for html link tags to display the favicon",
"version": "1.2",
"project_urls": {
"Homepage": "https://edugit.org/AlekSIS/libs/django-favicon-plus"
},
"split_keywords": [],
"urls": [
{
"comment_text": "",
"digests": {
"blake2b_256": "99f816fcf5ab1b361c02f6817efe4c6f8be39ae0904538baf4d48b7fced1319a",
"md5": "430a908ebfceaac62039068aa49f15d3",
"sha256": "51d135671670bce1c4969e4098fadf0c89a290e5624f2a124fafd0a959bd350b"
},
"downloads": -1,
"filename": "django_favicon_plus_reloaded-1.2-py3-none-any.whl",
"has_sig": false,
"md5_digest": "430a908ebfceaac62039068aa49f15d3",
"packagetype": "bdist_wheel",
"python_version": "py3",
"requires_python": null,
"size": 10232,
"upload_time": "2023-12-05T21:11:28",
"upload_time_iso_8601": "2023-12-05T21:11:28.886044Z",
"url": "https://files.pythonhosted.org/packages/99/f8/16fcf5ab1b361c02f6817efe4c6f8be39ae0904538baf4d48b7fced1319a/django_favicon_plus_reloaded-1.2-py3-none-any.whl",
"yanked": false,
"yanked_reason": null
},
{
"comment_text": "",
"digests": {
"blake2b_256": "42df8cec4f60b07aa98e863c9121eacd418ade74b849469ac5edc65e488eaaef",
"md5": "b160706a14208d84d3695abe11b93381",
"sha256": "70343304391b91f519cd920ea136efdf61638aa9744e6c377303e67f3842e6f2"
},
"downloads": -1,
"filename": "django-favicon-plus-reloaded-1.2.tar.gz",
"has_sig": false,
"md5_digest": "b160706a14208d84d3695abe11b93381",
"packagetype": "sdist",
"python_version": "source",
"requires_python": null,
"size": 8279,
"upload_time": "2023-12-05T21:11:31",
"upload_time_iso_8601": "2023-12-05T21:11:31.329327Z",
"url": "https://files.pythonhosted.org/packages/42/df/8cec4f60b07aa98e863c9121eacd418ade74b849469ac5edc65e488eaaef/django-favicon-plus-reloaded-1.2.tar.gz",
"yanked": false,
"yanked_reason": null
}
],
"upload_time": "2023-12-05 21:11:31",
"github": false,
"gitlab": false,
"bitbucket": false,
"codeberg": false,
"lcname": "django-favicon-plus-reloaded"
}
JSON